Microformats: What, How, and Why

You’ve heard the term, but do you know what microformats are? Do you know how to use them or even why you should?

Microformats are relatively easy to use. In fact if you can code a web page you already have the skills. The goal of this post is to introduce you to the what, how, and why of microformats and point you in the right direction so you can begin using them where appropriate.


photo credit: briansuda

What Are Microformats?

Microformats are a way convey metadata, extra information about your content, to make it easier for others to understand and reuse. They are a set of standards for marking up different types of information that provides a way to consistently structure that information.

For example most websites include some kind of contact information, maybe an address, zip code, and phone number. It’s easy for you and I to recognize that contact information when we see it, but what about machines? Is every string of 5 digits a zip code? Is every set of 10 digits a phone number?

By using semantic markup around a phone number or zip code we can make it easy for that data to be recognized for what it is and allow applications to easily process the information for reuse.

Why Use Microformats?

Before getting to the how, let’s talk about the why. A key point in why to use microformats is in the last sentence above. Because they make it easier to share and reuse information across different applications and websites.

Consider contact information again. Say you come across contact information on a website that you want to add to your email client. How would you add it?

You’d either type the information into the address book of your email client or copy and paste the information. Not hard, but wouldn’t it be easier if the email client understood what part of the web page was the contact information and could add it automatically for you with a click or two?

The image above shows the website for Aref JDEY. Microformats are used for the contact information and the menu overlaid on top of the site is from the operator extension for Firefox.

Imagine your billing application, IM client, general address book, and calendar application also understood the information and could easily add the data. How about finding the location easily in a mapping service with a click? How about making it easier to share social profiles across sites?

Ultimately microformats allow more interaction between your website, other websites, and different applications.

While not specifically a microformat think about RSS feeds. I’m sure you subscribe to some blogs (hopefully this one) in a feed reader. Your feed reader pulls in the content of that blog without you having to visit.

It’s able to do that because the blog publishes a feed marked up in a standard way and your feed reader understands that standard and knows what part of the feed is the blog title, what part is the content, etc. RSS feeds certainly make it easier to publish, share and consume content.

Microformats offer the same idea to other types of content, and one microformat, hAtom, does aim to be a standard for syndicated content.

So how do you actually use microformats? How do you add them to your site.

How to Use Microformats?

I mentioned above that if you can code a web page you have the skills to use microformats. Adding a microformat to your page is no more than using agreed upon classes in your markup.

Take the simple geo microformat, which exists for marking up geographical coordinates. To identify any location all you need are coordinates for latitude and longitude. A simple geo microformat might look like this:

{code type=html}

{/code}

We have a div with a class of geo letting anyone interested know the contents of the div are the geo microformat. Inside the div are two spans representing latitude and longitude, each with a class of the same name. Any application that can read the geo microformat can now easily grab the information and reuse it.

Contact information has come up a few times in this post so let’s look at the hCard microformat, which exists to mark up your contact information.

Say you’ve added some contact information to your site and it looks something like the following:

{code type=html}

{/code}

We can turn the above into an hCard by adding a little more markup to it so it looks like:

{code type=html}

{/code}

The two blocks of code above are mostly similar. We’ve changed the id of main wrapping div to more specifically identify it as contact information for a Rober Smith and added a class of vcard. The vcard class is the root class to identify an hCard.

If you look at the rest of the code it should be mostly self-explanatory what each class is doing. email for an email address, tel for a telephone number. The one that might not be so obvious is “fn” which stands for full name.

The hCard does add some extra markup around our contact information, but hardly a lot and if the tradeoff is allowing your visitors to add your contact information to their address book with a click or two isn’t the extra markup worth it?

You can even make it easier to add the markup by using a tool like the hCard Creator. Simply fill in whatever contact information you want to include and the tool creates the markup for you.

Implications of Microformats in SEO and Marketing

One type of machine that might be reading microformats are search engines. Will microformats help your pages rank better? Will they hurt? Will they make any difference at all?

Part of building a search engine friendly site is helping search engines understand your content. Microformats would then seem like a good idea since they aid in having your content understood for what it is.

At the moment there’s no clear evidence that using microformats will help your pages in search results, however Microsoft, Yahoo, and Google have all filed patents about various ways they can segment parts of web pages and separate content from boilerplate code as a way to determine where links are located.

Local search is naturally concerned with your location and some will advise that using hCards can help your content rank better in local search as they are possibly a local search ranking factor.

Google recently introduced the idea of rich snippets into search results. Rich snippets make use of microformats to add additional details about your site in the snippet below your link in search results. Reviews about your products or contact information for ordering might be included directly on the search results page.

Some would say rich snippets aren’t such a good thing, however. The more details you let Google present on their site, the less need people have to visit your site.

Overall I think we’re better off letting our content travel across the web and think rich snippets will help us more than they will hurt us.

photo credit: adactio

Summary

Should you use microformats on your site? That’s really up to you. They aren’t necessary, but neither is publishing a feed and I think most of us who publish a feed would agree there are many benefits to allowing applications to easily understand and reuse your content.

Microformats are relatively easy to implement, though some of the specs can be a little difficult to understand. In general if you can add a class to an html element you can add microformats to your site.

Only a few like hCard are considered stable and in widespread use at the moment, but the more they are added to web pages, the more applications will be built to take advantage of them.

The worst case scenario is you’ll have added some semantic hooks to your html to more easily style your web pages. The best case scenario is more people will be able to access and interact with your content. Seems like a good idea to me.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.