Beardy Geek – Web Development Blog

A blog about web development – giving tips and tutorials about all aspects of web dev.


Beardy Geek – Web Development Blog

Web 3.0 – How to put Semantic Tags in your Blog

I read the other day how Yahoo was going to start supporting semantic web standards.

The semantic web is something that is often associated with Web 3.0 (if that’s what you want to call it!), and will allow greater data exchange, better and more targeted search, and generally open things up for a super mash-up. Take a look at Wikipedia’s definition of Web 3.0 for more info.

One of the formats that Yahoo will initially support is hAtom, which is a microformat especially for blog entries.

So, I thought I’d take a look at it and try and implement it in the BeardyGeek blog.

First Steps

To add an hAtom feed to your blog, all you need to do is add some class names to what are probably existing divs or spans in your blog template.

For example, if you have a div around your entire content that looks like this:

<div class=”content”>

you just need to add an extra class tag called hfeed:

<div class=”content hfeed”>

To have more than one class, just separate them with a space.

There are 3 more main tags that you need.

  • hentry – the outer tag for each blog post
  • entry-title – the tag for the post title
  • entry-content – the tag for your post content

And that’s it. Easy as pie!

How I changed my WordPress Theme

Ok, here’s what I changed in my theme.

Header page – At or near the bottom is a div tag – <div class=”content”> – I changed that to <div class=”content hfeed”>.

Single Post – I added the hentry tag to <div class=”post”> so it now read <div class=”post hentry”>. I then added entry-title to the <h2 class=”post-title”> so it read <h2 class=”post-title entry-title”>. And I also add entry-content to <div class=”postentry”> so it read <div class=”postentry entry-content”>.

Main index template – pretty much the same as the single post page, as the tags are all the same.

Testing

To test the feed, I downloaded Greasemonkey plugin for Firefox. I then downloaded the RSS Panel X script for Greasemonkey, which allows you to view a page’s feeds in a small JavaScript window. This is ideal for testing in this case as it supports hAtom.

Once you have these installed and running (tip: install the plugin first, then the script installs automatically), just load up your blog page. If all went according to plan, you should see your hAtom feed along with your RSS feed.

In fact, you can test it out here, as I have my hAtom feed up and running!

Good luck, let me know how you get on.

FacebookTwitterGoogle+LinkedInRedditStumbleUponShare