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.

Microformats Moo Stickers
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?

aref-jdey.jpg

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.

micro-diagram.gif

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:

1
2
3
4
<div class="geo">GEO: 
 <span class="latitude">37.386013</span>, 
 <span class="longitude">-122.082932</span>
</div>

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:

1
2
3
4
5
6
7
8
9
10
<div id="contact">
  <h2>Robert Smith</h2>
  <a href="mailto:robert.smith.mydomain.com">robert.smith.mydomain.com</a>
  <p>
    1234 Main St<br />
    Springfield, IL<br />
    60342<br />
    (123) 456 - 7890
  </p>
</div>

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

1
2
3
4
5
6
7
8
9
10
<div id="hcard-robert-smith" class="card">
  <h2 class="fn">Robert Smith</h2>
  <a class="email" href="mailto:robert.smith.mydomain.com">robert.smith.mydomain.com</a>
  <div class="adr">
    <span class="street-address">1234 Main St</span>
    <span class="locality">Springfield</span>, <span class="refion">IL</span>
    <span class="postal-code">60342</span>
    <span class="tel">(123) 456 - 7890</span>
  </div>
</div>

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.

Microformats pocket cheat sheet
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.

Download a free sample from my book, Design Fundamentals.

24 comments

  1. Steven,

    Great post. Microformats are something I have considered for a long time in my SEO efforts mostly because of the increased emphasis on page segmentation in the search engines. However, they are still so new that I think a lot of web developers and SEO’s are shying away from them because they don’t truly understand them. I think this post is a great primer for those who might be on the fence about using microformats or simply don’t understand that “What, How, and Why” as you put it.

    • Thanks Mike. I’ve only recently used microformats on some themes I’ve developed. Still need to add them here.

      They were confusing to me at first, but the more I looked into them the easier they are to understand. Pick one and read the spec on that microformat and find some examples. It really comes down to adding a few classes to describe your content. Odds are you have a class there already and just need to give it the same name as the standard.

      It’s still hard to know the seo value. When I was researching this post it came across that they probably do help when it comes to local seo, but beyond that not much yet.

      I’m with you on the page segmentation and it seems logical that search engines will make use of microformats or similar more in the future.

      Even if they don’t if microformats help your content spread across the web and in various applications they seem like a good idea to use. The only downside I can see is a little extra markup, but not so much to cause problems.

    • Thanks. I think microformats are one of those things many people shy away from, because they seem confusing at first. They’re easier to use than most think though.

      Glad to provide the links to the local search information.

    • True, though in many cases it’s markup we would likely add anyway. The difference is we’d now use a specific class name or id based on a standard instead of choosing our own name.

      And when the markup is completely new I think it’s still worth the tradeoff.

  2. Very nice to the point post. I think Microformats may be a determining factor for some areas and might make the difference if Google wants to dance. Local SEO is only one area that these might be uses as a deciding factor on who gets ranked in some categories or not. If that is the case some sites may disappear overnight and not know what hit them.

    • Thanks Adam. I’m not really sure how much of an effect microformats will have on ranking at the moment, but you have to think Google and the other engines will use any signal they can.

      Seems to make sense that any site providing this kind of additional information is only going to do better.

  3. Thanks for a well written informative article. I’m certainly considering adding hcard information to our site.

    It will be interesting to see whether microformats do become a factor in the major search engine rankings in the future.

    • I can’t say I currently have a lot of microformats in place now, though the redesign I’m working on will include some.

      I don’t know if microformats or similar will be a major ranking factor. I think it’ll be more a way to help search engines and others what your content is about making it more useful in general.

      Where I think it will come into play with search engines that they’ll be better able to understand your content and rank it for more appropriate queries.

  4. Great post Steven! This gives me a good, general understanding of microformats. It’s similar to THEAD in that it helps Search Engines better understand content and page layout. Thanks!

  5. Thanks for the information, very great Post.
    I did not know what microformats are but now I do. Thats a very good work, thanks.

Leave a Reply

Your email address will not be published.

css.php