Microdata is an HTML specification that offers metadata that web developers can add to their HTML in order to give HTML code more meaning.

Consider this simple code snippet:

<div class="address">
42 West 24th Street
New York, NY 10010, USA

For a human it is obvious that this is a street address. But for a search engine or browser it isn’t. This is what Microdata is for. Using vocabularies (such as those provided by Schema.org) we can help search engines understand the content of our web pages a little better. In return users will get more meaningful search results.

To use the example above, we could do this:

<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" >
<div itemprop="streetAddress">42 West 24th Street</div>
<span itemprop="addressLocality">New York</span>, <span itemprop="addressRegion">NY 10010, USA</span>

This is quite a bit more code. What is now easier for the search engine to understand may be more difficult for the developer to grasp at first glance. But it’s actually not all that difficult.

itemscope defines this particular <div> as the scope.
itemtype links to the vocabulary that we are using for this scope.
itemprop says that the containing tag holds the value of the specified item property.

Go to the Structured Data Testing Tool and see how Google or Bing or Yahoo interpret our semantic data.

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.