How to Optimize your WordPress Blog for Feedly

| By
Optimize your WordPress Blog for Feedly by adding a logo, cover picture & related posts, changing the links color and lots more to your feed.

Have you wondered how sites like The Verge and other large publishers have added custom header, custom link color, related posts and many more to their feeds?

Feedly Optimization for Publishers
The Verge feed with Custom link color and Related posts.

There is an optimization guide in Feedly blog that tells how to do these tweaks even for any small independent publishers. Having said that, some features like Google Analytics Integration and Ad integration are only available to those who are in the Publisher Kit beta program.

General tips for Optimizing Blog’s feed

Before going into optimization tips specific to Feedly, we will discuss the general tweaks you need to do to your feeds.

1. Add RSS Auto-discovery

When you enable this feature, it makes easier for your readers and browsers to find your feeds. To do this, you need to edit the <head> section present in header.php located in your theme’s folder.

<link rel="alternate" type="application/rss+xml" title="Feed title" href="Feed URL" />

2. Always use clean HTML markup

Focus on the structure of your content. Make sure to use heading tags properly based on hierarchy, alt tags for images and always specify the width & height for images.

Tips for Optimizing WordPress Blog’s feed for Feedly

Here are some of the tips for optimizing your RSS or ATOM WordPress Blog’s feed for Feedly. This tutorial uses the default RSS 2.0 feed for demonstration. Before you start adding extra features, you need to edit your functions.php present in your theme’s folder by adding the following namespace.

add_filter( 'rss2_ns', 'feedly' );
function feedly() {
 echo 'xmlns:webfeeds="http://webfeeds.org/rss/1.0"';
}

1. Add Blog icon and Cover image

Blog icon and cover image represent your Blog identity when readers search for your Blog in Feedly. Newly started Blogs won’t have them and Feedly will display it with some plain background color in cover image & starting letter (like “U” for Utilitylog) in the icon.

To change them, you need to edit functions.php by adding the following lines to edit your feed’s head.

add_filter( 'rss2_head', 'feedly_head' );
function feedly_head() {
 echo '<webfeeds:cover image="Cover image link" />';
 echo '<webfeeds:icon>Logo link</webfeeds:icon>';
}

2. Specify Featured image for your posts

Feedly will pick the first image in your content if it has height & width greater than 450 px, if not it will find the other large image in your content. If you had enabled partial feed, it will search the content to find Facebook Open Graph tags or Twitter card meta data and enable it as the Featured image if it finds one.

If you wish to specify custom Featured image, you can do so by adding webfeedsFeaturedVisual class name to your image.

<img src="Image link" class="webfeedsFeaturedVisual">

3. Add an SVG-formatted logo to all your posts

You can also add your Blog’s logo to all of your posts by specifying an SVG-formatted logo. To do so, add the <webfeeds:logo> markup to functions.php and the recommended height of logo is 30px.

add_filter( 'rss2_head', 'feedly_head' );
function feedly_head() {
echo '<webfeeds:logo>SVG logo link</webfeeds:logo>';
}

4. Change links color

You can change your feed’s links color to reflect your Brand identity. To do so, add the <webfeeds:accentColor> markup to functions.php and make sure to add 6-digit hexa-decimal RGB value of your preferred color without # (e.g. 000000 for black color).

add_filter( 'rss2_head', 'feedly_head' );
function feedly_head() {
echo '<webfeeds:accentColor>Hexadecimal color equivalent</webfeeds:accentColor>';
}

5. Display Related posts

This is one of the recommended feature to make your readers stay longer reading your posts. It uses the Feedly cloud to pull content up to three years old based on the topic and displays three stories. To do so, you need to edit functions.php to add webfeeds:related markup.

add_filter( 'rss2_head', 'feedly_head' );
function feedly_head() {
echo '<webfeeds:related layout=”card” target=”browser”/>';
}

After you finished doing your preferred tweaks, you need to check the validation of your feed.

Validate your RSS feed

Go to W3C Feed Validation Service and enter your feed’s URL in the “Validate by URI” Address field. Then, click “Check”.

If you get a Congratulations message, then you’re good to go. However, you may get some recommendations message such as use of unknown namespace, etc., which you may skip.

Extra tip – Add a Feedly button to your Blog

Feedly provides many Follow on Feedly buttons of various styles and sizes. Just select the button you want, then enter the feed URL and copy the HTML snippet. Paste it where you want to display on your Blog.

2 comments:

Leave a comment

Please post relevant comments to the topic discussed above! Spammy & irrelevant comments will be deleted. Happy commenting :)