Stylize Your RSS Feed

Learn How to Make Your RSS Feed Look Stylish

If you have decided to provide an RSS feed on your website, you might want to consider making it look little bit more beautiful. Majority of RSS publishers use static description that looks something like this:

That’s how the RSS feed message looks like on Bloglines (web based RSS reader) account. You can see a simple description and a link that leads to a website.

But you can actually make your RSS feed look stylish using a couple of enhancements available.

Just like many webmasters provide HTML newsletters to their visitors instead of text based ones, you can also design your RSS feed to look more appealing. The reason for doing this is that it can give you better reading and response rate.

A proven fact is that HTML email newsletters outperform text newsletters significantly, because it looks better and is more attractive to the visitors’ eyes. RSS feed should be no different. If you want to catch your visitors’ attention before they even clicked on a link and went to your page, you should consider stylizing the look and feel of your RSS feed.

Adding Images to Your RSS Feed

Here’s a simple way of adding an image to your RSS feed. There’s a special <image> tag that you can use. It is the element of a <channel>. It means that you can use the image in <channel> tag, but not in the <item> tag. It has 3 required elements: URL, title and link.

<image>
<title>Image Title</title>
<url>http://yourdomain.com/yourimage.gif </url>
<link>http://yourdomain.com </link>
</image>

Title is a title of the image. You can’t see it. When your feed is rendered into HTML, the title of an image acts like the ALT tag.

URL is the URL of an image. It specifies the exact location of your image that you want to include into the RSS feed. Don’t make the URL relative (/image.gif). Instead always use absolute URL’s (http://domain.com/image.gif).

Link is the hyperlink of an image. When the image is displayed, it becomes a link and your readers can click on the image to go the specified location.

Image element also has 2 optional elements. Width and height. You can specify the exact size of an image.

So your whole XML file (RSS feed) will look like this:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="0.91">
<channel>
<title>Free Pay Per Click Tips</title>
<link>http://freemarketingzone.com</link>
<description>Internet Marketing Tips</description>
<image>
<title>Image Title</title>
<url>http://freemarketingzone.com/paw.gif </url>
<link>http://freemarketingzone.com</link>
</image>
<item>
<title>Learn Email Marketing Strategies</title>
<link>http://freemarketingzone.com/email-marketing/</link>
<description>A guide to email marketing. Offers email promotion tips and more.</description>
</item>
</channel>
</rss>

And that code in your RSS file will render into:

Optional RSS Channel Elements

Besides <image> tag, there are more useful elements that you can use to enhance your RSS feed. Here are some more tags.

  • language – The language the channel is written in.
  • copyright – Copyright notice for content in the channel.
  • webmaster – Email address of the webmaster.
  • lastBuildDate – The last time the channel was updated.
  • ttl – Sets the time for a channel to live.

These are just a few of channel elements that are used in an RSS feed on your website. You can find much more descriptive information about channel elements on RSS specifications page.

CDATA for Using HTML in Your RSS Feed

Now this one is probably the most useful for “dressing” your RSS feed. When people read RSS news via their feed readers, the information from an XML language are parsed into HTML language that looks like simple text. However, if you use CDATA construct, all the XML elements in RSS feed will be parsed except the one that is included in the CDATA section.

CDATA can include HTML in it. So when all the code is parsed, HTML will stay intact. So CDATA is even better for enhancing your feed, because you can include pictures in it and you don’t have to deal with XML tags. Simply copy the HTML you want to include and paste it between CDATA tags.

CDATA opening and closing tags are included in the <description> tag of an RSS feed. CDATA is the element of a channel of your feed. Therefore, it can be included in your items’ descriptions.

The opening tag of CDATA looks like this:

<![CDATA[

The closing tag looks like this:

]]>

You have to put the following opening and closing tags into the description tag of your <item> element. So it looks like this:

<item>
<title>CDATA RSS</title>
<link>http://freemarketingzone.com</link>
<description>
<![CDATA[
<h2>Cdata Enhanced RSS Feed</h2>
<p>You can include any information you want. From images to flash videos.</p>
]]>
</description>
</item>

Of course, you can have more items, as much as 15 on your RSS feed. So every item’s description can include CDATA in it. Now look at the picture below and see how your feed looks like when you add little HTML:

It looks much better than a static feed, right. HTML really enhances the look of your feed. If you’d like to include any page inside the RSS feed, you copy the source code of your HTML file and paste it into CDATA element.

But you can include not only HTML inside. You can put almost anything inside your RSS feed. MP3 files for people to download, flash presentations, video greetings that became very popular recently. Possibilities are almost unlimited.

Conclusion

Enhancing your feed is great. However, you have to be careful when you deal with CDATA element and HTML. Actually HTML web page looks slightly different on your feed. You might want to check for yourself before posting any data to your feed. Problems may occur if you decide to stylize the title of your feed. Use CDATA only where it’s appropriate, in the description tag.

If you decide to make your RSS feed more stylish, do so, but be very careful and don’t corrupt your RSS feed. Having a great looking website feed can definitely boost your readership and the response rates of your feed.

Comments (0)
Add Comment