SEO Strategies: Microformats in Web Development

Share this article

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!

Frequently Asked Questions (FAQs) about Microformats in Web Development

What are the benefits of using microformats in web development?

Microformats provide a set of agreed-upon standards for data that can be used across different websites. This makes it easier for search engines and other web services to understand and use the data. They can improve SEO by making your website more visible and understandable to search engines. They also enhance the user experience by providing more detailed information in search results, such as reviews, ratings, and contact information.

How do microformats affect SEO?

Microformats can significantly impact SEO by providing search engines with more detailed information about your website. This can lead to richer search results, which can increase click-through rates and drive more traffic to your site. They can also improve your site’s ranking by making it easier for search engines to understand your content.

How can I implement microformats in my web development process?

Implementing microformats involves adding specific HTML tags to your website’s code. These tags provide additional information about the content on your site, such as contact information, reviews, and events. There are different types of microformats for different types of data, so you’ll need to choose the ones that are most relevant to your site.

What are some examples of microformats?

Some common examples of microformats include hCard for contact information, hReview for reviews, and hEvent for events. Each of these microformats has a specific set of HTML tags that you can use to provide additional information about your content.

Are there any downsides to using microformats?

While microformats offer many benefits, they do require additional work to implement. You’ll need to add specific HTML tags to your website’s code, which can be time-consuming. However, the benefits of improved SEO and user experience often outweigh the extra effort.

How do microformats differ from other SEO techniques?

Unlike other SEO techniques, microformats focus on providing additional information about your content, rather than optimizing your content for specific keywords. This can make your website more visible and understandable to search engines, leading to richer search results and improved SEO.

Can I use microformats with other web development technologies?

Yes, microformats can be used with a variety of web development technologies, including HTML, CSS, and JavaScript. They are compatible with most modern web browsers and can be used alongside other SEO techniques.

How can I learn more about microformats?

There are many resources available online to learn more about microformats, including the official microformats website. You can also find tutorials and guides on web development websites and forums.

What is the future of microformats in web development?

As the web continues to evolve, the use of microformats is likely to become more widespread. They offer a way to provide more detailed information about your content, improving SEO and user experience. As more websites start to use microformats, they are likely to become a standard part of web development.

Are there any alternatives to microformats?

While microformats are a popular choice for providing additional information about your content, there are other options available. These include RDFa and JSON-LD, which offer similar functionality but use different syntax. However, microformats are often the simplest and most straightforward option.

Kristen HoldenKristen Holden
View Author

Kristen and his team at Marketing Partners manage the digital businesses and marketing for a select group of innovative and disruptive startups with a focus on long-term domination of their markets, not quick and nasty wins

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week