Adding Microdata to Your SEO Schema Markup

Google, Yahoo and Bing recently launched an initiative called schema.org, to create and support common ways to represent web page metadata.

The project offers web publishers the tools to make their content more easily understood by search engines and more effectively represented in search results by introducing unified HTML tags (known as microdata) to help categorise and create associations between data.

The thinking behind these microtags is that although web pages have meaning to the users who read them, to search engines they are simply meaningless blocks of text. By tagging specific content as an address, a person or a product etc. we can give semantic meaning to that content – thus allowing the search engines to display it in a more useful, relevant way.

There may also be SEO benefits too; it is not unreasonable to suggest that search engines such as Google would look favourably upon websites who aid them in categorising and making sense of content. Much the way page speed has been factored into search engine algorithms of late I firmly believe that search engines will also give some weight eventually to sites whose content is correcly and semantically tagged. It may not be much weight, but in the highly competitve world of affiliate marketing anything that can give your site a potential advantage over a rival has got to be worth implementing.

So – we know a little about microdata and the potential benefits they offer – so how do we implement them?

Simple.

GROUP YOUR DATA

The first step is to ‘group’ associated data using the itemscope tag.

An example of this could be a list of products. Each product may consist of a product name, description, price, and brand. Like so:

<ul>
  <li>
    <div>
      <h3>Product Name</h3>
      <span>Brand Name</span>
      <span itemprop="price">Price: £29.99</span>
      <span itemprop="description">Product description</span>
    </div>
  </li>
  <li>
    <div>
      <h3>Product Name</h3>
      <span>Brand Name</span>
      <span itemprop="price">Price: £29.99</span>
      <span itemprop="description">Product description</span>
    </div>
  </li>
</ul>

Using a product microtag we could group the elements that belong to each product. To do this we give the product itemscope.

It sounds complicated but it’s simply a tag. And we just add it to any element that groups our product data together – in this case i could use the div that wraps each product in our list. I simply add the tag itemscope to the div like this:

<ul>
   <li> 
      <div itemscope>
         <h3>Product Name</h3> 
         <span>Brand Name</span> 
         <span>Price: £29.99</span> 
         <p>Product description</p> 
      </div> 
   </li> 
   <li> 
      <div itemscope>
         <h3>Product Name</h3> 
         <span>Brand Name</span> 
         <span>Price: £29.99</span> 
         <p>Product description</p> 
      </div> 
   </li> 
</ul>

ASSIGN AN ITEMTYPE

Ok – so we now have itemscope – we know each ‘thing’ within our product div is an item – but what type of item is it? We can specify that by also adding an itemtype tag.

<ul>
   <li>
      <div itemscope itemtype="http://schema.org/Product">
         <h3>Product Name</h3>
         <span>Brand Name</span> <span>Price: £29.99</span> 
         <p>Product description</p>
      </div>
   </li>
   <li>
      <div itemscope itemtype="http://schema.org/Product">
         <h3>Product Name</h3>
         <span>Brand Name</span> <span>Price: £29.99</span> 
         <p>Product description</p>
      </div>
   </li>
</ul>

Each itemtype is provided via a url such as http://www.schema.org/Product above.

There are serveral itemtypes to choose from such as:

  • Person
  • Product
  • Organsation
  • Review

Once we have grouped our items (using itemscope) and specified the type of item (using itemtype) we can begin to tag each of our items properties.

TAG OUR PROPERTIES

To tag individual properies of an item we can use the itemprop tag.

<ul>
   <li>
      <div itemscope itemtype="http://schema.org/Product">
         <h3 itemprop="name">Product Name</h3>
         <span itemprop="brand">Brand Name</span> 
         <span itemprop="price">Price: £29.99</span> 
         <span itemprop="description">Product description</span> 
      </div>
   </li>
   <li>
      <div itemscope itemtype="http://schema.org/Product">
         <h3 itemprop="name">Product Name</h3>
         <span itemprop="brand">Brand Name</span> 
         <span itemprop="price">Price: £29.99</span> 
         <span itemprop="description">Product description</span> 
      </div>
   </li>
</ul>

In the example above we simply add an itemprop tag for the name, brand, price and description of our product (but the tags would of course depend on the type of ‘item’ you were tagging). Easy huh?

This tool lets you enter the url of a page containing microdata and will then show you how that data could be presented by Google in organic search results. I say could be because there are no guarantees that rich snippets will be shown in natural search results – however there is always the chance they will become more common place as more websites adopt them, so why not get ahead of the game? ; )

If they are used for your site then you can expect search results to look like this:

Notice how we have rich data displayed within the search results? Such as the number of reviews, the price and whether the product is in stock.

Pretty cool huh?

So take a look and see what results you can get.

if you have any thoughts, ideas or suggestions regarding microdata then please feel free to leave your comments below.