Schema Markup for SEO: Beginner’s Guide with Examples for 2018

3
SHARES
With our detailed beginner's guide with examples, learn to implement Schema Markup in the easiest and fastest way

When I started this blog, I found it extremely difficult to understand Schema Markup for SEO and if you are here, I know how you feel. But, no need to worry cause I know your pain and have made this guide very easy to understand and I am sure you’ll be up and ready to implement it as soon as you are done reading this article in full. I have added very easy to understand examples in this Beginner’s Guide to Schema Structured Data.

Remember that even AMP pages require Schema Markup. If you have implemented AMP on your pages, you should check our guide on making a custom theme for AMP on WordPress.

Schema Structured Data: Introduction

Schema.org’s structured data was a result of major search engines (Google, Bing, Yandex, Yahoo, etc.) joining hands together. The need arose when they finally realised years earlier that search engines aren’t as smart as humans. The classic example of this given in Schema.org’s documentation is that of the term “Avatar.” It could be a forum avatar (profile picture) or the awesome Sci-fi movie. A search engine could find it hard to differentiate between the two, but with Schema Markup, you could just use the following code:-

<span itemscope itemtype="http://schema.org/Movie">
     <h1 itemprop="name">Avatar</h1>
</span>

And, search engines suddenly fall in love with you for making their work easier by telling them it’s the movie you are talking about.

Schema Markup Advantage: Rich Snippets

Apart from the obvious ranking benefits, using Schema Markup on your website has many perks among which the main is Rich snippets and Sitelinks Searchbox on Google SERPs (Search Engine Result Pages).

Image showing Sitelinks searchbox on Google SERP
Moz’s Sitelinks Searchbox showing on SERP

Is Schema Markup important for SEO?

As of now, a BIG YES! As I already explained, search engines are not yet smart enough and have a long way to go. So, right now, Schema Markup is definitely a ranking factor and needs to be a part of your SEO strategy. But, with the recent advancements and AI (Artifical Intelligence) excelling at an amazing speed, in the future, search engines will get smarter and maybe then, Schema markup may cease to be an important factor.

Getting started with Schema Markup for SEO

itemscope, itemtype and itemprop are the elements for Schema.org markup. If you get a hang of it, half of the work is done. Keep reading to understand each of them in detail very easily.

itemscope

itemscope is the starting point. Much like you tell your browser, you are starting HTML coding with the <html> tag, itemscope tells the search engines that you are going to start defining something to make its work easier. So, <div itemscope> would mean you have started the markup and are inviting search engines to look into them. But, this is incomplete, because you have told the search engines you are defining something, but not what exactly. This is where itemtype comes in.

itemtype

itemtype usually comes quickly after itemscope to define what is it that you are going to define in the <div itemscope>. So, <div itemscope itemtype="http://schema.org/Movie">...</div> would mean anything inside that <div> pertains to a movie. But, what movie exactly? This is where itemprop comes in.

itemprop

itemprop means a property of an itemtype. On going to http://schema.org/Movie, you’ll see a lot of properties under different headings including Properties from Movie, Properties from CreativeWork, Properties from Thing and you are good to use any of these properties and if you are wondering why there are many such headings, it’s because Movie is a Creative work and Creative work is a thing. To understand in detail, check the code below.

<div itemscope itemtype="http://schema.org/Movie">
     <h1 itemprop="name">Troy</h1>
     <span>Actor: <span itemprop="actor">Orlando</span></span>
</div>

So, with a little help from Schema, we are able to tell the search engines that we are talking about the movie Troy starring Orlando. Now, just for the sake of this guide, instead of his full name Orlando Bloom, I am gonna use just Orlando, because that now creates a confusion as Orlando could be a name or the place. This is where Schema.org’s embedded items comes in.

Embedded Items

Now, in the above example, we have to tell the search engines that we mean the person (by the name) Orlando and not the place. So, here’s how the code would look like:-

<span itemprop="actor" itemscope itemtype="http://schema.org/Person">Orlando</span>

With this code, we are defining a new itemscope which pertains to the actor of the movie. And, the actor being a human has the itemtype Person. Now, much like the Movie itemscope, the Person itemscope has properties of it’s own. Since, it’s the name of the person, we could add that too, like this:-

<span itemprop="actor" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">Orlando</span>
</span>

Our completed code will look like this:-

<div itemscope itemtype="http://schema.org/Movie">
     <h1 itemprop="name">Troy</h1>
     <span itemprop="actor" itemscope itemtype="http://schema.org/Person">
          <span itemprop="name">Orlando</span>
     </span>
</div>

Schema vocabulary: How to markup?

The Schema vocabulary is extensive and can be very confusing for a beginner. Here are the steps to start marking up from scratch:-

Step 1. Search Schema.org

You can check the full Schema vocabulary or search for your term on schema.org. For eg:- if you are going to write about about a game, search for game and you will find it here. And, check the properties available. So, you could begin with something like this.

<div itemscope itemtype="http://schema.org/Game">
     <h1 itemprop="name">Far Cry 4</h1>
</div>

Step 2. Search the vocabulary for properties applicable

So, for the game you could add the publisher and on the schema page, you will find other properties like gameLocation which talks about the fictional location of the game.

Step 3. Confirm itemprop’s applicability

So, we do already have the properties ready. Now, we need to check if they can be applied. To do this, for eg:- in case of the gameLocation, go to the Schema page for that is http://schema.org/gameLocation. Here, there are two things you should check.

Step 3.1. Values expected to be one of these types

On checking under Values expected to be one of these types, we see the value can be a URL too, so, if it’s an online game, you can also place it’s URL too instead of the fictional place it is taking place in.

Step 3.2. Used on these types

On checking under this heading, we find gameLocation can also be used if the itemscope is VideoGameSeries apart from using it for a Game’s itemscope.

So, for the game Far Cry 4, the markup would look like this:-

<div itemscope itemtype="http://schema.org/Game">
     <h1 itemprop="name">Far Cry 4</h1>
     <span itemprop="publisher">
          <span itemprop="name">Ubisoft</span>
     </span>
     <span>Game Location: 
          <span itemprop="gameLocation">Nepal</span>
      </span>
</div>

Test Schema Markup with Structured Data testing Tool

As you can see, code almost doubles after the markup. So, it’s easy to make some mistakes here and there, but you can always test your Schema markup with Google’s own Structured Data testing Tool and you can fix any errors.

Conclusion

Schema Markup is a very important step to be implemented for all websites and no matter how new or old your website is, if you still don’t have it implemented in 2018, this is the right time. And, as always, leave your doubts below and I’ll get back to you ASAP.

Share this article with your friends:-

3
SHARES
Category: SEO

Like it? Tell us about it.

Your email address will not be published. Required fields are marked *