Akshay Patil

• San Francisco (red)
• Daly City (light green)
• Brisbane (dark green)
• South San Francisco (light blue)
• Pacifica (magenta)
• San Bruno (dark blue)
• Millbrae (orange)

The save-to-foursquare bookmarklet we announced today lets users save places they read about on the web to their foursquare to-do list (or other lists) with the simple press of a button. Under the hood, this bookmarklet uses microformats magic to understand what location is being discussed on the webpage the user is viewing.

We look for a number of microformats, the foremost of which is hCard. There are numerous explanations about hCard microformats targeted at developers/SEO online, but few explanations for your average human that explain what hCard is and why it matters.

What is hCard?

hCard is a simple way to explicitly flag data on a webpage about the people, companies, or locations discussed on the page. A webpage creates an hCard object by labeling the parts of the page containing certain types of information: a name, address, birthday, etc. that might be of interest. This hCard labeling is invisible to humans and only visible to computers scanning the page, making it easier for computers to understand what you're already telling your human viewers.

How to add hCard to your site

Consider this restaurant review on LA Weekly’s website. LA Weekly already lists the restaurant’s location information on the page. Here’s the relevant HTML:

  <h4>
    <a href="http://www.voiceplaces.com/sotto-los-angeles-3074448-l/">Sotto</a>
  </h4>
  <p>
    9575 W. Pico Blvd.
    <br/>
    L.A., CA 90035
    <p>
      Category: <a href='/restaurants/search/'> Restaurant</a> >
      <a href="/restaurants/search/cuisine:Italian/">Italian</a>
    </p>
    <p>
      Region: <a href='/restaurants/search/region:124042/'>Melrose/ Beverly/ Fairfax</a>
    </p>
  </p>

Adding hCard is as simple as inserting the markup below:

<div class='locInfo'>
  <h4>
   <a class=”fn” href="http://www.voiceplaces.com/sotto-los-angeles-3074448-l/">Sotto</a>
  </h4>
  <p class=”adr”>
    <span class=”street-adrress”>9575 W. Pico Blvd.</span>
    <br/>
    <span class=”locality”>L.A.</span>, <span class=”region”>CA</span> <span class=”postal-code”>90035</span>
   <p>
     Category: <a href='/restaurants/search/'> Restaurant</a> >
     <a href="/restaurants/search/cuisine:Italian/">Italian</a>
   </p>
   <p>
     Region: <a href='/restaurants/search/region:124042/'>Melrose/ Beverly/ Fairfax</a>
   </p>
 </p>
</div>

What are the other benefits of using hCard?

Besides generating brand impressions and traffic via ‘Save to foursquare,’ supporting hCard affects how search engines treat your web site.

Search engines use hCard to improve results found on a website. For example, when searching Google for “Torrisi Italian Specialties”, a restaurant in NYC, the sites who have embedded hCard data about the restaurant have some of this information displayed directly in their search result. Compare the New York Times result, which does not use hCard



with the result from New York Magazine, which uses hCard to describe the store and the content it has about the store.



Want to learn more? Check out these pages that explain various aspects and benefits of hCard:

• http://clagnut.com/blog/2244/
• http://schema.org/
• http://microformats.org/wiki/hcard
• http://www.google.com/support/webmasters/bin/answer.py?answer=99170