Right now optimising a page for search engines exists in a somewhat uneasy détente between microdata, microformats and rel. There’s no “one way” or absolutely correct method to use when marking up pages for search engines: Google and the rest all support aspects of each system. What’s important to understand is how, where and why to use microformats.

The genesis of microformats

Microformats are a way of labelling shared pieces of data – names, addresses, phone numbers, and much more – in a common format between platforms. Microformats are produced by a grassroots web development movement: anyone can come forward and suggest a new microformat schema and have it adopted by the community. This “bottom up” approach is in stark contrast to the “top-down”, commandments-from-on-high approach Google and Microsoft are taking with microdata. That’s not to say that one is better than the other, only that the two systems have a very different way of approaching the problem of semantic data: microdata is brand new and highly centralized, so its documentation is both structured and sparse, like a cathedral under construction. In contrast, you’ll find information on microformats tends to be older, better-supported, and all over the place, like a Middle-Eastern bazaar.

There are a few more distinctions that are useful to understand between the two systems:

What microformats can you use today?

There are a number of microformats that are in popular use right now, not only on the web, but in applications you likely use every day:

• hCard: the single most-supported and widely-used microformat on the planet: allows the creation of electronic business cards. Used in every contact management tool (Outlook, Mail, etc) as a vcard file and on sites such as Twitter and Yahoo!Local.
• hCalendar: Again featured in most contact tools; allows the sharing of events and schedules. Used in Google Calendar, Facebook. last.fm and elsewhere.
• hResume: uses aspects of hCard (as microformats can be “compounded” within each other) to build online resumes. Used by LinkedIn and other sites.

There are many other microformats, structured around everything from recipes to book reviews; I’ve just focussed on the most common.

How are microformats written?

Approaching microformats as a web developer can be a little confusing, as they are written inside tags using standard class and id attributes with special values. It’s very important to understand that these classes and id’s do not relate to anything in your stylesheet (although there’s nothing preventing you from adding them as such); instead, they are used by search engines and applications to determine what content is on your web pages. The values used for the classes are precise and case-sensitive, and the tags in which they are used must be wrapped around appropriate pieces of content.

A simple example would be hcard data for your humble author:

<div class="vcard">
	<p class="fn n">
		<span class="given-name">Dudley</span>
		<span class="family-name">Storey</span>
	</p>
	<p>
		<span class="role">Writer</span>,
		<span class="role">Instructor</span>,
		<span class="role">Designer</span>
	</p>
	<p>
		<a class="email" href="mailto:dudley.storey@gmail.com">dudley.storey@gmail.com</a>
	</p>
	<p class="adr">
		<span class="locality">Calgary</span>,
		<abbr class="region" title="Alberta">AB</abbr> 
		<span class="postal-code">T2M 1N4</span>
		<span class="country-name">Canada</span>
	</p>
</div>

The container element that wraps around all this information – a <div>, in this case – provides the context that we are talking about a person. (The fact that the class is called vcard yet we refer to the microformat as hcard is confusing, I know: just roll with it).

The classes used around information inside this container should be fairly self-explanatory: fn stands for full-name; adr is address. Once this code is added, it simply becomes part of our web page, waiting for search engines to discover it.

Summary

The use of microformats (and microdata) allows search engines to avoid guesswork: by adding microformat information to a web page, we have made it extremely clear that we are talking about a person with a set of particular skills and contact information. In articles to follow you’ll find many more uses of both systems to make the web a richer, more accurate and more meaningful environment.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.