Webmaster Tools

Marking up data using microformats

Microformats are simple conventions (known as entities) used on web pages to describe a specific type of information —for example, a review, an event, a product, a business, or a person. Each entity has its own properties. For example, a Person has the properties name, address, job title, company, and email address.

In general, microformats use the class attribute in HTML tags (often <span> or <div>) to assign brief and descriptive names to entities and their properties. Here's an example of a short HTML block showing basic contact information for Bob Smith.

<div>
   <img src="www.example.com/bobsmith.jpg" />
   <strong>Bob Smith</strong>
   Senior editor at ACME Reviews
   200 Main St
   Desertville, AZ 12345
</div>

Here is the same HTML marked up with the hCard (Person) microformat.

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" />
   <strong class="fn">Bob Smith</strong>
   <span class="title">Senior editor</span> at <span class="org">ACME Reviews</span>
   <span class="adr">
      <span class="street-address">200 Main St</span>
      <span class="locality">Desertville</span>, <span class="region">AZ</span>
      <span class="postal-code">12345</span>
   </span>
</div> 

Here's how this sample works.

• In the first line, class="vcard" indicates that the HTML enclosed in the <div> describes a Person. (The microformat used to describe people is called hCard and is referred to in HTML as vcard. This isn't a typo.)
• The sample describes properties of the Person item, such as a photo, name, title, organization, and address. To label properties about the person described by the vcard, each element containing one of these properties (such as <span>, <img>, or <title>) is assigned a class attribute indicating a property. For example, fn describes a person's name; title describes job title. (The Help article for each information type includes a full list of recognized properties.)
• Properties can contain other properties. In the example above, the property adr describes the address of the person, and includes the subproperties street-address, locality, region and postal-code).

Nested microformats

It's common for one microformat (for example, a Review) to contain another (for example, contact information about the reviewer). The sample review below includes information about Bob Smith's job title and employer.

<div>
   <strong>Blast 'Em Up Review</strong>
   By Bob Smith, Senior Editor at ACME Reviews
   Rating: 4.5 out of 5
   This is a great game. I enjoyed it from the
   opening battle to the final showdown with the evil aliens.
</div>

Here is the same HTML marked up with the hReview (review) and hCard (person) microformats. To represent the information about Bob the reviewer, hCard (Person) microformat is nested inside the hReview (Review) microformat.

<div class="hreview">
   <span class="item">
      <strong class="item"><span class="fn">Blast 'Em Up</span> Review</strong>
   </span>
   <span class="reviewer vcard">
      By <span class="fn">Bob Smith</span>, <span class="title">Senior Editor</span>
      at <span class="org">ACME Reviews</span>
   </span>
   Rating: <span class="rating">4.5</span> out of 5.
   <span class="description">This is a great game. I enjoyed it from the
   opening battle to the final showdown with the evil aliens.</span>
</div>

Here's how this sample works.

• Reviews are described by the hReview microformat, written as class="hreview". Since this is a review, the entire HTML block is included in a div with the class="hreview" attribute.
• To identify the reviewer, you can use span class="reviewer". However, in this case we want to provide additional information about the reviewer using the vcard (person) microformat. You can do this by putting reviewer and vcard on the same line, separated by a space, like this: <span class="reviewer vcard">. The vcard properties fn, title, and org describe Bob's name, his job title, and the organization he works for.

For more examples, see Nested entities.

Non-visible content

In general, Google won't display content that is not visible to the user. In other words, don't show content to users in one way, and use hidden text to mark up information separately for search engines and web applications. You should mark up the text that actually appears to your users when they visit your web pages.

However, in some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be seen by visitors to your page. For example, providing the latitude and longitude of a venue can help Google ensure that it is correctly mapped; providing the date of an event in ISO date format can help ensure that it appears correctly in search results. In this case you can use the microformats value class pattern. Consider this example:

<span class="dtstart">
   <span class="value-title" title="2009-10-15T19:00-08:00" />
15 October, 7PM
</span>

By including <span class="value-title" title="2009-10-15T19:00-08:00" /> inside the block labeled with class="dtstart", you indicate that the rich snippets parser should use the value in the title attribute to find the start date of the event. The date in the title attribute can be represented using ISO date format without affecting the way the date is shown to users.

For specific vocabulary and examples, see:

• Reviews
• People
• Products
• Businesses and organizations
• Recipes
• Events
• Video (note that while Google supports video markup, we currently use it only to improve our video search results).

To check your markup, use the structured data testing tool.