Why (And How) You Should Use HTML5 Microdata

Posted: 08 Aug 2011 05:30 AM PDT

Structured data is a way to communicate more information about your content to any machine or program capable of understanding the structure. It’s a way to give more semantic meaning to your content and data.

Html has a limited set of elements that we can use to give meaning to our content. Marking up some words as a list communicates something different than marking up those same words as a paragraph or blockquote.

Html5 adds more semantic elements, but we’re still looking at about 100 or so elements Microdata is one way to add to the vocabulary of html.

Why Structured Data is Important

As I said in the first sentence of this post, structured data allows you to communicate more about your content.

It’s a way to tell anyone listening that one piece of content is your business address and another piece of content is your name or that certain content is an event while something else is a product review.

A person reading the content can tell the difference by reading the content. Machines can’t. They need more. Structured data makes your content more parsable so programs can more easily find and extract information.

For example it allows a search engine to pull out your special offer and present it to searchers looking for a sale. It can help search engines better understand your content and help them place rich snippets under your page’s link in the results

Microdata is not the only type of structured data available to us. You’re likely familiar with some other types.

Microdata is part of the html5 spec though, and it currently has the backing of Google, Bing, and Yahoo and so has a good chance of becoming a standard we all support.

How to Add Microdata to Your Code

Microdata is really just adding some extra attributes to your html elements. Where microformats uses classes, microdata primarily uses 3 new attributes.

itemscope
itemprop
itemtype

A fourth attribute itemid may also be used in some cases.

Itemscope and Itemprop

At the highest level microdata consists of groups of name/value pairs. Groups are called items and each name/value pair is a property and corresponding value. These name/value pairs create a vocabulary for a type of data.

This is easiest to see with some examples.

 <div itemscope>   <p>My name is <span itemprop="name">Steve</span></p> </div>

We create a new item by adding the itemscope attribute to an element. Our name/value pair will be included on a descendent of the itemscope element.

We wrap our value (in this case my name) with some html that includes the itemprop attribute. The value of itemprop is the name in our name/value pair.

Here name is the property name and Steve is the property value.

Items can be nested.

 <div itemscope>   <p>My name is <span itemprop="name">Steve</span></p>   <p>I have a brother named <span itemprop="brother" itemscope> <span itemprop="name">David</span> </span>.</p> </div>

And a single item can also have multiple properties with the same name and different values

 <div itemscope>   <p>My favorite colors are</p>   <ul>     <li itemprop="color">green</li>     <li itemprop="color">maroon</li>     <li itemprop="color">brown</li>   </ul> </div>

Itemtypes Define the Vocabulary

Microdata, as you would expect, is much more useful when we agree about the meaning of different name/value pairs. We need standard ways to markup our data so everyone understands what it’s communicating.

To do this we give items a type through the itemtype attribute. The value of itemtype will be a url where the vocabulary (the itemprop names) for an item are defined.

itemtype=”http://www.example.com/person”
itemtype=”http://www.example.com/movie”

The content at the above urls would ideally define the properties for a person and movie respectively.

An item can only have one itemtype and the itemtype attribute gets added to the same element as the itemscope attribute.

 <div itemscope itemtype="http://www.example.com/person">   <p>My name is <span itemprop="name">Steve</span></p> </div>

Certain items might have a global identifier. Think about a book with an isbn number. Different books can have the same title or the same author, but each has a single unique isbn number to identify it. No two books will have the same isbn number.

Microdata reflects this with the itemid attribute as seen below in an example from the W3C.

 <dl itemscope       itemtype="http://vocab.example.net/book"       itemid="urn:isbn:0-330-34032-8"> 	<dt>Title 	<dd itemprop="title">The Reality Dysfunction 	<dt>Author 	<dd itemprop="author">Peter F. Hamilton 	<dt>Publication date 	<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>

An itemid can only be used if an itemtype is specified.

Schema.org

Schema.org is a collection of itemtypes or schemas. The reason it’s making news is because it has the backing of the 3 major search engines.

When you consider that an important part of seo is helping search engines better understand your content, it makes a lot of sense to take microdata and schema.org seriously.

Google is still supporting both microformats and RDFa, but they do note that microdata has a larger vocabulary. The schema.org FAQ offers this as well:

If you have already done markup and it is already being used by Google, Microsoft, or Yahoo!, the markup format will continue to be supported. Changing to the new markup format could be helpful over time because you will be switching to a standard that is accepted across all three companies, but you don’t have to do it.

In other words you don’t need to change anything if you’re already using another format of structured data, but know that microdata will likely have wider support

Schema.org lists itemptypes (schemas) for a large variety of things.

Creative works (book, movie, recipe, article, blog, music recording)
Event (business event, sale event, social event)
Organization (corporation, localbusiness)
Person
Place
Product
Offer
Review

The above is not a complete list. There are many more schemas, but hopefully you can see how many in the list above would be useful.

Odds are your next site will contain content that could easily be marked up with the properties of one or more schema.

Authorship

You might have recently seen some articles about rel=”author” which is Google’s way of displaying author information in search results and to help authors get credit for their work.

This isn’t quite microdata, however schema.org does provide for authorship in a variety of the defined itemtypes and Google will interpret the microformat author information similarly to the rel=”author” author.

Here are a few other articles with more information about marking up your content with rel=”author”

Summary

Hopefully this introduction to microdata has helped you see how valuable it can be. Anything that allows us to communicate more and in more ways is something all web designers and developers should pay attention to.

While we already have some other ways to structure data and communicate meta information, microdata looks like it will be particularly important at least where search engines are concerned.

Adding microdata to your html isn’t hard to understand or do. Perhaps the most difficult part will be remembering what you can markup and what name/value pairs are part of any given itemtype vocabulary.

Fortunately schema.org will be there as a resource.

Have you started using microdata at all? Do you prefer another method of structuring data like microformats or RDFa?