Understanding Schema.org Structured Data
What is metadata and why should you care about it?
Metadata is data that describes other data. Though the ideas are old, the implementation of metadata has primarily been in the last five years. Though each method is a little different, each is structured markup language (like HTML) that helps computers better identify and classify what things are.
Metadata helps give better meaning to web pages. Search engines are able to parse and classify the information found in metadata. This is of some benefit to search ranking, but how much is not known.
One of the most widely used metadata structures is Schema.org, which was a joint initiative launched by Google, Bing, and Yahoo in 2011.
Schema markup is what enables rich snippets in Google search results. Those are the little pictures next to certain search results, like recipes.
Does Your Website Already Have Schema.org Markup?
Some WordPress sites may have Schema.org structured markup in their source code. Certain themes and plugins attempt to insert some relevant metadata. You can test any page on the web for metadata using Google’s Structured Data Testing Tool. This tests your URL or code block not only for Schema.org markup, but also Microformats, or any other metadata that Google uses.
Bing has a similar free tool, their Markup Validator, which tests for Schema, Microformats, RFDa, and Facebook OpenGraph metadata.
These will show you what metadata is in place, or what errors are encountered.
Understanding Schema Markup
If the idea of metadata is completely new to you, a good place to begin is on the Schema.org Getting Started page.
Schema markup works alongside regular HTML, and like HTML, it follows a logical hierarchy. The itemscope property indicates that everything nested inside that element relates to that element. Itemtype indicates what type of thing the block of HTML is describing. Defining the itemtype helps search engines and computers reduce ambiguity, because sometimes the same word can describe several different things.
Itemprop describe the properties of an itemtype. These nest inside the itemtype element.
In cases where an itemprop cannot be marked up for display, you can use meta tags to indicate a value. These should be used sparingly, and only used when the information cannot otherwise be marked up in regular HTML.
Although there are thousands of ways that Schema microdata can be marked up, it’s probably most beneficial to show you a few practical examples, so you get the idea.
Sample #1: Marking Up A Review in Schema
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">XYZ Company delievers what they promise, on time, and on budget.</div>
<p>Published <span itemprop="datePublished">2014-12-19</span></p>
<meta itemprop="dateModified" content="2014-12-19" />
<meta itemprop="url" content="http://www.reviewsite.com/review-1/" />
<meta itemprop="name" content="Review of XYZ Company by Jane Customer" />
<meta itemprop="author" content="Jane Customer" />
<meta itemprop="image" content="http://theurl.com/path-to-image/the-image.jpg" />
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="reviewCount" content="2" />
<p>Out of <span itemprop="ratingCount" content="2">2</span> ratings,
this business has a <span itemprop="ratingValue" content="5">5</span> star average.</p>
</div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<p>See <span itemprop="name" content="XYZ Business">XYZ Business</span> at
<a itemprop="url" href="http://www.xyzbusiness.com">their website link</a></p>
</div>
</div>
In this example, we markup a review by a customer. For the parts we can easily encode in HTML, we can use span elements, as these do not change the layout of the page. For information that is cumbersome to display on the page, we have used meta tags. Notice that you can nest one itemscope inside another, if the particular schema allows it.
You can find the entire list of Schemas on the Schema.org site.
Sample #2: Marking Up A Recipe in Schema
<div class="recipe" itemscope itemtype="http://schema.org/Recipe">
<h3 itemprop="name">Your Recipe</h3>
<p>By <span itemprop="author">John Doe</span></p>
<meta itemprop="datePublished" content="2015-03-09" />
<img src="http://website.com/path-to-image/recipe-image.jpg" title="" alt="" itemprop="image" />
<ul class="ingredients">
<li itemprop="ingredients">12 oz butter<li>
<li itemprop="ingredients">24 oz brown sugar</li>
<li itemprop="ingredients">3 eggs</li>
<li itemprop="ingredients">1 oz vanilla</li>
<li itemprop="ingredients">1 oz baking soda</li>
<li itemprop="ingredients">3 cups flour</li>
<li itemprop="ingredients">20 oz chocolate chips</li>
</ul>
<p><strong>Prep Time: </strong><time datetime="PT5M" itemprop="prepTime" >5 minutes</time><br />
<strong>Total Time: </strong><time datetime="PT20M" itemprop="totalTime">20 minutes</time></p>
<span itemprop="recipeInstructions"><p>Pour all the ingredients except for flour and chocolate chips into a bowl and beat until smooth. Add flour and mix. Stir in chocolate chips. Roll dough into 1 oz balls and place on cookie sheet. Cook for 7 to 9 minutes at 350 degrees. Let cool and serve.</p>
<div class="video-wrap">
<div class="youtube-cont">
<iframe width="892" height="503" src="http://www.youtube.com/embed/JKjmnbjQmO0" frameborder="0" itemprop="video" allowfullscreen></iframe>
</div>
</div>
</span>
<p><span itemprop="description">The Chocolate Chip Cookie is an American classic. Who can say no to that gooey chocolate?</span></p>
</div><!-- End Recipe -->
The Schema markup for recipes is similar to that of the review, but let’s take a look at a few unique properties.
You will not be able to take advantage of rich snippets in search results unless you include an image marked itemprop="image". If you include schema microdata for reviews, this information may also show up for Product and Recipe schemas, although it is not guaranteed to show up. You can add a video to Recipe schemas as well.
The properties listed in the example above are the minimum you need to include to trigger rich snippets for recipes. The prepTime and totalTime itemprops are written in ISO 8601 format, which sounds like gibberish to me, too. All you need to know is if you want to write two hours and four minutes, you’d write that like PT2H4M. The P stands for period (the duration) and the T stands for Time (hourly time).
The itemprops ingredients, recipeInstructions and description should be included, either as HTML or as meta tags.
There’s many different schema you can experiment with using, if you are so inclined. There is a list of the whole hierarchy at the Schema.org site.
It is worth noting, if you have a Google Webmaster Tools account, you can see how Google sees all of your site’s structured data by logging in to the site you want to analyze, and looking under Search Appearance > Structured Data.
