This week I was looking to improve our shop SEO and one of the things was the microdata for HTML5. It is really cool feature from HTML5, helping crawlers to understand more about the site and providing a better results for users. For example, Google shows rich snippets in their results, so you can see page author, breadcrumbs, review information, product prices, etc. You can see few examples on Google Rich Snippets Testing Tool.
Looking at Google Webmaster documentation, they recommend do use the microdata from schema.org, which is a schema made by search providers like Bind, Google, Yahoo! and Yandex. The schema contains a lot of types useful for you website. This works very well in many cases, but some times it requires layout changes to fit well.
Before I explain the problem, a little description of microdata in HTML5. Most of HTML tags can have the
itemprop define the property name and usually the
content of the tag is the value, for example a name.
itemscope define a block of properties, for example
itemtype contains the URL which contais the definition of the
It means that if you want to describe a product, you create a some
itemscope with, for example, a
and define all the properties there, like
reviews, etc. It sounds great and worked for
almost everything in the page, except one thing: breadcrumbs! The Product type
do not have any property for categories or breadcrumbs, it is part from the
WebPage type. But you can not define property for multiple scopes or in a
different scope with microdata.
Unfortunately I didn’t find any solution with schema.org only, then I had to use schema.org and the deprecated data-vocabulary. The code in the end was something similar with that:
This is not the best solution, but it was the balance between do not change the layout because the microdata and have a nice presentation in search provider results. I hope the schema.org covers it once breadcrumbs are not restricted to WebPage type or any of the sub-types.
Do you have a better solution using microdata?