Microformatting This Blog

I have been long reading about microformats and even using them in some projects. But somehow integrating them with this blog has taken this long. This blog is microformatted now, specifically hCard and hAtom. I am still reading through the details, so it is quite possible that some things are left out. Using validation tools might be a good starting point.

Microformats specification usually involves using specific HTML elements or CSS class names so that the machines can identify the type of specific information. This blog uses WordPress, so all the modifications have only been in my theme code. Most of the times these changes will not cause any visual differences, unless you style them in your stylesheets. The bigger difference is in the markup that is created.

hCard

hCard is used to represent people, companies, organizations and structure the information in a machine-readable way. I used it to provide my contact information on this blog. I used the hCard creator for the following markup:

It is important here to start CSS class of the first element is vcard. I decided to limit my information using these properties, but there are many more properties that you can choose to add to your hCard.

You can insert this markup wherever you want to include your contact information.

hAtom

hAtom is primarily useful for content syndication, which means that it can apply to any site that involves publications. One of the basic benefits of hAtom is that it enables subscription directly to the blog, without any separate markup for feeds. Which means that feeds can be produced irrespective of the blogging engine being used.

The schema is well explained, and all the elements are already included in most of templates, though with different class names. All you have to do is use the right ones and you are almost done. I did the following changes:

• My main content area has a CSS ID primary, I just added hfeed to that.
• A blog entry usually has CSS class name post in WordPress themes. I added the CSS class name hentry to it.
• Added the CSS class name entry-title for the post title.
• Marked the post content with the CSS class name entry-content.
• Used CSS class name author inside a vcard element, using

  <span class="vcard author">
    <a class="url fn" title="About" href="/about/author/">Abhijit Nadgouda</a>
  </span>
  

  to add my name for every post.

• Used the CSS class name published for the published date of the post. There is some more work involved in date. hAtom follows the Datetime design pattern, for which you can use the following code.

  <abbr class="published date"
    title="<?php the_time('Y-m-d'); ?>T<?php the_time('h:m:s'); ?>">
      <?php the_time('M j, Y') ?>
  </abbr>
  

  This is a standard datetime abbreviation format.

I skipped the element updated, as the published date usually provides for it. This is a bit unusual that you can do away with updated, which is marked as a required element, by using published which is an optional element. I do not see much use for this blog, but it can be extremely useful in other cases.

I did the following changes wherever blog posts were being displayed. The usual names of these template files are:

• single.php
• index.php
• archives.php

Your theme might additionally have search.php and category.php.

WordPress does rest of the stuff for you already. It already supports XFN, using which you can represent your relationships to other people. It also adds rel="bookmark" to post links and rel="tag" for the categories. You can open the source code of this page and see the changes for yourself. Now it might make sense to use these class names directly, instead of using your own custom CSS class names in the theme.

I will be making some more changes, so if you find something unusual or something invalid do ping me about it.