Every website that updates routinely should have an RSS or Atomnews feed that people (and search engines) can use to watch for changes.
By default, these files look horrible when a human looks at them in a browser. But there is a simple way to make them look better:RSS Style!
If you are not a webmaster, checkout outWhat is a new feed? andPicking a news reader for how to get started!
You need to know the name of your RSS/Atom file. It is usually something likefeed.xml
,atom.xml
orrss.xml
. You may be able to use theFeed Analyzer to help you find it. These examples usefeed.xml
, but you should replace it with the name of your feed file.
Download one of theavailable styles and save it asfeed.xslt
in the same directory as yourfeed.xml
file. Note that the extension is.xslt
and NOT.xml
!
Add it to yourfeed.xml
file. At the top of the file, it will look like:
<?xml version="1.0" encoding="UTF-8"?><rss ...>...
Add a line in the middle so it looks like:
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="feed.xslt"?><rss ...>...
Your feed file is often namedfeed.xml
but can be anything. You can use theFeed Analyzer to find the URL of your feed: put it your website's URL and it will display the feeds that it finds.
Thexml-stylesheet
processing instruction tells the browser to use the XSLT stylesheet to transform the raw XML into HTML. This has been supported by all major browsers for a long time.
While there are official content-types for RSS and Atom feeds, some browsers will try to download the feeds rather than display them. This is suboptimal (to say the least), so I strongly recommend using the plain XML content typetext/xml
. You can test how your browser behaves with theContent-Type Testing page.
Content Type
: onlytext/xml
works across browsers.Website | News Feed | Notes | |
---|---|---|---|
Hacker News (front page) | before→after | Missing ‘self’ link, No link in home page body.analyze | |
Hacker News (Show HN) | before→after | Title doesn’t have ‘Show HN’. Missing ‘self’ link. No discovery link.analyze | |
Fly.io | before→after | Bad ‘self’ link. HTML page is missing the discovery linkanalyze | |
Jacques Mattheij | before→after | Bad ‘self’ link (404)analyze | |
Dave Winer | before→after | Missing the ‘self’ link. No link in home page body.analyze | |
Dan Nguyen | before→after | Opens ‘Save As’ in Firefox. (also no https: support)analyze | |
Thomas Schranz | before→after | Different ‘self’ link is different, though it works. No link in home page body.analyze | |
Colin Wright | before→after | Already has styling!CSS. No discovery link.analyze | |
Hillel Wayne | before→after | Opens ‘Save as’ dialog in Firefox. Mismatched discovery link. No link in home page body.analyze | |
Patrick McKenzie | before→after | No link in home page body.analyze | |
Allen Downey | before→after | Opens ‘Save as’ dialog in Firefox. Home page link has a redirect. No link in home page body.analyze | |
Julia Evans | before→after | Self and home page links are ‘http:’analyze | |
Thomas Park | before→after | Opens ‘Save as’ dialog in Firefoxanalyze | |
Kyle Kingsbury | before→after | Opens ‘Save as’ dialog in Firefox. No link in home page body.analyze | |
Mark Nottingham | before→after | Opens ‘Save as’ dialog in Firefox.analyze | |
Tim Bray | before→after | Opens ‘Save as’ dialog in Firefoxanalyze | |
John Graham-Cumming | before→after | CSS stylesheet, but insecure so it doesn’t work. Mismatched ‘self’ link but working.analyze | |
Dan Luu | before→after | Bad ‘self’ link. Bad home page link. No title.analyze | |
Steve Klabnik | before→after | Missing the ‘self’ link. No link in home page body.analyze | |
Stavros Korokithakis | before→after | Discovery vs ‘self’ link mismatch but working. ‘link’ element value is in an attribute instead of the content.analyze | |
Terence Eden | before→after | Has styling, but not exactly pretty. Home page link has a redirect.analyze | |
Chris Coyier | before→after | Opens ‘Save as’ dialog in Firefox.analyze | |
Logo of the day | before→after | Perfect, since it is my sample for testing.analyze | |
Try it on your own feed! | Problems?Feed Analyzer |