sfeed, an HTML/CSS standard for enabling feeds

Preface

After linking to this page on the Hacker News thread Show HN: RSS feeds for arbitrary websites using CSS selectors, a couple of swift replies noted that sfeed already exists as the h-feed microformat!

Perhaps because embracing the JSON Feed standard seems so intuitive to me, I still don't quite get the h-feed spec, even after reading it a couple of times. If after studying it further I still believe sfeed contains better ideas, I will contact the maintainers of the microformat with a request for changes.

Also, this microformat needs to be promoted! The web standards movement persuaded both browser vendors and web designers alike to standardize; it should be easier to persuade feed reader developers and web developers to do so today. The societal stakes are clearly higher, the technical implementation much easier.

—Adam

Rationale

Web feeds derived from documents are a great contribution to the Web, enabling valuable timely sharing. They should be as easy as possible to produce.

Since 1999 however we’ve produced them by duplicating the contents of an HTML page into an accompanying XML file to create an RSS/Atom feed (and more recently into JSON for a JSON Feed). Even as CMSs such as WordPress undertook the task of producing these RSS feeds automatically, the method is unnecessarily redundant (two versions of each page) and back-to-front, optimizing for the relatively few feed readers rather than for the multitudinous producers of content pages.

Instead the following is a simple spec to specify the elements of a feed from within HTML. The Web page can then be consumed directly by a feed reader empowered with sfeed functionality without the painstaking configuration of a scraping setup per selector per feed, nor the need for the content producer to create and maintain any additional files.

Pressing this need is that newer Javascript-powered publishing stacks do not easily produce XML, so that many recent blogs — even within the web development sphere itself — lack RSS feeds entirely. And we don’t want that.

The Elements as Selectors

The general method of the spec is to use CSS classes and/or HTML attribs to express the JSON Feed standard (because it’s fresher than RSS and Atom). Please refer to the JSON Feed docs for rationale behind each of these elements. Following the order set by JSON Feed, they are, as CSS classes:

class="-sfeed-sfeed[.*]"
class="-sfeed-top-version"
class="-sfeed-top-title"
class="-sfeed-top-home_page_url"
class="-sfeed-top-description"
class="-sfeed-top-user_comment"
class="-sfeed-top-next_url"
class="-sfeed-top-icon"
class="-sfeed-top-favicon"
class="-sfeed-top-authors"
class="-sfeed-top-author-name"
class="-sfeed-top-author-url"
class="-sfeed-top-author-avatar"
class="-sfeed-top-language"
class="-sfeed-top-expired"
class="-sfeed-top-hubs"
class="-sfeed-item"
class="-sfeed-id"
class="-sfeed-url"
class="-sfeed-external_url"
class="-sfeed-title"
class="-sfeed-content_html"
class="-sfeed-content_text"
class="-sfeed-summary"
class="-sfeed-image"
class="-sfeed-banner_image"
class="-sfeed-date_published"
class="-sfeed-date_modified"
class="-sfeed-authors"
class="-sfeed-author-name"
class="-sfeed-author-url"
class="-sfeed-author-avatar"
class="-sfeed-tags"
class="-sfeed-language"
class="-sfeed-attachments"
class="-sfeed-attachment-url"
class="-sfeed-attachment-mime_type"
class="-sfeed-attachment-title"
class="-sfeed-attachment-size_in_bytes"
class="-sfeed-attachment-duration_in_seconds"

And as HTML attributes:
sfeed="sfeed[.*]"
sfeed="top-title"
sfeed="top-home_page_url"
...
sfeed="attachment-duration_in_seconds"

Notes on Element Selectors

The elements sfeed[.*] and item are not taken from the JSON Feed spec; instead they are how we focus on our data within the larger HTML page. Conversely the JSON Feed element feed_url is now unnecessary so excluded.

The .-sfeed-sfeed[.*] element is allowed further signifiers, (eg, "sfeed-1", "sfeed-2", "sfeed-most-emailed") in order to facilitate more than one feed per URL.

Top-level fields such as .-sfeed-top-description are not normally necessary as the page’s metatags serve this purpose; they should only be used when setting up multiple sfeeds on a single page, ie, when the page’s meta-data no longer match the feed’s top-level fields.

This explains why the prefix "top-" is added to top-level fields rather than "item-" to item-level: the latter are more likely to be in use, justifying the more concise labeling.

One problem when scraping is when the item’s link, its a tag, is used as the item container. Here, add both classes:

class="-sfeed-item -sfeed-url"

Or as an attribute:

sfeed="item+url"

Activation

A page’s sfeed functionality is activated (made sfeedy?) via a metatag:

<meta property="sfeed" />

There seems no need for a value here, it’s just a trigger.

In the unlikely event that some or all the pertinent HTML is not editable so that neither sfeedy CSS classes nor HTML attributes can be added, then the key to the actual CSS selectors can be placed either in meta tags or an external file (inline though is preferred as it is simpler and only a single feed per page can be generated using this method). As meta tags:

<meta property="sfeed:sfeed" content="my-selector" />
<meta property="sfeed:item" content="my-selector" />
<meta property="sfeed:id" content="my-selector" />
...
<meta property="sfeed:attachment-duration_in_seconds" content="my-selector" />

And as a link to an external JSON file:

<link type="application/sfeed+json" href="https://example.org/[my-sfeed-file].json" />

In the external file, each pair is comprised of the element and a CSS class name. A pair should only be included if its corresponding element exists on the web page. If a pair contains an empty value, then the element is specified on the web page and should be sought there.

An example sfeed.json file:

{
	"sfeed": "my-selector",
	"top-title": "my-selector",
	"top-home_page_url": "my-selector",
	...
	"attachment-duration_in_seconds": "my-selector"
}

sfeedback is very welcome, especially from feed reader developers, whom I hope will be interested in building functionality to handle the sfeed standard; and from web designers and developers, without whose embrace it achieves nothing.

Please email me, Adam Khan, at or tweet #sfeed.

Lasted edited: Tuesday, July 9th, 2021, 13:18 UTC
First posted: Monday, July 5th, 2021