schema tree

How to Implement Schema Markup

Many times you have seen Google results with extra information that attracts and push you to click that

Many times you have seen Google results with extra information that attracts and push you to click that website link. That extra information can be in form of rating of a product, events information, Geo locations etc. Google name that extra information as “Rich Snippet” because it has information that those normal search snippets do not have. See the images below.

serp normal snippet

serp rich snippet

serp rich snippet

Have you ever wondered how this happens? How search engine find such information and show them in this systematic way?

This is something called Semantics Integrations which can be achieved by integrating micro-data (Schema Markup – recommended by search engines), micro-formats and/or RDFA.

In rest of the article you will learn;

What is Schema?

Schema is a markup, added to HTML of a webpage; that allow major search engines to develop their understanding for a webpage. For instance:

A website has two webpages. One page is about “Avatar – Movie” and other is about “Avatar – Icon (picture) representing a person”. When search engine crawls both the pages, how it will differentiate them?

Here comes in the Magical Schema Markup that does this job. It develops the semantics of a webpage and makes search engines able to store webpage context in their databases. Now on a user query most relevant page will be served.

What Schema Markup can do for Your Website?

Importantly;

  • Schema helps in increasing Click Through Rate
  • It allows search engines to develop context of your website and webpages
  • Search engines prefer such pages to show in their result pages
  • Much more

Schema Markup Brings more Traffic to Your Website

Yes! With schema you can enhance CTR of your webpages; resultantly your website traffic will increase. According to Search Engine Land data you can boost CTR and traffic to your website up to 30%.

Do not believe it? Think like a user. You are searching for a product or service e.g. “Hotels in Philadelphia”. You see two different results. A result with star rating and some extra information related to your query and other with normal Meta description.

schema implementation

Which website you will go for? Definitely the second one as it has information that is building your trust. You can achieve above results by implementing relevant itemtypes and itemprops on your webpage. See the code below.

schema code for rating

Learn how to Implement Schema Markup on your Website

Are you ready to boost your website traffic? Let’s grab the other bits. Don’t worry! It’s not a rocket science, its computer science ☺. Just follow the steps.

The most important thing; what markups you want to implement on your website?

First way is to explore Schema.org and find markups that suit to your website/pages. The easy way is to implement what your competitor has implemented, but, in better way.

The “First Way”

Open schema.org and find schema attributes that suits your webpage. schema org

The “Easy Way”

  • Find the top competitor which has implemented schema
  • Download and install Webbee SEO Spider on your computer
  • Enter competitors’ website URL
  • Start the crawl
  • Go to the schema tab

    seo spider schema tab

  • Right click the URL in table where schema has found
  • Select Schema Tree from the popup menu

    webbee schema option

schema tree

  • Download the schema

That’s it. Now you have schema information of your competitor. You can add other markups as well in your list that you think your competitors are not implementing but they are necessary to fully explain your webpage.

And now it is time to learn how to implement selected schema markups

Step 1

Go to Google Structured Data Markup Helper

google tool for schema

Step 2

Select desired markup type from options. Here you can see generic and commonly used types only (explore schema.org for full listing). Choose one of them according to your webpage type.

Let’s say I want to implement schema on my webpage https://www.eebew.com/spider/user-guide/optimized-seo-strategy/. That is an article page. So, I am selecting “Article” type.

Step 3

schema markups

Copy and paste article’s URL (in URL section) where you want to implement schema. You can also put HTML in HTML section instead of URL.

The page will load in markup tool and provide the platform to markup your webpage according to your input.

schema implementation page

Step 4

You can see two sections; data items on right side and web page on your left side. Now you just have to highlight the data to add markup.

In right section there are many data items, here I am going to explain main points one by one for your ease;

Name

When you highlight your page title, a pop up will appear and select ‘name’ that will represent as article title.

schema display

Author

Highlight author name and select ‘Author’. It will represent the name of the author who wrote this article.

Date Published

Highlight date of your article and select ‘Date Published’. It will represent the date when your article was published.

Image

If your article has an image highlights it and select ‘Image’. It is also the representation of the article image.

Article Section

Article section is the start of your article. Highlight from where your article is starting and select ‘Article Section’. You have to highlight same as for other data items according to your requirement.

schema implementation

Important: You can also add data items that are not present on your webpage (in my case) like date published, author and, importantly, your article URL which is not showing on your article. For this you can use “Add Missing Tags” option at the end of your right side.

add more schema markups

For Example I want to add URL. On click ‘Add missing tags’ button a new window will pop up.

schema implementation

Now I have to select tag type as ‘URL’ and paste my desired URL in ‘Add tag’ section. After adding it I just saved it and my URL has added now in data items section.

schema implementation

schema view

Step 5

Next step is to create html. Don’t worry! It’s also very simple. You just have to press red button “Create HTML” to convert it into HTML. When button pressed, it will show you HTML with schema markup code.

html with schema

In this section you can view the place where schema has implemented by clicking on yellow spot on your right side.

Step 6

Download the html code.

download html with schema

Step 7

Before making this page live you should verify this code in another free tool provided by Google Structured Data Testing Tool.

Open your webmaster tool and find “Structured Data Testing Tool” under “Home” in left navigation bar on your screen. You can see two options there; one is URL and 2nd is HTML. Choose what suits you.

Paste the html code that you have just downloaded.

schema testing with google rich snippet tool

Press the “Preview” button to see the results.

schema testing with google rich snippet tool

Everything is white? Congratulations! You have created your first error free schema. Just paste this code in your webpage and make it live.

Happy Marketing ☺

About Asim Mughal

Asim is the co-founder and DOP at Webbee Inc. He is a digital marketing expert and works with business owners to help them increase their revenue through effective online marketing techniques. He has co-created Webbee SEO Spider Tool.

19 thoughts on “How to Implement Schema Markup

Leave a Comment