HTML5 Microdata and Rich Snippets

In HTML5, you can use microdata to provide context to your raw data. How are search engines supposed to know who the author of the content is, where your business is located, etc.? All search engines see is raw text because it has no context, but Google is paving the way with rich snippets. Rich Snippets are new HTML5 attribute that wrap around some text that has a unique importance to the user. Most often you will use these rich snippets as an attribute for the span tag, but sometimes you will have an entire block of text that has a unique relevance to the user, like an author's information, where you would use a div tag. Let's look at one normal block of text first and then we will convert it to a snippet.

<div>

    My name is Jared Drake and I write tutorials for PHPJabbers.com.

</div>

To search engines, they just see this text as is. Sure, they might be able to connect "Jared Drake" together as some type of keyword, but they don't really know what it is. The same applies for "PHPJabbers.com" and almost every other word in the text. However, we can shape the way search engines see the information by providing context to specific words. Let's look at a real rich snippet:

<div>

    My name is <span itemprop="name">Jared Drake</span> and I write tutorials for <span itemprop="affiliation">PHPJabbers.com</span>.

</div>

With the html5 microdata, the search engines know that "Jared Drake" is definitely connected and it is a name. So, search engines can connect my name with articles that I have written or other events that are related to me. This is slowly paving the way for a semantic web. You might have already seen Google attempting this with locations when it shows a map on the right side when you search for a business. I promise you that these rich snippets are going to catch on and search engines are going to embrace these more in the next few years.

The itemprop="affiliation" shows that PHPJabbers.com is a place. It might seem obvious that url are distinct based on the .com or .something syntax, but the affiliation gives some more context. To search engines, it now thinks that I am someway related to PHPJabbers.com. Before rich snippets, search engines would depend on the closeness of the words, but in our example, my name is far away from my affiliation where a search engine might guess we were connected. However, rich snippets strengthen this relationship and less is left to chance.


microformats.org provides more attributes and html5 microdata schemes that you can use to highlight your data. Currently, these microdata attributes focus on location, people, and a few other things. But, I honestly expect them to incorporate things like news, articles, and main topics. Twitter is kind of paving the path on specific keywords with the #, but I expect more associations with search engines as Twitter doesn't correlate keywords in too much detail.