Schema Markup Guide : Everything You need To Know About this

By Ajay Malik on September 11, 2018

Schema Markup Guide : Everything You need To Know About this

Getting Traffic from Google is every blogger dream, that they saw from there first day of blogging. But With Changing Google Algorithm it is going to difficult day by day. Only a few bloggers rank on google.
Don’t worry I’ve there is something that can help you rank on Google which is known as Schema markup.

What is Schema.org ?

As we Know, the Internet is full of information which increases day by day. handling so much information isn’t an easy task.
Each website uses different HTML tags and specification. Which make it difficult for a developer to understand those pages for the various tool. So they define a common standard to markup HTML pages. Which help Internet to fetch those pages without any problem.

schema markup tutorial

According to Schema.org:

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Schema.org help internet to understand data available for webpages by using different markups. there are different Schema markup available for different types of pages.

Why Schema markup?

Let’s understand Schema Markup With This easy Example:
In Ancient Time, When Humans Don’t Have Any Standard to Measure Length we use the various different method to measure length. by comparing various ropes we do so.
But Nowadays, we’ve our international standard to measure everything such as the meter for length, Kelvin for temperature and kilogram for weight. This made our life easy and help all people worldwide to measure various quantity.
Similarly, in case of internet. Different Website uses different Tags and naming to define there HTML. Which make it hard for developers to fetch data from there website ( For Example: When we put a link in twitter Post it automatically show Post’s image and description because it fetches data from the website).
That’s why they define an international standard called schema.org.

Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, “Hey search engine, this information describes this specific movie, or place, or person, or video”—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

Understanding Schema markup

We use Class tag To Decorate HTML tags and add CSS to them, Similarly, Schema markup Use various attribute To Define Your HTML Content Such as itemscope, itemtype and itemprop. Let’s Understand each of them one by one:
This example if from Schema.org it helps you to understand schema markup easily.
Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

<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>

Human can Understand Above data easily, but for Bots and search Engine it is hard to Undertand above data, they don’t know which one of above is movie and which one director name.
First, we use itemscope which tell a search engine that this code contains something valuable information.
To begin, identify the section of the page that is “about” the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

<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>

By adding itemscope, you are specifying that the HTML contained in the <div>…</div> block is about a particular item.
Now search engine knows that above code contains something important information. but it Didn’t know what is this information about.
So, We use itemtype to tell google that this page about movie.
We can specify the type of item using the itemtype attribute immediately after the itemscope.

<div 
itemscope itemtype="http://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>

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.
But Still, Search Engine Didn’t Know Which one is movie name and Which one is Director.
What additional information can we give search engines about the movie Avatar? Movies have interesting properties such as actors, director, ratings. To label properties of an item, use the itemprop attribute. For example, to identify the director of a movie, add itemprop=”director” to the element enclosing the director’s name. (There’s a full list of all the properties you can associate with a movie at http://schema.org/Movie.)

<div 
itemscope itemtype ="http://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>

Note that we have added additional <span>…</span> tags to attach the itemprop attributes to the appropriate text on the page. &lt:span> tags don’t change the way pages are rendered by a web browser, so they are a convenient HTML element to use with itemprop.
Now Search Engine Knows That avatar is a movie whose Director is James Cameron and it is a science fiction movie whose trailer link is this.
So, Now Your Search Avatar Movie on Google It Will Show you Something like this:

image showing magic of structured data

Now You Know, how Schema markup helps Google To Understand Your Content better This is just a little example of structured there are hundreds of Schema markup available for different content Types.
You can Found All List of schemas Here.

Some of Most Popular Schemas used By blogger

Here a List of All Popular Schemas That can help you to understand Your content Better and also helps to get featured in Rich cards.

Markup Your navigation bar

Schema Markup will help you to markup your navigation bar which also helps you to get site links fast. Here how you can markup your navigation bar to get sitelinks fast:

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li>
</ul>

Markup your navigation bar will help you to get sitelink fast as well as tell search engine about your navigation element which help google to crawl your website better.
Markup isn’t enough sometime your top pages will automatically get featured in sitelink as shown in below image.

get sitelink using structured data

Markup Your Social Profile

You can markup your social profile to get featured in Rich Card. Below an Example, how your social profile get featured in Rich card:

social proile rich snippet

You can Markup Your Social Profile as Shown in below Image:

<span itemscope itemtype="http://schema.org/Organization">
  <link itemprop="url" href="http://www.your-company-site.com">
  <a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
  <a itemprop="sameAs" href="http://www.twitter.com/YourCompany">Twitter</a>
</span>

Tagging your Social Profile will help search engine to understand your company better.

Markup You Article

This is the most used schema by bloggers, It Help Search Engine to Crawl Your Contennt better as well as it help you to get featured in Featured snippet and Rich card.
There are many ways you can markup your article such as json-ld and by using webmaster. but Schema.org is the best way. It didn’t affect your article rendering in webmaster even after theme change.
Here your Your article looks like after adding Article Schema:

<div itemscope itemtype="http://schema.org/BlogPosting">
  <h2 itemprop="headline">Your Title Headline Goes Here</h2>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img itemprop="url" src="Your Featured Imahe URL Here"/>
    <meta itemprop="width" content="800"/>
    <meta itemprop="height" content="800"/>
  </div>
</div>

Above Code is for Non-Amp pages. For AMP Pages you’ll Need More that this code.

markup Your Website

Your Can Use website Markup Schemas to Get Searchbox in SERP for your website. With the help pf that searchbox people can directly search your website.
Here an Image Showing How your website Searchbox will look like (Shown in below Image):

searchbox schema mmarkup

You can Use below Code to add Website Schema In Your Website:

<div itemscope itemtype="http://schema.org/WebSite">
  <meta itemprop="name" content="Universal manual"/>
  <meta itemprop="url" content="https://www.universalmanual.com"/>
  <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="https://www.universalmanual.com/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

To get Searhcbox in your SERP your Website must rank on first position for your Website Name Keyword.

Breadcrumb markup

Breadcrumb are site navigation elements which tell the current position of user with respect to homepage. They Also help Search Engine To Crawl Your Website Better. Breadcrumbs are the most important part of a website.
You can use Breadcrumb markup to make your SERP result Better. here an Example of breadcrumb markup:

breadcrumb schema markup

use below Code to get Breadcrumb Schema Markup:

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' href='https://www.universalmanual.com/' itemprop='url'><span itemprop='title'>Home</span></a></span>
&#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='p-category' href='https://www.universalmanual.com/search/label/seo' itemprop='url'><span itemprop='title' rel='tag'>seo</span></a></span>

Above Example is taken from blogger in which we use label for Search navigation element. you can use anything you want.

More Famous Schema markup

There Are some other Famous Schema markup Such as Book, rating, products and many more. here You’ll find the list of all famous schema markup.

famous schema markup

FAQS : Regarding Schema Markup

Here some Most asked Question Regarding Schema markup:

Do I Need To Markup My Whole Page With WpHeader, Wpfooter and WebpageElement ?

Most of WordPress Theme Contain Schema Likes WpFooter, Wpheader and webpageelement. These schema are use to define that this part of website is Footer, this is header and this is whole page.But do you really need them? – I tried to ask the same question on various forums and found a perfect answer.

HTML5 conveys all this. The nav element = SiteNavigationElement; the footer element = WPFooter; the table element = Table etc., and the main element for the main content (mainContentOfPage).
So, you don’t need to add any of this schema if you are using basic HTML5 Tags such as < header>, <footer> and <main>.

Can I get Rich Snippet By Just using Schema markup ?

most bloggers think they can get featured in rich cards by just using Schema markup. but The Truth is very different.

To get featured in Rich Cards your Page must rank on first Page (Position doesn’t matter in some cases). When Your Post ranked on the first page then you can use schema markup to get extra benefits through google.

Can I get featured Snippet by using Schema markup ?

Featured Snippet is the 0th position on google. it doesn’t matter on what position your page on google. You just need to rank for the first page to get in the featured snippet.

featured snippet
Google Found the best answer among the top 10 pages to get a feature in the featured snippet. it found that most of the time featured snippet page didn’t contain any markup.

Is Article Schema Markup is Necessary ?

Most people this article schema markup is a must have a thing for a blogger. but The truth is, it doesn’t.

Article schema markup isn’t necessary for your website. if your website using basic HTML5 tags such as <article> and <main> than you don’t need Schema markup. it just helps google bot to crawl your website better. you can use Structured data helper in your google search console to markup your article without any coding.

Schema markup affect SEO ?

This is the main Question which finally comes in every blogger mind. is Schema markup really affect my SEO?

Schema markup directly Didn’t help your website to boost your SEO. It helps you to Improve Your SERP preview which increases Your CTR, as a result, your ranking increase. In short words, Schema markup affects your ranking.

Now Your Turn

As We Already Discussed Above how Schema markup helps Your Website Gain Ranking. Now its Your Turn To Markup Your Website With Structured data and boost Your SEO.
Schema markup is an International Standard to markup your content take benefit of this and Optimize your Content for Google.

One response to “Schema Markup Guide : Everything You need To Know About this”

  1. Thanks for sharing this very useful information.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

share Facebook Twitter