HTML5 Microdata

By including some new sematic elements within your HTML tags, you can give existing information within your webpages a context and meaning so that machines can also read and understand the data.

Elements

itemscope creates a container for a group of related information.

itemtype sets how that information is defined, e.g. Person or Address, etc

itemscopes can be nested, e.g. an Address can be container within a Person

itemprop defines what the individual piece of information is, e.g. name or role or title

The full list of formats available can be found here: http://www.data-vocabulary.org/

As an example, I’ve added an About page to my website and added the relevant elements for the Person Microdata format.

The Person format can be found here:  http://www.data-vocabulary.org/Person/

Here’s the code:

Which gives us the following page:

The next stage is to add layout tags and additional information around the Person tags.  Here’s the updated page:

Rich Snippets Testing Tool (Google Web Master Tools)

To ensure you have updated your tags correctly you can use the Google Rich Snippets Testing Tool to let you know what data is visible:

http://www.google.com/webmasters/tools/richsnippets