Adding Microformats to Viget.com

Doug Avery, Former Senior Developer

Article Category: #Design & Content

Posted on

How Viget.com uses microformats to give search engines more info about our team.

When Viget.com relaunched in EE, we were excited about the ability to easily add flexible microformats to the site (made easier with EE's custom fields). A quick refresher: Microformats use semantic class names in your existing HTML to give it more machine-readable value. They give browsers, search engines, and mobile devices the ability to quickly find, save, and sort common data like contact or event info.

With IE8 and FF3 just around the corner, there's never been a better time to get into working with formats like hcard and hcalendar. Why use them? A few reasons:

  1. They're valuable today - Some users are using plugins to quickly find contact info and directions, and clever bookmarklets to scrape formatted hcalendar events right into their calendar systems. LouderVoice is finding and aggregating hreviews from across the web, and Technorati has a special search for parsing three microformat types in blogs.
  2. They'll be more valuable tomorrow - while most users aren't taking advantage of microformats now, the next wave of browsers will give them much easier access to your microformatty goodness, letting them call/add/schedule directly from in-browser tools. And the more microformats there are, the closer we get to an age of microformat mashups, where users and apps are doing awesome stuff with your data to your benefit.
  3. They're ridiculously easy to apply.

For the Viget.com launch, we wanted to get team and business-related info hCarded up in five places:

The Header (the business name and link are enough for an hcard)
Author profiles (Nicknames, titles, photos, links and bios are all hCard fields)
The team page itself (30+ hcards with links, names, and positions)
The contact page (2 hcards with distinct information for two office locations)
The blog entries themselves (these contain links, titles, and names)

Let's look at the rendered source code for the most complex one, the author profile:

<div class="vcard" id="main"> 
  ... (left nav) ... 
  <h2 class="user_hd sifr fn">Doug Avery</h2> 
  <h4 class="sifr">(<span class="nickname">Embarrassing Nickname</span>)</h4> 
  <p class="no_bottom">
    <span class="title">Web Designer</span>
    <span class="org">Viget Labs</span>
  </p>
  <div class="note">
    ... (bio / description) ...
  </div> 
  ... (links) ...
  <img class="photo" id="feat_img" alt="Doug Avery" src="/images/viget/team/davery_bio1.jpg" /> 
  ... (more photos and Twitter) ...
</div>

We added a few classes and a wrapper div, and voila, hcards created. "vcard" needs to wrap the entire section, so we applied this class to the main wrapper div. The h2 is a formatted name ("fn") the nickname and titles are specified with spans, and the "org" (Viget Labs) is inside a span that we hid, just to make the hcard a little clearer. The entire bio can get wrapped as a "note," and we can add a photo to the hcard simply by specifying "photo" on the img tag.

To test your hcard format, the best bet is a Firefox plugin called Operator. You can turn on debug mode in the options panel on the right and use contacts > your name > debug to look at the structure of the hcard. Definitely try to add your hcard to your address book, Yahoo contacts, etc through Operator, but since different apps have varying support for the format, don't get too hung up on one aspect of the hcard if it's not coming through. If it follows the spec and reads correctly in debug mode, it should be working correctly.
For more in-depth look at setting up microformats, check out the tutorials here and an easy About Page example at 24ways.

Related Articles