The hCard is a one-to-one representation of the vCard in XHTML format. It is served to turn contact information into a semantically correct HTML, Atom, RSS or any arbitrary XML file.
I won’t try to describe why to use it. Quite a few people have done a great job detailing what hCard microformat is and why people should consider using it. One of the best step-by-step guides that any newbie will understand is “The hCard Microformat” tutorial published in 2007.
For those people who won’t learn anything until they are told this will affect rankings, I will only add that hCards are used by Google to create search snippets, (obviously) to rank businesses in local and geo-targeted search and is rumored to use the format more and more extensively. Besides, it helps search (and other) bots to aggregate all the web information about any specific person or business.
This post shares some most useful and easy-to0use hCard tools for you to learn how to format n hCard, where to use it and how to take advantage of it.
Hcard creator is really easy to use: just provide your name and contact details and see the live preview of your card. There are quite a few fields available:
- Home page URL;
- Photo URL;
- IM screen names;
Validating microformats s a tricky thing:
it doesn’t hold true that anything not recognizable as being of that dialect is an error. To take an example for hCard, I might have an image with a class name of photograph as part of an hCard block. The official class name from hCard is photo, but that doesn’t mean that a value of photograph is an error – it’s just not something we’re looking for.
Still, there exists a reliable validator for hCards that will at least let you know if you on the right rout and will help you single out some solid errors. It works for an URL, fragment and even a piece of an uploaded code. There’s also a bookmarklet allowing to instantly access the tool if you plan to validate hCards often.
Here’s an example of validation of the hCard I’ve created in the above step (using the official generator). Note that I intentionally missed some tags to have errors. Note also that & sign used in the company name was perceived as an error:
If you want to find handy ways to extract hCard information from a web page or check how your hCard might look when extracted, here are a couple of tools for you:
1. “Operator” FireFox addon (already reviewed by me here) adds the ability to interact with semantic data on web pages. When it comes to hCard, the addon will offer you to either download the contact or add it to your Yahoo! contacts:
Note: There is a similar one for IE: Oomph (but I didn’t use it long enough to recommend – go check yourself!)
2. H2VX is an online tool that downloads hCard contacts to your address book. It also offers a bookmarklet to download contacts by clicking it in your bookmarks toolbar.
3. Microformats Bookmarklet is a browser bookmarklet that overlays on the current page to allow users to import individual hCards or hCalendars. Supported browsers include: IE6 and IE7, Firefox, Safari, Opera and Camino.
4. Microformats contacts extractor is a cool Yahoo! Pipe that extracts the list of contacts from a hcard microformat-laden page.
hCards and WordPress
The most important element of any blog is actually the person behind it as well as people forming its readership. Therefore implementing hCard format into your blog should be a smart idea. Here are a few ways to do that:
- Extended Profile: this plugin turns a standard WordPress user profile into an hCard and adds additional details like photo, organization, address, phone number, and others.
- hCard Commenting: the plugin allows your visitors to easily fill out your comment forms using an hCard. To import an hCard into the comment fields, the user will
simply have to fill out the “Website” field with an URL to one of his hCards and to click the “import hCard” link.
- Micro Anywhere is designed to allow anyone to make use of microformats on their blog. When the plugin is activated, it adds two buttons to the WordPress WYSIWYG editor – one to insert event (calendar) data, and one to insert contact information (vCard) data. Each button opens a dialog box that prompts the user for information about their event or contact (works like the hCard generator we saw above).
- hAvatar – WordPress plugin displaying avatars for commenters based on their hCard;
- WordPress hCard Creator: the plugin adds the hCard submenu at Options menu where you can create a simple hCard and put it on your blog using < ?php hcard_creator() ?> to show it.
- Connections is a simple to use address book or business directory. The entry list can be embedded in a post/page using a simple shortcode
More hCard tools can be found here (some of them are outdated).