Programming

SEO Strategies: Microformats in Web Development

    Kristen Holden
    Share

    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="https://www.sitepoint.com/seo1.jpg" class="photo">
  <div class="item">
    <a class="fn url" href="https://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="https://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!