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
<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
<title>) is assigned a
classattribute indicating a property. For example,
fndescribes a person's name;
titledescribes 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
adrdescribes the address of the person, and includes the subproperties
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
- 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
vcardon the same line, separated by a space, like this:
<span class="reviewer vcard">. The
orgdescribe Bob's name, his job title, and the organization he works for.
For more examples, see Nested entities.
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>
<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:
- Businesses and organizations
- 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.