Yesterday, I attended a training session, where Derek Brown from Pronto Marketing shared some advanced strategies for SEO with us. Derek’s presentation was great…amazing in fact. One of the items that he breezed by, but seemed to really emphasize, was hCards and how Google and Microsoft have really starting to embrace microformats in general. I’d heard about microformats before, but had not really taken the plunge. Having said this:
Microformats are a practical way to make data items (such as events, contact details or geographical locations) recognizable to Search Engines, without breaking existing page formatting that is easily read by humans. This is done by adding a set of "class" attributes that can be added to divs and spans in an HTML page to tag content with semantic meaning. For example, my hCard looks like a standard block of text:
James C. Fielding
Sciosoft Systems
1037 Langford Rd.
Baysville,
ON,
P0B 1A0 Canada
705-571-1123
To get this, I used the following HTML:
<div id="hcard-James-Fielding" class="vcard">
<a class="url fn n" href="http://www.sciosoft.com">
<span class="given-name">James</span>
<span class="additional-name">C.</span>
<span class="family-name">Fielding</span>
</a>
<div class="org">
Sciosoft Systems</div>
<div class="adr">
<div class="street-address">1037 Langford Rd.</div>
<span class="locality">Baysville</span>,
<span class="region">ON</span>,
<span class="postal-code">P0B 1A0</span>
<span class="country-name">Canada</span>
</div>
<div class="tel">
705-571-1123</div>
</div>
Adding this small amount of markup can have significant SEO results. Moreover, you can style this block with CSS by using the class names directly, or by adding a second styling class like this to any of the tags:
<div id="hcard-James-Fielding" class="vcard mystyle">
....
</div>
One big note on CSS styling, don’t try to hide the hCard. In general, Google doesn’t take kindly to you wrapping things in style="display: none; " tags, and microformats are no exception.
To get started, you can try out www.microformat.org’s hCard Creator which formats the hCard HTML for you.
Besides hCards, there are a number of other microformat open standard specifications (including hCalendar, rel-license, rel-nofollow, rel-tag) that are in use, as well as many more (including geo, hAudio, hMedia, hNews, hProduct, hRecipe, hResume, hReview) at various stages of acceptance.
Another great thing about microformats is that they can be readily integrated into XML data sources, but I think I’ll leave that for a future discussion.
Happy optimizing,
James Fielding
Subscribe