Optimizing Your RSS Feed for Feedly

Optimizing Your RSS Feed for Feedly

Feedly, the popular news aggregator, offers a few ways to tweak your RSS feeds so that it can pick things up like your logo, a cover photo and featured images more easily. This post summarize some of these optimization options, but you can also read this article from Feedly for even more tips.

Here's a snippet showing how I tweaked my feed.xml file for Alligator.io. The highlighted portions are the ones to pay attention to:

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:content="http://purl.org/rss/1.0/modules/content/"
     xmlns:webfeeds="http://webfeeds.org/rss/1.0">
  <channel>
    <title>{{ site.title | xml_escape }}</title>
    <description>
      {{ site.description | xml_escape }}
    </description>
    <webfeeds:cover image="https://url/to/cover.jpg" />
    <webfeeds:icon>https://url/to/logo.svg</webfeeds:icon>
    <webfeeds:logo>https://url/to/logo.svg</webfeeds:logo>
    <webfeeds:accentColor>211533</webfeeds:accentColor>
    <webfeeds:related layout="card" target="browser"/>

Breakdown

xmlns:webfeeds

First we define the webfeeds namespace needed for some of the special tags. From my experience, your feed will probably not validate afterwards because webfeeds is not a recognized namespace, but it seems to still be working properly.

Title & Description

Alligator.io is built with Jekyll, so here I used some liquid tags to generate the title and description automatically based on my _config.yml file, but you could also just add a title and description for your feed manually.

For Jekyll, notice the use of the xml_escape filter, to ensure that the text is formatted properly for xml.

webfeeds:cover & webfeeds:icon

Define a cover photo and an icon to be shown with your feed when users browse through different feeds. Notice that Feedly supports SVG files.

webfeeds:logo & webfeeds:accentColor

Define an SVG logo and an accent color in hex format to be used with each post.

webfeeds:related

This will show related posts from your site inside the Feedly reader.

Final Tweak

Inside your posts, you can add the webfeedsFeaturedVisual class name to the image you want to use as the featured image in Feedly. If you don’t specify one, Feedly follows a set of rules to use either a first image that’s large enough or the image you’re using for Twitter cards or Facebook open graph.

P.S.: Follow Alligator.io on Feedly here 😎

✖ Clear

🕵 Search Results

🔎 Searching...