SEO Strategies: Microformats in Web Development

Kristen Holden

In May 2009, the people at Google started including rich snippets of information in their SERPS. That’s 17 months’ worth of development time, and to be honest, it seems as though most websites still aren’t on the bandwagon. That’s a shame, as the use of rich snippets can greatly improve the chances of somebody clicking on your site’s listing when they conduct a search.

At the moment, rich snippets are pretty simple. If you search for a movie, for example, you’ll likely see that certain search results feature review information beneath them, right there in the results page. This is possible because those sites’ owners have marked up the review information on their pages using a specific, predefined format called a microformat. There’s actually a whole variety of elements that can be be tagged in a microformat. Other items that can be tagged in a more semantic manner to better improve the way in which search engines read and index your site are:

  • hCard: This is used to tag people, places, businesses and organizations.
  • hCalendar: This is used to tag events.
  • hReview: This is pretty self-explanatory — it’s used to tag reviews that then show up as star ratings in the SERP.

None of these microformats are very complex; they simply rely on a few conventions with respect to the classes applied to certain elements in the markup, and the ways in which those elements are nested. However, let’s go through an example implementation of each one and see what the code looks like.

To create this sample markup, I used a set of microformat creators that are available on microformats.org to simplify the process.

hCard

Okay, so we know that the hCard format is used for people, places, and organisations. The fields generally associated with the hCard format are:

  • Given Name
  • Middle Name
  • Family Name
  • Organization
  • Street
  • City
  • State
  • Post Code
  • Country
  • Phone
  • Email
  • URL
  • Photo URL
  • AIM Screenname
  • YIM Screenname
  • Jabber Screenname
  • Tags

An example snippet of markup incorporating these fields would be:

<div id="hcard-Kristen-Lee-Holden" class="vcard">
  <img style="float:left; margin-right:4px"
       src="author.jpg"
       alt="photo of Kristen"
       class="photo"/>
  <span class="fn n">
    <span class="given-name">Kristen</span>
    <span class="additional-name">Lee</span>
    <span class="family-name">Holden</span>
  </span>
  <div class="org">Sitepoint Pty. Ltd.</div>
  <a class="email" href="mailto:kristen.holden@sitepoint.com">kristen.holden@sitepoint.com</a>
  <div class="adr">
    <div class="street-address">48 Cambridge Street</div>
    <span class="locality">Melbourne</span>,
    <span class="region">Victoria</span>,
    <span class="postal-code">3056</span>
    <span class="country-name">Australia</span>
  </div>
  <div class="tel">90908200</div>
  <div class="tags">
    <a href="http://kitchen.technorati.com/contacts/tag/seo guru">seo guru</a>
    <a href="http://kitchen.technorati.com/contacts/tag/marketing dude">marketing dude</a>
  </div>
</div>

Fairly simple structure and implementation, isn’t it? Remember that the search engine spider relies on those class names to decipher the meaning of the content, so they’ll need to be exact. But once you’ve modified your CMS to output properly formatted markup, your work is done. And this is exactly why it’s hard to see why so many websites still aren’t using this microformat to properly tag information.

hReview

Next up is the hReview format. This is what I consider the most useful microformat currently in use from the perspective of an SEO expert. Having a positive set of reviews and a star rating showing up on a search result greatly improves trust and click-through ratio from your visitors.

The fields that are used within the hReview format are:

  • Name
  • URL
  • Photo URL
  • Type (Product, Business, Event, Place, Person, Website, URL)
  • Rating
  • Summary
  • Description
  • Review Date
  • Reviewer

The simplest way to show you how this looks when implemented as code is to show you an example. So here’s one I put together based on a fictional review of the soon-to-be-released SitePoint SEO Business Guide:

<div class="hreview" id="hreview-The-definitive-business-guide-for-seo-professionals-">
  <h2 class="summary">The definitive business guide for SEO professionals</h2>
  <abbr class="dtreviewed" title="2008-10-05T08:01+10:00">Oct 5, 2008</abbr>
  by <span class="reviewer vcard"><span class="fn">Joe Blogs</span></span>

  <span class="type" style="display: none; ">product</span>
  <img alt="photo of 'SEO Business Guide'" src="http://www.sitepoint.com/seo1.jpg" class="photo">
  <div class="item">
    <a class="fn url" href="http://www.sitepoint.com/seo1">SEO Business Guide</a>
  </div>
  <blockquote class="description">
  <p><abbr title="5" class="rating">★★★★★</abbr>
This book was amazing. It helped me to learn the basics of SEO and then how to apply them in a practical and easy to read ways.</p>
  </blockquote>
  <span class="version"style="display: none; ">0.3</span>
</div>

hCalendar

Lastly, let’s go through a quick example of the fields contained within the hCalendar format. hCalendar is very much like the previous two formats; its fields are:

  • Summary
  • Location
  • URL
  • Start Date
  • End Date
  • Time Zone (In GMT)
  • Description
  • Tags

Here’s what a hCalendar implementation would look like when used on a hypothetical launch event for the new SEO Business Guide:

<div class="vevent" id="hcalendar-SEO1-Book-Launch">
  <a class="url" href="http://www.sitepoint.com/seo1">
  <abbr class="dtstart" title="2010-11-05T09:00+10:0000">November 5th 9am</abbr>,
  <abbr class="dtend" title="2010-11-06T09:00+10:00">9am 2010</abbr> :
  <span class="summary">SEO1 Book Launch</span>
  at <span class="location">Collingwood, Melbourne</span>
  </a>
  <div class="description">
  The official launch of the SEO business guide from sitepoint!
  </div>
  <div class="tags">Tags: 
    <a rel="tag" href="http://eventful.com/events/tags/seo%20book">seo book</a>
    <a rel="tag" href="http://eventful.com/events/tags/seo%20business%20guide">seo business guide</a>      
    <a rel="tag" href="http://eventful.com/events/tags/awesome%20seo%20book">awesome seo book</a>
  </div>
</div>

This information would obviously be best pulled dynamically from within your site’s database.

For more information on the microformats I’ve covered in this post, you can’t do better than to get it from the horse’s mouth at microfomats.org:

http://microformats.org/wiki/hreview3
http://microformats.org/wiki/hcard
http://microformats.org/wiki/hcalendar

You can also read Google’s launch post here to see the official word on these new rich snippets.

So in summary for all you developers out there, implementing these types of formats for your websites content is easy. It’s almost no extra work on top of your everyday formatting required for HTML output. Structuring websites to use microformats today will give you a distinct advantage for various aspects of local SEO in the future.

Maps, calendars, and other more integrated search results are already pulling these formats. In fact, only yesterday I read a great blog post from SEO by the Sea dealing with Google’s latest patent filing for automatically inserting GoogleMaps onto websites. This will make life much easier for mobile users especially. And with companies such as Facebook, Yelp, Digg, and Twitter supporting various microformats, there is a very good chance this will see their usefulness increase even further over time.

Perhaps more importantly, this is a pain-free way to give the SEO people in your organization some love with a fairly minimal investment in development time!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • DEVlady

    Lisa,

    Thanks a great article. As you mentioned, microformats can greatly increase the CTR on SERPs. Here’s Google Rich Snippet tool for testing implementation of microformats on your site: http://www.google.com/webmasters/tools/richsnippets

    • Louis Simoneau

      @DEVlady: oops, this article was actually written by Kristen Holden, our resident SEO expert, but due to some WordPress shenanigans it came up with Lisa as the author. So any praise you have should be directed at Kristen!

      Sorry for the mixup!

  • Jimmy Ng

    Awesome article.

    Currently volunteering for http://www.johnhatton.com.au for the upcoming NSW state election. The webpage is old old… and Google isn’t indexing it.

    I’ve already got a wordpress version up and running on my server, but they’re only interested in that once Google has indexed this one.

    Well, it looks like a lot of work

  • Justen

    I’ve actually met a lot of resistance to the idea. “It’s not standard”, “nobody uses it”, “I don’t see the point”, “waste of time”. Worse yet, with hAtom, microsoft has needlessly muddied the pond with their competing webslice format which I’ve never got to play side-by-side correctly.

    • Louis Simoneau

      While a lot of those arguments could be leveraged against microformats in the past, now that Google is actively using them to display richer information in search results, there’s huge potential benefit to using microformats, as Kristen states in the post.

    • http://www.brothercake.com/ James Edwards

      I never got any sense that webslices are intended to compete with microformats – where do you get that from?

      It’s true that they have a similar format while not adhering to any specific microformat; it’s also true that they abuse attribute semantics for their data hooks (so in that sense they have something in common with microformats!)

      All the same, my impression is that webslices and microformats are intended for different consumers.

      I have a little experience with webslices — perhaps if you said what problems you’ve had, I might be able to help?

  • john

    Yahoo in their Search Monkey platform was way ahead of Google on micro formats in the search results. The first place I learned about micro formats was from the Yahoo Developer Network.

    I think micro formats are genius. I try to incorporate hcard in my own site, and even tried to use microformats on our many products. Microformats, for example, would allow Google to add my products to Google products instead of me having to send them an .rss feed of our products. RSS is a cheap simple solution to in many cases replace feeds. I only hope to see them take off.

  • http://www.yacare.fr McBenny

    I’m implementing hCard for about 2 years now in the sites I develop for my clients but they barely don’t really know it because they can’t really understand it. I think it has to be done anyway, that’s the way to the future…
    To check my work I use a Firefox extension called “Operator”. It shows the microformats on the page and can catch data as well to show wether things are in place or not.