demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Introduction to Microformats For Web Pages

seo / microformats

Estimated reading time: 3 minutes, 36 seconds

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:

The differing approaches of microdata and microformats
microformatsmicrodata
Works with any version of HTMLOnly valid under HTML5
Pragmatic: built to address specific problems and needs Universal: attempts to be an ultimate descriptor of almost every piece of data on the web
Designed for humans first, machines secondDesigned for search engines first
Open: anyone can contribute and form a new microformat data-sharing format that works in the spec Closed: advances and changes are made by Google and Microsoft only
Tends to require extra markup, especially <span> and <div> tags Often works within existing markup; few extra tags required
SimpleSomewhat complex

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.