Whenever you want to show the contact details of an individual or an organization, you can use a special set of HTML class attributes defined in microformats known as the hCard. A hCard is very similar to the vCard that is built with the OSX on the Mac – just think of the hCard as a business card that you hand to search engines.
But let’s take one step back – What are micro formats (that hCard uses)?
There are many kinds of microformats (and even more now that HTML5 is the standard), each of which is designed to provide ways to make information better to understand, with the aim of making it machine-readable. Besides hCards, there are other types of microformats for different cards, such as review and recipe cards.
Microformats are just extra details. Think of it this way: A hCard is a Business Card with information, a hReview is a review (on a movie, business, restaurant, etc…), and other cards can even include recipes (very important for measurements).
The hCard provides a set of values for the class action and it is used to explain contact information, such as names, addresses, telephone, email address, instant messaging names, and the organizations. Think of it this way – without the hCard, the search engine doesn’t know if “Main Street” is just two words, or if it is an address.
Let’s take a look at an example:
<div id="" class="vcard"> <span class="fn n"> <span class="given-name"></span> <span class="additional-name"></span> <span class="family-name"></span> </span> <div class="org">Thriveworks</div> <a class="email" href="mailto:firstname.lastname@example.org">email@example.com</a> <div class="adr"> <div class="street-address">872 Massachusetts Avenue, Suite 2-2</div> <span class="locality">Cambridge</span>, <span class="region">MA</span>, <span class="postal-code">02139</span> <span class="country-name">United States</span> </div> <div class="tel">(617) 395-5806</div> <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p> </div>
As you can tell from above, the microformats are not visible to the person reading the page. The hCard is purely for Search Engines and Browsers. The only visible difference is the spaces from the div elements.
The example above only shows a few ways to use the hCard, but other examples include email addresses, birthdays, photos, organization, work cell, phone numbers, home, and work address (etc…). If you want to see the full value of hCards, you can check them out here. There’s a handy tool for creating the hCard here (just make sure you remove the hCard link).
You can use CSS to control the presentation of these elements, but by default, the elements will not be displayed differently. Since they are class attributes, you can easily style them anyway you would like.
Why are they useful?
hCards are useful for a few reasons:
- Search Engines are told what kind of information each element contains. The search engine can now tell the difference between a street and a state.
- hCards make this information available to others for download. There are quite a few extensions for Chrome and Firefox that can export the data into an address book format. Cool, huh?
- But most importantly, this information can be used for Local SEO.
If you’re a small business owner or a local business, and have a business that you are trying to rank well in local traffic, hCards help…
One of the ways that you can help your local SEO, is to make sure that you put your address on as many pages as you can, such as the footer.
An article by SE Journal last week explained that the more places you have your address, the more chances you have at getting into the map section on your search engine.
Original penguin algorithm already showed that quality citations had a promising future and now it is clear that along with links, local citations or brand mentions will also matter a lot – post penguin.
Citations play a key role in local search ranking. This simply means that the more your NAP – mentions of your Business’s Name, Address and Phone number, is found on websites related to your niche and location, the higher your local search ranking will be. As the citation building is the essential ingredient of your local SEO, it will be very beneficial to build a strong citation profile for your local business all over the web.
It is also important to ensure that all your citations are correct on the sites like Yellow Pages, MapQuest and City Search, as it will help you in establishing your business locally. Furthermore, citations help in authenticating your business as it is nearly impossible to fake a membership in the chamber of commerce, a city or county business index, a mention in local online newspaper, or on a popular blog. Local citations will give your business information to the sources – which are relied upon by the Search Engines for valid and reliable business information.
This hCard allows Google to have the information to figure out where you are. Not only are you putting the address on pages, you are putting the address with detail.
The hCard is like handing Google a business card of your company. Now Google, knows where to look – helping your local SEO.