ScioSoft's Community Blogs Optimized IT musings for the technically inclined

Using hCard Microformats for SEO (Search Engine Optimization)

by James Fielding 4. February 2010 13:09

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

kick it on DotNetKicks.com

Sciosoft Systems is a Canadian web design & development company based in Muskoka, which is in central Ontario. We provide ASP.NET website & Windows Server application development services to small and medium-sized business, as well as local government and not-for-profit groups. If you have a website project you’d like to discuss, please visit us at www.sciosoft.com.

Share |

Tags: , ,

Web Development | SEO

Comments (2) -

directory
directory United States
2/25/2010 10:15:59 AM #

Do you mind if I quote you on my website if I link back to your website?

ScioJim
ScioJim Canada
2/27/2010 1:23:13 PM #

If you've found this or any other posts useful, we'd be happy if you want to quote or refer back to us. Of course, a link back to the quoted post would be appropriate and appreciated. Please refrain from copying & pasting large sections or complete posts without written consent as this would be contrary to copyright.

Pingbacks and trackbacks (1)+

Comments are closed

RecentComments

Comment RSS

The opinions expressed herein are the personal opinions of the contributors and do not necessarily represent the views of Sciosoft Systems Inc.