Arin Adamson
By Arin Adamson | SEO, Web Dev | September 3, 2014

More on Schema: What are Rich Snippets?

What is Schema.org?

When you browse a website and read the information presented to you, you can typically decipher what the text, information, pictures and videos all mean. That’s because you are an intellectual human being. Website crawlers, such as Google, Yahoo and bing on the other hand, are not. Crawlers do not have the capacity to decipher what everything means without a guiding hand. With the HTML 5 roll-out came a new feature to help guide these search engines and feed them the correct information they strive for. This new mark-up is called Schema.org. We’ve written about schema before, but I want to explore it in some more depth.

What do search engines do with the more detailed information ascertained from schema mark-up? They provide their users with richer search results that have more information. Google calls the more detailed information “rich snippets”. When you do a search on Google for a recipe such as bang bang shrimp tacos (one of my favorites) Google will display a few results, with pictures, reviews and even information on the company who own the website. This is all possible through the use of schema mark-up.

Bang Bang Shrimp Tacos Rich Snippet Search Result

What’s the benefit? To search engine algorithms there is no direct advantage. Matt Cutts, Google’s designated talking head for everything Google-ranking, states that schema.org does not necessarily give a ranking boost. So, Google’s algorithm does not give a boost simply because you have schema mark-up. However, the benefit for search engines lies with the increase in traffic and better targeted users on your website. Because you are providing more information to a search engine user before they land on your page, the user is able to decide what search results better fit their needs. Your website also tends to stick out from the rest in the search results.

The majority of live websites today are still behind on their schema.org implementation. A search listing that displays more information tends to be noticed faster. Searching for a product on Google can yield results that contain star reviews, number of reviews, availability and price. Anything that can help you to be noticed faster than your competitors is worthwhile.

Video Card Rich Snippet Search Result

As the internet evolves, schema.org will be increasingly important not just for search engines but also for crawler engines who database micro-data and then provide that micro-data to be used for aggregate data sources.  Your website and website’s data could essentially end up on a directory or information feed website without lifting a finger. Free advertisement is always good advertisement.

How to implement Schema.org into Your Website

If you are a web developer or know your way around HTML, schema.org is fairly easy to get the hang of. I will cover the basics to help get you started on your path to schema mark-up domination. In the examples below I will be using a page about the movie Avatar.

<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Itemscope and Itemtype

Before you mark-up the micro data, we will need to classify what this information is about. We classify the information by marking up the containers of the micro-data. This is what is referred to as defining an item.

Add the itemscope element to your container html tags that enclose the information. The itemscope element identifies the html with-in the div block as information associated with an item.

<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Now we must classify this block of data designated to be used as micro-data. To do this, add the itemtype attribute after the itemscope element. Define the itemtype attribute with the correlating item type url from the schema.org type hierarchy. In this example https://schema.org/Movie is the itemtype we want to use.

<div itemscope itemtype=”https://schema.org/Movie”>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Itemprop

Now that we have classified this block of data pertaining to a movie, we want to label all the bits of information we can. If you go to https://schema.org/Movie, you will notice that we can associate a lot of labels or properties to a movie item. The html in our example allows us to define a name, director, genre and trailer.  To do this we use the itemprop attribute and assign the defined property on https://schema.org/Movie with the correct data.

<div itemscope itemtype=”https://schema.org/Movie”>
<h1 itemprop=”name”>Avatar</h1>
<span> Director: <span itemprop=”director”>James Cameron</span> (born August 16, 1954)</span>
<span itemprop=”genre”>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop=”trailer”>Trailer</a>
</div>

To apply the correct information for the director property we had to add <span> tags around “James Cameron”. The span tags will not change the output of the html, which makes them a convenient method for schema mark up implementation.

Another method is to use a <meta> tag like so

<meta itemprop=”director” content=”James Cameron”>

Embedded Items

In some cases, we can define an item with-in an item property. In this example, the director can also be used as the item type Person. This allows us to define James Cameron as a Person item, while simultaneously linking him as the director for the movie item.

<div itemscope itemtype=”https://schema.org/Movie”>
<h1 itemprop=”name”>Avatar</h1>
<div itemprop=”director” itemscope itemtype=”http://schema.org/Person”>
Director: <span itemprop=”name”>James Cameron</span> (born <span itemprop=”birthDate”>August 16, 1954)</span>
</div>
<span itemprop=”genre”>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop=”trailer”>Trailer</a>
</div>

Testing Your Mark Up

Google provides a great tool in webmaster tools that gives you a preview of your rich snippet search result, along with a list of the items defined in the HTML. They also provide a tool that enables you to paste a page url and highlight content on a web page for schema mark-up. The tool then generates the HTML for you to paste into the web page.

Google Structured Data Testing Tool

Google Structured Data Markup Helper

Advanced Class and More Information

For more information or to continue your education on schema markup, visit https://schema.org/docs/documents.html. This provides you with all of the documentation on schema mark-up you might ever need.

background dots

Related Topics

Mastering Your GTM Pt 2: Techniques on How to Improve your GTM

by Ryan Rosati

In part 1 of this series, Master your GTM Pt 1: Auditing Your Google Tag Manager in 3 Steps, I showed you how…

Programmatic Advertising Unpacked: Why You Need it in Your Digital Strategy

by Nick Rennard

Marketers understand the importance of incorporating a digital strategy—leveraging various channels to achieve their performance marketing efforts—into their omnichannel marketing mix. Historically, advertisers…

Navigating Your GA Part 1:
3 Tips for Understanding Your Audience

by Rebecca Berin

So, you’ve spent all this time working on creating the perfect site in hopes it will resonate with your audience and ultimately convert…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint