HTML Microdata Tutorial

HTML Microdata Tutorial

HTML tags provide for semantic markup of text primarily to make web documents more readable by human visitors. There are also cases where it would be desirable to provide structured data in HTML documents for special purposes that are not handled by the standard tags defined in the HTML specification. In HTML 5, the microdata mechanism allows adding some additional structure to HTML documents.

All it takes to implement microdata properties is simply adding a few attributes to existing HTML code. This makes it easier to implement item properties with microdata than with other data formats such as microformats and RDFa. These machine-readable properties can be processed by software searching for specific types of information. Some search engines, Google in particular, already support microdata code and use it to improve search engine results.

Microdata can be used to provide information on things like:

• Addresses
• Businesses
• Creative Works
• Events
• Geographical Coordinates
• Organizations
• People
• Products and Product Offers
• Ratings
• Recipes
• Reviews
• Videos

Microdata can also be used by search engines to create a breadcrumb trail, consisting of a series of links, as shown in these results from a Google search:

Compare how Google displays a breadcrumb trail (highlighted in yellow) based on microdata properties obtained from the HTML 5 web site where a URL appears for other web sites.

Definitions

property

A property is a simple data structure consisting of a name and a value, also known as a name-value pair. The HTMLPropertiesCollection interface provides access to a collection of properties.

Item Properties

...
<itemelem itemscope="itemscope" itemtype="item-type-url">
   ...
   <propelem itemprop="property-name">property-value</propelem>
   ...
   <propitem itemprop="property-name"
      itemscope="itemscope" itemtype="item-type-url">
      ...
   </propitem>   
   ...
</itemelem>   
...

To add microdata to HTML code:

1. Add an itemscope="itemscope" attribute and an itemtype attribute to the parent element of the HTML code that describes the properties of the item.
2. If there are other properties outside the microdata item element, include an itemref attribute with a list of their id attributes.
3. Add an itemprop attribute to each element that represents a property of the item. The value of this attribute is the name of the property.
   • The itemprop attribute can specify a list of property names separated by spaces only if those properties all have the same value.
   • More than one element may have a itemprop attribute with a given value if the property has more than one value.
   • The value of a property may be another item, indicated by an itemscope="itemscope" attribute and its own itemtype attribute.

   The value of the property depends on the HTML element type as shown in the table below.

The value of a property is usually part of the regular content of the HTML document, often provided by the text content of the HTML element where the itemprop attribute is coded. The property value can also be another microdata item or, for a small set of HTML element types, the value of a specific attribute as indicated in the following table:

When the property value is part of a longer area of text content, a span element can be added to identify the part that is the value of the microdata property. When the value is not already part of the document, a <meta/> tag with a text value in the content attribute or a <link/> tag with a URL in the href attribute can be added to the HTML code.

Microdata Examples

<article itemscope="itemscope" itemtype="http://data-vocabulary.org/Recipe">
   <h1 itemprop="name">Chocolate Pie</h1>
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li itemprop="ingredient" itemscope="itemscope"
            itemtype="http://data-vocabulary.org/RecipeIngredient">
            <span itemprop="amount">8 oz.</span>
            <span itemprop="name">condensed milk</span>
         </li>
         <li itemprop="ingredient" itemscope="itemscope"
            itemtype="http://data-vocabulary.org/RecipeIngredient">
            <span itemprop="amount">12 oz.</span>
            <span itemprop="name">chocolate</span>
         </li>
         <li itemprop="ingredient" itemscope="itemscope"
            itemtype="http://data-vocabulary.org/RecipeIngredient">
            <span itemprop="amount">1</span>
            <span itemprop="name">9" pie crust</span>
         </li>
         <li itemprop="ingredient" itemscope="itemscope"
            itemtype="http://data-vocabulary.org/RecipeIngredient">
            <span itemprop="name">Whipped cream</span> (prepared separately)</li>
      </ul>
   </section>
   <section itemprop="instructions">
      <h2>Preparation</h2>
      <ol>
         <li>Heat condensed milk and chocolate. Do not boil.</li>
         <li>Pour into pie crust. Refrigerate.</li>
         <li>Top with whipped cream.</li>
      </ol>
   </section>
</article>

Microdata Formats

This list of microdata formats provides some examples of how HTML microdata can be used:

Breadcrumb Trails

Breadcrumb microdata can be used to provide search engines with a breadcrumb trail, which provides a sequence of links (breadcrumbs) based on the hierarchical navigation of a web site. When available, Google displays a breadcrumb trail in the search results instead of a simple link, providing access to multiple pages on the site instead of just a single page.

Creative Works

Google Rich Snippets

Rich Snippets include:

Address Microdata

Microdata for Businesses and Organizations

Event Microdata

Geographical Coordinates Microdata

Offer Microdata

Person Microdata

Product Microdata

Microdata for Ratings

Recipe Microdata

Review Microdata

Microdata for Video

back to top