Pin Me

A Better Way than vCard to put Contact Information on Your Web Pages

written by: Lamar Stonecypher•edited by: Rebecca Scudder•updated: 11/19/2008

Not sure that visitors actually ARE clicking that link to download your vCard contact information on your website? Using "microformat" hCard data to embed your contact info directly in the web page is a valid alternative to vCard. This article shows how to create and use hCard information.

  • slide 1 of 2

    If you’re a user of Microsoft Outlook, you have probably received vCard attachments. These include the sender’s name and contact information, and Outlook offers to save this information to your contacts database. There are problems with placing links, typically download links, to vCard information on web pages. One is that some browsers and web-based email applications may have no built-in method to handle them. In other words, your information isn’t shared unless the user is savvy enough to click your download link and then know what to do with it when it arrives. Another problem is that search engines don’t follow download links. Search engines, aggregators, and web spiders will typically not try to read the content of a vCard. This is where the hCard format comes in. It provides a method for placing vCard information in an HTML file in such a manner that it can be both displayed on a web page and interpreted by a browser (or robot).

    Figure 1 below shows the code for a simple hCard implemented in HTML.

    Figure 2 shows the hCard data as rendered in a web-browser.

    As an example of hCard use, one could include in a company contact page one or more hCards containing contact information for department heads or other employees. The hCard data is then rendered directly on the page and accessible through browser add-ons. (More about that below.)

    For another example, a web journalist (blogger) might include hCard information about his subject, perhaps provided by his subject, in an article in such a way that other web applications, like spiders and aggregators, can read, interpret, and convert them into standard vCard information. The journalist would probably use CSS (cascading style sheet) to customize the look of the information presented on his own page. This is not strictly required, as you can also place the hCard information directly into your web page HTML and see how your browser (and competing browsers) handle it.

    Unless you’re promoting a business and don’t care that everybody can find your hCard information (remember those search spiders), you should be very careful about what you include in your hCard. So far, the idea of a master, safe, or trusted hCard does not exist. Likewise, it’s not currently possible to determine if an hCard is from a trusted source. Thus you should think about only using hCard for company contact information, not personal information.

    There are other potential problems with hCard use, too. What if I took your contact information, altered it, or simply made more of it available with your personal information than you specified on your own page, and posted it up on a page of my own? What if the robots found it and thought it newer (and thus more valid) than your original?

    Problems like these remain to be resolved, but hCard and other “microformat" data are in use on many websites already. What can we do other than copy/paste contact information when we encounter it on a web page?“

    Operator" is an add-on for the Firefox web browser. When you visit web pages, it can find and make accessible several types of microformat data, including hCards. Once it’s installed, you can click on Tools -> Options -> Main -> Manage Add-Ons and click on Operator in the list to access Operator’s program options. See Figure 3 below.

    Figure 4 shows Operator in action, reading the hCard information that the page is displaying and offering to add the contact or locate the contact in a mapping application. So, should you provide your contact information in hCard microformat on your web page? With due caution to avoid exposing too personal information, yes. Remember that when you post your information to the web, it’s out there for everybody to see. If that is the desired result, that’s great. hCard is another tool to share your contact information and possibly increase your online visibility

    LinksMicroformats Wiki – Learn about hCards and other microformat containers:

    hCard Creator – Use this tool to create your company’s hCard:

    Michael Kaply is the developer of Operator:

    What is the Semantic Web? What’s Web 3.0? Some general information about microformats

    lA list of reviewed websites using hCard for which Operator will display contact or location information

    :>>> Other popular articles from this author

    Simple, Fast Screen Shot Capture in Vista

    Turn Your Vista Laptop into a Mobile Hotspot

    Checking Out Online Network TV

  • slide 2 of 2


    1. An example of HTML code to include an hCard on a web page.2. The hCard shown in Figure 1 rendered in a web browser.3. Operator Settings in Firefox.4. Operator accessing hCard information at a company website.

Popular Pages

More Info