Better search engine results with Schema.org

Oct 22, 2015 Jason Ellis

Grok Interactive in and of itself is an ever evolving going concern. We are always iterating on new ideas and trying new things. We have the luxury of being agile in a nimble sort of way which allows us to try new things or pivot on an idea in short order.

So when we started working on a podcast we wanted to get the word out quickly via our blog what it was we were doing and that we thought everyone should give it a listen!

The issue is we noticed our search engine results page click through rate (SERP/CTR) was kinda poor. Our SERP presence was poor to say the least so our CTR suffered.

We needed to fix this and started to explore ways of doing so; Enter Schema.org.

Schema.org

Back in June of 2011 Schema.org was launched and pretty much immediately both Google and Bing! implemented rich snippets on their SERP using the metadata that could be gleaned from the Schema.org data added to the searched pages.

Schema.org gives you the developer a handy ability to convey a very large amount of information to search engines about what exactly an element represents and is implementable with very little effort.

There are a lot of different tags for various content types which in turn become "rich snippets" on your favorite search engine results; music, events, blog posts, products, recipes..etc. Anything you can think of can likely be expressed and better defined by Schema.org microdata and microformats. And doing so will only help your rankings.

Microdata

Schema.org provides you with a "microdata language" and a "schema vocabulary" that while not a true language in and of itself, is a way to make your HTML tags more machine readable which the major search engines then use to better optimize and sort your data for display purposes.

Your various webpages are easy for people to understand when they read them but search engines aren’t people and as such have a very limited and often broken understanding of what is actually being discussed on those pages. We need to help the machine by adding some additional information to the tags on the page in order to help the search engines better understand what the content you’re trying to display actually is in a relevant and useful way.

For example - Let’s say you’re creating a blog post. The HTML might look something like this:

<article> <header> <h1> Schema.org is pretty cool </h1> <address> by <a href= "mailto:jason.ellis@grok.rocks" > Jason Ellis </a> </address> </header> <div class= "content" > <p> .... article content .... </p> <p> .... article content .... </p> </div> </article>

This is dated and while modern search engines would read it and you would show up in the search results, your position in those results would be directly affected by the lack of Schema.org microdata. The simple fact of the matter is, the search engine back end logic can only do so much to intuit what this type of data is and how it should be displayed.

We need to give it some more information in order to convey exactly what it is we are trying to accomplish ~ lets help the search engine a bit:

<article itemscope itemtype= "http://schema.org/BlogPosting" > <header> <h1 itemprop= "headline" > Schema.org is pretty cool </h1> <address> by <a href= "mailto:jason.ellis@grok.rocks" > Jason Ellis </a> </address> </header> <div class= "content" itemprop= "articleBody" > <p> .... article content .... </p> <p> .... article content .... </p> </div> </article>

As you can see the tags themselves haven’t changed. We are still using the standard HTML5 elements and haven’t moved them around or anything. But we have added some Schema.org Microdata and schema vocabulary.

Let’s look at each one individually:

itemscope

<article _itemscope_ itemtype= "http://schema.org/BlogPosting" >

The "itemscope" microdata keyword added to a specific element tells the reader that we are going to be discussing a block of data contained within this specific tag. It’s your "Begin here" attribute which gives the system a starting point. There can be many on a page.

itemtype

<article itemscope _itemtype= "http://schema.org/BlogPosting" _ >

The "itemtype" keyword tell us is specifically which schema vocabulary we are talking about by linking to a schema vocabulary on Schema.org. You can (and it’s a good idea to) open that page up in your browser and read exactly what key/value pairs it can accept. More over there is generally a good example at the bottom of the page how your content should look once you have all the microdata in place.

In this case we are saying everything inside this itemscope is the itemtype "BlogPosting".

itemprop

<h1 _itemprop= "headline" _ > Schema.org is pretty cool </h1>

Once you have opened up the schema.org page on the itemtype you’re trying to better define you’ll see that there are a lot of different item properites that can be defined.

Each itemprop key/value pair directly defines what this given tag and it’s content is and how it relates to the information contained within.

Item props have an expected value type as defined by the Schema.org schema vocabulary page. Some can be text, some have to be specific types of other Schema.org data.

There is actually quite a lot of data that you can add to your pages which will get extremely specific about defining all the things according to Schema.org. How far you go down that particular rabbit hole is up to you but the more defined you get, the better it helps the various engines with SERP/CTR and SEO. So it’s a pretty good idea to make it happen.

Taking it a bit deeper, lets define the author;

Author

<article itemscope itemtype= "http://schema.org/BlogPosting" > <header> <h1 itemprop= "headline" > Schema.org is pretty cool </h1> <address itemprop= "author" itemscope itemtype= "http://schema.org/Person" > <meta itemprop= "email" content= "jason.ellis@grok.rocks" > by <a href= "mailto:jason.ellis@grok.rocks" itemprop= "name" > Jason Ellis </a> </address> </header> <div class= "content" itemprop= "articleBody" > <p> .... article content .... </p> <p> .... article content .... </p> </div> </article>

Here you can see I have told the system that the address tag is a new item scope and everything inside of it relates to the schema.org item type of Person.

I then added a meta tag with the itemprop of email to define the email of the author since the anchor tag which is a mailto actually defines the users name. There really is no limit to how deep you can go. Give it a try and see if your search results don't improve.

Testing

As with all things you need a way to test. I highly recommend using Google's testing tool, https://search.google.com/structured-data/testing-tool