Home > Software, Web 3.0 > Web 3.0 - How to Put Semantic Tags in your Blog

Web 3.0 - How to Put Semantic Tags in your Blog

March 15th, 2008

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.

Software, Web 3.0 , , , ,

  1. March 19th, 2008 at 17:43 | #1

    Great post - at last a practical recipe for the semantic web.

    I’ll be updating my templates to reflect these changes soon AND hunting down any other microformats that might fit. You’ve inspired me.

  2. March 20th, 2008 at 16:06 | #2

    Great practical example for getting started with the semantic web. Thanks for posting — will keep an eye out for more!

  3. March 22nd, 2008 at 09:42 | #3

    Is this really “semantic” enough? I suppose that separating blog titles from blog posts might provide some insight into the meaning of a page but surely this is already achieved (by Google) by looking at titles and headlines compared with the rest of the text on a page?

    Or am I missing something?

  4. March 22nd, 2008 at 13:01 | #4

    @Jonathan:

    While I was working out the hAtom tags I thought something similar. Ordinary RSS and atom feeds provide a similar level of seperation.

    But when you think of hAtom as a small part of the microformat whole, it may lead better data search and retrieval.

    To be honest, I tried it because Yahoo announced their support for it, and I like to tinker with new stuff!

    Cheers

    Stuart (BeardyGeek)

  5. March 23rd, 2008 at 01:30 | #5

    Wow … this is interesting. I told you you always put some weird interesting stuff that I don’t understand but really wanna get into.

    I’m gonna be reading more on this

  6. March 24th, 2008 at 22:09 | #6

    Hi, GB!

    I think more of this will be included in the workings of WordPress, so we non-techies-in-deep-technical-waters don’t have to think about it as much.
    For example, XFN microformat is already part of WordPress; the WP themes from Plaintxt.org all use the hAtom microformats and more; and the highly skinable Sandbox theme is slated to be included in the WP Core as of version 2.6.

    In addition there, there are a bunch of plugins that attempt to make using microformats easy for WP bloggers.

  1. March 23rd, 2008 at 13:32 | #1
  2. May 11th, 2008 at 12:52 | #2
  3. June 3rd, 2008 at 14:36 | #3
  4. June 3rd, 2008 at 15:06 | #4
Free the web