HOWTO:Use hCard Microformats for Local Search

With the explosion of mobile devices and geo-targeting in search, providing accurate contact and location information to search engines is critical.  Some of the more obvious steps to take involve making sure that you are listed in local directories with the appropriate information, as well as registered with Google’s Local Business Center.

On your site, you should ensure that your contact information (email, telephone and address) are in text form and are on every page.  It is becoming increasingly common to put this information in the footer of your site.

The next level of sophistication is to add semantic data to your contact information.  There is a lot of talk about the semantic web, and most of it is very confusing to the un-initiated.  Leveraging the semantic web means using meta data, or data about data.  Increasingly this can be done using microformats.  Microformats are tags, or labels, that you include in the HTML code around information on your site.  This helps the search engines understand the meaning and context of your data.

In other words, I use microformats to ensure that a search engines realize that 514-436-0672 is my phone number, not just a string of digits.

In the case of contact information, use the hCard microformats.  The list of available attributes is very lengthy, but the implementation is very simple.

Use the hmtl <div> tag to indicate that you are creating an hCard.

<div class=”vcard”>

Within this parent division, each address or contact category gets it’s own <div>.  This allows you to separate names, organizations, telephone numbers and addresses.

A very simple hCard could look like this:

<div class=”vcard’>

<span class=”fn”> Michael Lautman</span>

<div class=”tel”>514-436-0672</div>

</div>

A more complete hCard would be formatted like this:

<a class=”url fn” href=”http://contexta.ca”>Michael Lautman</a></p>

<div id=”hcard-Michael-Lautman” class=”vcard”>Contexta Search</div>

<a class=”email” href=”mailto:michael@contexta.ca”>michael@contexta.ca</a>

<div class=”adr”>

<div class=”street-address”>105 Taywood Dr.</div>

<span class=”locality”>Beaconsfield</span>,<span class=”region”>QC</span>

<span class=”postal-code”>H9W 1A7</span>,<span class=”country-name”>Canada</span>

</div>

<div class=”tel”>514-436-0672</div></div>

and would appear as follows:

Michael Lautman

michael@contexta.ca