Microdata is way of formatting the content of your website so that it is more easily digested by search engines. It works in the same way as applying a style to text but there is no actual visual change. So instead of making the selected text bold or appear in italics you state “this is a business address” or “this is the name of a product”.

Unlike metadata (which tries to define a whole page) microdata targets a specific section or a single word. In effect you’re marking up the content in a descriptive manner so that search engines have a better idea of what your content is actually about.


Rich Snippets

Google uses Microdata to create "Rich Snippets" - search engine results that are illustrated with thumbnail images, product ratings, reviews, breadcrumb trails or author profiles. These extra elements are determined by the content on your site and how they are defined by Microdata.


You can test the success of your microdata markup with Google's Rich Snippets testing tool.


An example Rich Snippet - note the reviews count and the breadcrumbs, both generated from Microdata.




Microformats & Schema

In order for the Microdata to work it has to conform to a standard body of rules. There are a number of standards available but one of the most notable was Microformats.


Microformats have been around for a while and have a variety of "formats" including hrecipe (which Google uses to power it's rich snippet recipe searches), hCard (which Twitter uses to mark up contact details) and hCalendar (which Facebook uses to mark up group events).


However, in 2011 Google, Yahoo and Bing all announced they would be backing a new form of Microdata known as Schema. Although search engines will support both standards of Microdata it would make your code fairly overpopulated so is probably more sensible to just use the one.


How it Works

Microdata acts in the same way as a CSS class. The whole element you are formatting (eg. your contact details) is wrapped in a <span> with a specific definition that declares which standard you are using. Then further <span>s are placed within to define specific properties (eg. your name, your address, your telephone number).


If your original text looked like this...


<p>Mr Jones, 24 Test Drive, London, 01234 567890</p>


Using the "hCard" specification in Microformats it would look like this...


<p><span class="vcard"><span class="fn">Mr Jones</span>, <span class="adr">24 Test Drive, London</span>, <span class="tel">01234 567890</span></span></p>


And using the "person" specification in Schema it would look like this...


<p><span itemscope itemtype="http://schema.org/Person"><span itemprop="name">Mr Jones</span>, <span itemprop="address">24 Test Drive, London</span>, <span itemprop="telephone">01234 567890</span></span></p>


The rendered code would be exactly the same in all three cases, but the two that include microdata have specified what the content is (somebody's contact details) and which parts of the content are the person's name, address and telephone number.


Web Design & Development
07845 950063