Schema.org – SEO

Time to move away from all the WordPress talk and move on to look at an upcoming SEO topic.

What is Schema.org

It is a format for microdata devised as a collaborative effort by multiple companies, including Google, Bing, Yahoo and Microsoft.  A representative from Microsoft mentioned that when such competing companies get together to create something, then you know it’s going to be big!  This is all too true as it is not just a microdata format devised by a group of industry professionals creating a standard, it is devised by the companies who will be implementing it and using it to enhance search results which is the optimal end-game.

How to use it

Microdata of many different formats can be simply bolted on to an existing website and Schema.org’s format is just the same, simple and effective.

Schema.org provide their getting started guide here but we’ll look at the implementation of it here too.

Implementation

First you must pick and define the type of data on your page, you can determine this by looking at their list of schemas and deciding which matches your content, whether you are talking about a Person, an Event, or just reporting on the latest News.

Once you’ve picked your type you can decide which is the outmost element relating to that schema in your DOM and add your first schema.org definition:

<div itemscope itemtype="http://schema.org/NewsArticle">
</div>

Here itemscope determines that this div contains content relating to the defined itemtype.

From here you want to start filling in the properties defined by the NewsArticle schema, these include, headline, author, datePublished and articleBody.

<div itemscope itemtype="http://schema.org/NewsArticle">

 <h1 itemprop="headline">Schema.org released!</h1>
 <time itemprop="datePublished" datetime="2011-08-01T16:30">1st August 2011</time>
 <div itemprop="author" itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">Mike</span> - <span itemprop="jobTitle">Writer</span>
 <a href="/mike" itemprop="url">Find out more about Mike</a>
 </div>
 <div itemprop="articleBody">It's here forever...</div>

</div>

Here we have specified properties and jumped a step in that we’ve also added a nested type for the author property, whereby rather than just giving the authors name, we have also specified that it is a Person allowing us to add further data about the author on this page and provide their job title too.

In this definition we have also provided a url property for the author, this tells the search engine that to find out more about the author Mike, they can follow that URL.

A final point to note in this example, the datePublished time is specified in a human readable format to display on the page, but also a datetime property is provided in ISO8601 format to ensure that to a machine it’s understandable without affecting the user’s experience.  If a similar situation occurs whereby you need to provide machine readable data without showing it to the user it is possible to provide it using a meta tag but it is highly preferred to include it in a more standard way as demonstrated above.

<meta itemprop="datePublished" content="2011-08-01T16:30" />

Validation

This has provided and overview of the implementation of Schema.org and the methods available for defining data. When you’ve implemented it and fancy seeing if it’s right, then you can look towards either Google’s Rich Snippets tool, or another useful method is a javascript file that embeds a dialog on your page to show you the defined data.  This can be found by KrofDrakula on github.

For further reading skip over to schema.org and have a look!