Optimizing Your RSS Feed For Flipboard
This document describes the technical requirements, as well as best practices, for optimizing your RSS feed for Flipboard.
Please note that your RSS feed will need to contain all of the following before being featured by Flipboard:
1) The entire body copy of your article, not just headlines and summaries.
2) At least one image per article, no less than 400px in width.
3) At least 30 items.
4) Updates pushed via PubSubHubbub (preferably via Superfeedr).
To simplify RSS compatibility, Flipboard has leveraged the following widely-adopted open standards:
- RSS: The standard syndication format for content on the web. Full-text RSS feeds, where the entire content of the article is included within the feed, are required.
- HTML5 and Microformats: Additional design elements, such as pullquotes, are specified using standard web design techniques.
- Media RSS: Assets such as images, video, and audio are included using this standard extension to RSS.
- PubSubHubbub: An open protocol for subscribing to updates from content providers that allows for efficient, rapid updates of content.
- GeoRSS: Standard method for geotagging within RSS
Example Feed
Below is a sample of an RSS 2.0 feed with two stories:
<rss version="2.0"
xmlns:content="http://purl.Feed Structure
Each <item> within a feed represents an article. At a minimum, the <item> must include the following elements:
<link>: The canonical URL for the article.<title>: The article’s headline.<content:encoded>: The full HTML content of the article. See Content section below.
The following elements are not required, but are highly recommended:
<pubDate>: The date of the article’s publication, in RFC822 format. If not present, will use the time the element was first seen by the Flipboard server.<guid>: a string that uniquely identifies the item within the feed.<description>: A short, plain-text summary or abstract of the article.<dc:creator>: Name of the person who wrote the article. Use multiple<dc:creator>elements for multiple authors.
Content Markup
The <content:encoded> element contains the entire HTML contents of an article. All HTML must be properly escaped; the recommended way to do this is by wrapping the content within a CDATA section.
The class and style attributes (along with all <script> and <style> tags) are stripped from elements, and cannot be relied upon for preserving presentation. For best results, use plain, semantic HTML to provide meaning and structure for the content. Some common examples include:
- Use a heading tag such as
<h3>: Instead of wrapping a paragraph within a<b>or<strong>. - Use
<ul>or<ol>for lists: Instead of using manual line breaks (<br>) and text bullets. - Use
<blockquote>to define a block quotation: Instead of using<p class=quote>or similar.
Content can be enhanced by providing additional semantics within the article markup, adding the ability to specify pull quotes, slideshows, and other design elements:
Title & Subtitle
The <h1> and <h3> elements (along with HTML5’s <hgroup>) can be used at the beginning of the article to specify a title and subtitle:
<hgroup>
<h1>Laughing at America</h1>
<h3>A Thorough Essay on America's Favorite Cartoon Family</h3>
</hgroup>If your content management system does not allow use of the <hgroup> element, enclose the article subtitle in <h3 class=fl-subtitle>:
<h1 class="fl-title">Laughing at America</h1>
<h3 class="fl-subtitle">A Thorough Essay on America's Favorite Cartoon Family</h3>Figures and Captions
The <figure> element was introduced in HTML5. The official HTML5 spec describes the <figure> element as follows:
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Using the <figure> element indicates that the content has more flexibility around its layout on the page. For example, an image contained within a <figure> may span across two columns of text.
<figure>
<img src="kitten.jpg" width="900" height="900">
<figcaption>This is my kitten, Dr. Fluffy</figcaption>
</figure>A <figure> can contain one or more of the following elements:
<img><video><iframe>or<embed>: Only YouTube, Vimeo, and SoundCloud embeds are currently supported<table>or<pre>
Additionally, the optional <figcaption> element serves as the caption for all items within the <figure>. For example, the following markup has two videos that share a single caption:
<figure>
<video width="900" height="900">
<source src="lisa-saxophone-1.mp4" type="video/mp4" />
</video>
<video width="900" height="900">
<source src="lisa-saxophone-2.mp4" type="video/mp4" />
</video>
<figcaption>Little Lisa plays the sax</figcaption>
</figure>If your content management system does not allow you to insert <figure> and <figcaption> elements, you may use<div class=fl-figure> and <div class=fl-figcaption> instead.
Slideshows
A slideshow can be embedded within a post using the following markup, which takes advantage of the HTML5 tags<section>, <figure>, and <figcaption>:
<section class="fl-slideshow">
<h1>My favorite animals</h1>
<figure>
<img src="puppy.jpg" width="1200" height="900">
<figcaption>Puppies are cute</figcaption>
</figure>
<figure>
<img src="kitten.jpg" width="900" height="1200">
<figcaption>Kittens are too</figcaption>
</figure>
<figure>
<img src="lamb.jpg" width="900" height="900">
<figcaption>And baby sheep grow into ewe</figcaption>
</figure>
</section>The <h1> serves as the title of the slideshow, and is considered optional.
If your content management system does not support the <section>, <figure>, or <figcaption> elements, you can use the following backup markup:
<div class="fl-slideshow">
<h1>My favorite animals</h1>
<div class="fl-figure">
<img src="puppy.jpg" width="1200" height="900">
<div class="fl-figcaption">Puppies are cute</div>
</div>
<!-- Other figures go here -->
</div>Pull quotes
A pull quote is an excerpt of content used as a design element to add emphasis or decoration, especially in longer articles. Note that all pull quote content is considered optional, and may not be displayed in all cases. Use the HTML5 <aside> element to construct a pull quote:
<aside>
This is a short pull quote.
</aside>If your content management system does not allow you to insert the <aside> element, you can use <div class=fl-pullquote> to construct a pull quote.
Unsupported Markup
Currently, the following elements and attributes are not supported and will be completely stripped from the<content:encoded> HTML:
<script>and<style>: Element and its contents are entirely removedstyle="...",onclick="...", and similar attributes: Removed from the element<canvas><form>and form elements such as<select>and<input><media:content>
Image, Video, and Audio Assets
Media assets referenced in markup within the <content:encoded> element are automatically downloaded and cached. The following filetypes are supported:
- Images: JPEG, GIF, PNG
- Video: MP4 (H.264 encoded), YouTube or Vimeo embeds
- Audio: MP3, or SoundCloud embeds
Images
Images are specified via the HTML <img> tag:
<img src="disco-stu.jpg" width="800" height="600">For better layout results, use the HTML5 figure and figcaption tags to add captions to images (see Figures and Captions section above):
<figure>
<img src="kitten.jpg" width="900" height="900">
<figcaption>This is my kitten, Dr. Fluffy</figcaption>
</figure><media:content> tags ARE NOT SUPPORTED. Please use <img> instead.
Providing Multiple Sizes / Crops
When displaying the image, the system will choose the most appropriate size and crop based on the device being used. For example, high-resolution versions of images are preferred when displaying at large sizes or on high-resolution devices such as retina displays.
You can specify high-resolution versions of image assets within the <content:encoded> markup by using the data-fl-original-src attribute:
<img src="disco-stu.jpg" width="400" height="300"
data-fl-original-src="disco-Size & Aspect Ratios
Images must be at least 400px in the smallest dimension; any smaller images are ignored. For best results, provide images in the highest resolution possible.
For best results, use images with one of the following aspect ratios:
- Landscape: 4:3, 16:9
- Portrait: 3:4, 9:16
- Square: 1:1
Images that do not use one of these aspect ratios may appear overly-cropped or be completely absent in layout.
Video
As with Images, Video assets are included within the article markup of <content:encoded>:
<figure>
<video width="900" height="900">
<source src="lisa-saxophone.mp4" type="video/mp4" />
</video>
<figcaption>Lisa plays the saxophone</figcaption>
</figure>YouTube and Vimeo videos can be embedded using the standard embedding code:
<figure>
<iframe src="http://www.youtube.com/Aspect Ratio
The following aspect ratios are recommended for video:
- Landscape: 4:3, 16:9
Geographic information
GeoRSS can be used to provide geodata for articles. This is done by adding a simple tag within the <item>:
<georss:point>45.256 -71.92</georss:point>Updates and Pubsubhubbub
PubSubHubbub is used to determine when new or updated content is available in the feed. If your content management system does not support PubSubHubbub, you can use services such as Superfeedr that can PubSubHubbub-enable your feeds.
Non-PubSubHubbub feeds will be polled intermittently, causing delays before content is shown to readers.
When updating the contents of an item, be sure to update the <pubDate> of that item. This is used as a signal indicating that an existing item has changed.
Best Practices
- Make sure your feed is valid RSS using the W3C Feed Validator
- Use PubSubHubbub to push updates to feeds
- Articles should be at least 700 characters or 150 words long
- Update the
<pubDate>when updating an item
- Images
- Include at least one image, at least 400px wide
- Keep your image captions short, one or two sentences at most
- Avoid images with non-standard aspect ratios
URLs
- Use clean and consistent URLs. Use the same URLs used by RSS when posting on Twitter, Facebook, or social networks.
- Specify Canonical Links via
<link rel=canonical>on all pages. - Include a link to your RSS feed on every page via
<link rel=alternate> - Some content management systems (such as WordPress) can generate an RSS feed per article. If supported, enable this option and include a reference via
<link rel=alternate>