How to Markup Your Website with Schema

In this week’s Tutorial Tuesday I’m going to talk you thorugh how to implement Schema.org mark up in your HTML code. But first a bit of background as to why it’s necessary.

With the wealth of information available to us on the Internet we need a way of finding what it is we are looking for, which is why Search Engines exist. But as the content on the web has deepened and become richer with more complex structure and coding language the search engines have had to advance as well to return the best results to their users.

The latest major update from search giant Google, named Hummingbird, clearly demonstrates the direction in which they are going in terms of cataloguing the Internet and how they go about identifying intent behind their users’ queries. Hummingbird, in a nutshell, is focussed on semantic search, meaning it addresses the way intent behind a user’s search term by using complex linguistic algorithms as well as geographical and social markers. For example where before when looking for a local office supply retailer we might have put into Google “office supplies Farnham”; which is very keyword focussed and mechanical, now it has shifted to users being more natural in their search inputs. So users are more likely to put in “where can I buy office supplies?”, challenging Google to weed out the actual intent behind the query. So “where” implies geographical and there Google might use location services to determine your whereabouts, “buy” shows intent for a purchase, so Google will return Shopping results and, “office supplies” is the main keyword.

This simplistic example hopefully demonstrates how the way we use search engines is shifting, certainly as a result of Siri bursting into our lives heralding the rise of voice searches, and surge in mobile searching.

This where semantic markup and structured data come in. As Google meanders through the Internet its robots read the code of your webpages and try to determine what your site is about based on the content. But the content has always been geared, obviously, towards human readers who inherantly have a complex understanding of language, linguistic complexities such as contextual markers, grammatical comprehension, use of idiom, slang and informal language etc.. Google, for all its powers, does not. It needs to be told what it is looking at, and this is where Schema plays a huge part in helping Google understand your content. The folks at Schema.org have essentially created a huge database of definitions and structural language that gives meaning to elements on a page and allows the robots crawling to “know” what they are.

So say you had a recipe for an awesome Victoria sponge cake, you’d list the ingredients and the methods for cooking, oven temperature, etc. and a human reader would understand, but to a robot, it’s just words on a page. Now, however, you can tell it that the content on this page is a recipe, and that the recipe is for a Victoria sponge that feeds 6 people. Or you’re promoting a conference about healthy eating, you can tell Google the date, start time, location, event title etc.

What this then means is not only does it broaden the search engine’s understanding of your content allowing it to return your site following broader search queries, it also allows for the creation of “rich snippets” which appear directly in the search results page. The example below shows the results for a search for “Cineworld aldershot”, notice how I don’t even have to go into the website to get a wealth of information; contact details, movies being shown, directions, etc. Wonderful.

The implementation of rich data is considered as a ranking factor within Google’s guidlines, and is certainly not going anywhere anytime soon.

So if this is something you’d like to learn how to do, read on…

The Tutorial

So to follow this tutorial we need to assume you have a working understanding of HTML as the implementation of Schema markup involves changing the code of your site, so if you’re not comfortable doing this, you can try using Google’s Structured Data Highlighter, which can be found in Webmaster Tools.

The basic structure for Schema markup is to tell the robot first of all that what it’s about to read is a “Thing”, then you say what “Kind” of thing it is, and then the “Properties” that make up the thing.

For this let’s take the idea of a simple baking website:

This simple page has a header with the site title, a navigation menu, the recipe, and a footer with contact details. And we’re going to Schema-ise it.

The first thing to do is to head over to Schema.org and have a look at all the different types of item you can markup, and find the one relevant to your site, which in our case is a recipe.

Within this entry you can see all the different “properties” that are relevant to your recipe, such as cookTime, prepTime, cookingMethod, ingredients etc.

Then based on your website, identify which properties you are going to need, which in our case would be:

• name
• recipeYield
• recipeIngredients
• recipeInstructions
• image

Make a list of these properties as we’ll be coming back to them later.

So the HTML for our page might look something like this:

[html]
<html>
<head>
<title>Awesome Baking! – Victoria Sponge Recipe</title>
<meta name="description" content="Victoria Sponge Recipe for six" />
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Awesome Baking</h1>
<div id="navbar">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Recipes</li>
<li>Popular</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="recipe">
<div class="left">
<h2>Victoria Sponge Cake</h2>
<h3>Feeds: 6</h3>
<h3>Ingredients</h3>
<ul class="ingredients">
<li>2 Eggs</li>
<li>200g Caster Sugar</li>
<li>200g Self Raising Flour</li>
<li>200g Butter</li>
<li>Jae to Taste</li>
</ul>
</div>
<div class="method">
<h3>Method</h3>
<ol class="method">
<li>Preheat oven to 180C, grease and line two 20cm cake tins.</li>
<li>Cream together butter and sugar, sift in flour, add eggs.</li>
<li>Bake for 25 mins.</li>
<li>Add jam and decorate with icing sugar.</li>
</ol>
</div>
</div>
<div class="right">
<div class="featuredImage">
<img src="/vicsponge.jpg" alt="Victoria Sponge" />
</div>
<div class="secondaryImages">
<img src="/vicsponge2.jpg" alt="Victoria Sponge Slice" />
<img src="/vicsponge3.jpg" alt="Victoria Sponge Mix" />
</div>
</div>
</div>
<div id="footer">
<p>Awesome Baking! 2 Cake Road, Sugar Town, GU44 1LC</p>
<p>01252 548774 | cakeforme@awesomebaking.co.uk</p>
</div>
</body>
</html>

[/html]

Obviously this is highly simplified! But it provides the basic framework for our purposes.

The next phase is in figuring out where the “thing” that we want to mark up is in the code. We know it’s the recipe, so the element that contains the whole thing would be

[html]<div id="recipe">[/html]

So we want to tell the robots crawling our site that everything inside this tag is a “thing” and we do this by adding “itemscope” to the tag.

[html]<div id="recipe" itemscope>[/html]

We then need to declare what “kind” of item it is, and this is achieved by providing a link to the itemtype on Schema, like so:

[html]<div id="recipe" itemscope itemtype="http://schema.org/Recipe">[/html]

So now Google et al know that everything contained within that div is related to a recipe.

Excellent.

Now we need to declare the individual properties that make up our recipe “thing”.

As we have already identified the properties applicable to our example, we just need to apply the same method as we did with the itemscope and itemtype with the “itemprop” declaration within the relevant tags.

So, the name of the recipe is “Victoria Sponge Cake”, hence:

[html]<h2 itemprop="name">Victoria Sponge Cake</h2>[/html]

Now, sometimes you’re going to need to declare the property midway through an element, so you simply use a span:

[html]<h3>Feeds <span itemprop="recipeYield">6</span></h3>[/html]

And you carry on like this until you have populated each individual property, could get quite tedious, but hopefully you’re using php, or a decent CMS, so it should only be a one shot thing!

Eventually you should end up with a code that looks like this:

[html]
<div id="recipe" itemscope itemtype="http://schema.org/Recipe">
<div class="left">
<div id="ingredients">
<h2 itemprop="name">Victoria Sponge Cake</h2>
<h3>Feeds:<span itemprop="recipeYield"> 6</span></h3>
<h3>Ingredients</h3>
<ul class="ingredients">
<li itemprop="ingredients">2 Eggs</li>
<li itemprop="ingredients">200g Caster Sugar</li>
<li itemprop="ingredients">200g Self Raising Flour</li>
<li itemprop="ingredients">200g Butter</li>
<li itemprop="ingredients">Jae to Taste</li>
</ul>
</div>
<div class="method">
<h3>Method</h3>
<ol class="method" itemprop="recipeInstructions">
<li>Preheat oven to 180C, grease and line two 20cm cake tins.</li>
<li>Cream together butter and sugar, sift in flour, add eggs.</li>
<li>Bake for 25 mins.</li>
<li>Add jam and decorate with icing sugar.</li>
</ol>
</div>
<div class="right">
<div class="featuredImage">
<img itemprop="image" src="/vicsponge.jpg" alt="Victoria Sponge" />
</div>
<div class="secondaryImages">
<img src="/vicsponge2.jpg" alt="Victoria Sponge Slice" />
<img src="/vicsponge3.jpg" alt="Victoria Sponge Mix" />
</div>
</div>
</div>
</div>
[/html]

Now to test it! Fortunately Google provides us with a helpful tool to do just that, the Structured Data Testing Tool, in which you can either place the raw HTML you wish to test, or the live URL of your page. It will then return with all the structured data it was able to pull from the code:

And there you have it really. As you explore the depths of Schema.org, you’ll realise that there is a wealth of semantic data out there that you can implement, for example as a minimum you should markup your contact details.

As ever, if you have any questions or you have a complicated example, give us a shout and we will do our best to help!