How to Mark-Up Your HTML with Schema Microdata

Schema is a collaboration between Google, Microsoft and Yahoo! It is not a standard or industry body. Schema includes the semantic Microdata format, (which along with html5), provide a wide variety of ways for Webmasters to define individual elements of within a webpage. These html mark-up tags help search engines to derive actual meaning and context from bits of content. This enables them to redisplay each element in a useful and relevant way. So you can eliminate potential confusion over the real meaning of a word. For example, a 'bonnet' could mean 'hinged cover over the engine in a car', or alternatively 'various types of Scottish or Irish soft hat'.

Although the use of Microdata is not a ranking factor (yet), by allowing search engines to extract specific elements of content, it is highly likely your click through ratio will improve. Users are well used to clicking on 'rich snippets' to take them to exactly the bit of content they are interested in. So your conversion rates are likely to improve if you are delivering exactly what a visitor asks for. How many times have you clicked on the search result where the link was a review, an author, an image or a product link? In other words, the richer your content can be analysed and classified and re-presented as a snippet, the greater the likelihood it will be visited by your target audience. If you run a product orientated website, which comprises a large catalogue of products, people, reviews or places - then Microdata will become really invaluable for your online marketing efforts.

Let's look at a simple HTML example nested and marked up by Microdata:-

Each 'itemtype' is enclosed top and bottom by 'itemscope' (which identifies the section of the page that is "about" something). You can specify the type of item using the itemtype attribute immediately after the itemscope. To label properties of an item, use the itemprop attribute. The possibilities are endless when you scroll down the full Hierarchy of Item types. From this list you can find which 'types' relate to the sort of content of your website. Sometimes the value of an item property can itself be another item with its own set of properties.

When I first implemented Microdata on this website, I only needed to selectively use a few 'item types' to distinguish the important elements of each webpage, from the less relevant areas of each webpage (such as the navigational headers and footers). I implemented the following Microdata and HTML5 tags. Note the div names are just my own page class names (you can use anything you like):-

If you use a content management system, it is well worth going through the pain of updating all of your HTML templates and scripts to include Microdata mark-ups. This will avoid thinking about how to classify new data every time you post something. You should be validating your web design template or CMS anyway, in an on-going effort to remain compliant with the latest W3C standards. Bear in mind that not all browsers support HTML 5 as yet. So there is no huge urgency to use every single tag in Schema - yet there is no downside of staying ahead of the game.

To test any changes you have made to your webpages, Google provide a rich snippets testing tool which will identify whether you have implemented Microdata according to the standards laid down by Schema.org.