data

Adding microdata to your 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:

A full overview of all the available types can be found here

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?

We can also test our new markup using a new tool from Google – the Rich Snippet Testing Tool.

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?

Of course this is an exteremely simple example to arouse your interest. For a full overview of all the tags available you will need to head over to schema.org and have a little play.

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.

 

Found this post useful?

Subscribe to our RSS feed, follow us on Twitter or help us grow by sharing our content using the buttons below

Related Posts

invalid-email

12 top tips for building better email templates

google-panda1

Pandas social impact – adjust and flourish

Scream

Permanently moving a website – the right way

4 Comments

  1. Steven-AS

    06.09.2011

    Reply

    I wonder how long it will take for this to go the way of META keywords. I can’t help but think we’ll see something along the lines of ‘microdata stuffing’.

    Merchant product data feed (i.e., from a trusted source) standardisation using microdata on the other hand could be a different story. In fact any standardisation in this area would be welcome.

  2. Dave Whelan

    10.18.2011

    Reply

    Hi,

    Just marked up all of our products. Its very interesting to see how the results come back. To see how Google displays the description in the search results in the Rich Snippets Testing Tool

  3. Eddie Smeink

    06.03.2013

    Reply

    Hello, in this particular example you’re applying micro formatting on a product list page. I thought that wasn’t allowed. Or am I wrong? I see you use the itemscope on every individual list item, so maybe that makes it legit…?

  4. Sarath

    03.07.2014

    Reply

    itemprop=”price” is not found on schema.org under product

Leave a Reply