Article read time - 6 minutes

Schema markup is microdata that helps search engines display your page on SERP as a rich snippet format. Maximum search engines like Google, Yahoo, Bing use schema markup to show the best SERP result depending on users’ queries.  

Why you need to set up schema markup for your pages?

Basically, the HTML tags inform browsers how to show the data. Like, if you use <h1>How to make Pizza</h1>, then your browser will show “How to make Pizza” as the heading/title of your page. But the search engine does not have any idea about what the page actually contains? So, it is difficult for search engines to show the page for the relevant search query. But if you mark the title of this page as a recipe for Pizza making by using schema markup, search engines would show up your page for a relevant query.

Though schema markup has no direct impact on ranking, it helps to boost the clicks dramatically. It is proven that a product page with a review, offer price tabs on search results gets more clicks than a page with title and meta description only.  

How to Integrate Schema Markup on your website?

Create the Code: –

For the JSON-LD code, go to schema.org or https://developers.google.com/search/reference/overview page for creating the microdata.

Here I am using the data from https://developers.google.com/search/reference/overview

 From the left sidebar, you will find the codes for different pages like Article, Book, Course, Recipe, FAQ, Logo, Movie, Product, Event, Job Posting, etc.

google article

For example, I am taking the below code to set up schema markup for an article page (Article headline, Date published, Images, Date Modified ).

<html>

  <head>

     <title>Article headline</title>

<script type=”application/ld+json”>

    {

“@context”: “https://schema.org”,

“@type”: “NewsArticle”,

“headline”: “Losing Weight Before Your Big Day!”,

“image”: [

“https://www.lifewithlg.com/wp-content/uploads/2020/08/scale-403585_1280_850x433.jpg”

     

],

“datePublished”: “26 August 2020”,

“dateModified”: “”

    }

   

</script>

</head> 

<body>

</body>

</html>

 

To test the code, if there is an error, go to https://search.google.com/test/rich-results.

You can check if your page is eligible for rich results or there is an issue.

google rich results

Now it’s time to integrate the code through Google Tag Manager:

  • 1st, Create an account on GTM.
  • Then click on add new tag.
  • Tag Type- HTML
  • Paste the HTML tag.

Then,

  • Choose a trigger to select the pages where the code will be actionable.
  • Create a new trigger.
  • From the trigger configuration, “Select this trigger fires on” some pages.
  • As I am creating the tag here for a single page.

 I am selecting the trigger condition here: –

  • Page URL> Equals> The specific page URL.
  • Before triggering the code finally. Go to preview mode from the Google Tag Manager.

preview mode google tag manager

Then refresh your domain, a preview tab will appear below your page. And you can check that the code is integrated correctly.

tag manager test

If you found everything okay, then finally submit the code from the Google Tag Manager.

google tag manager submit

           The above process is for setting schema markup for a single page. Below I will discuss the method of setting up the schema for a couple of same type pages.

Let you are trying to set up schema for all your product pages together.

First, collect the JSON-LD code from – https://developers.google.com/search/docs/data-types/product

Here I am taking the code for Product Name, Image, Review & Offer.

<html>

 <head>   

  <title> ProductName </title>

    <script type=”application/ld+json”>

    {

“@context”: “https://schema.org/”,

“@type”: “Product”,

“name”: “”,

“image”: [

],

“description”: “”,

 

“review”: {

       

“@type”: “Review”,

       

“reviewRating”: {

“@type”: “Rating”,

“ratingValue”: “”,

“bestRating”: “”

       

“offers”: {

“@type”: “Offer”,

“url”: “”,       

“priceCurrency”: “”,

“price”: “”,

“priceValidUntil”: “”,

       

   }

 }

 </script>

</head>

<body>

</body>

</html> 

As no parameter is defined here. I will take every parameter value as a variable.

If I set “name”: “ProductName“,

Now I have to configure the variable “Productname”

 From the left sidebar of GTM: Go to variable> Create a user-defined variable. 

 Keep the variable name the same as the product name like “ProductName” here.

Keep in mind that it is case sensitive.

Choose a variable type to set up the variable. Select a DOM (Document Object Model) element.

gtm variable

Dom will help to extract information from every product page.

Choose the selection method as CSS selector.

css selector

In the element selector field, you have to enter the class which contains the product name of every item.

To get the class go to any product page and right-click on the product name.

Click on the inspect option and go-to elements.

As you inspecting on the product name, automatically, the particular code will be selected.

 The class will be visible in the bottom right corner of the page.

 Ex.

code

 Just copy the author bio and paste it into the element selector section.

 Repeat the same steps for the other section like Image, Review & Offer.

In this way, you can set up schema for a couple of pages within a single code by using Google tag manager.

EndNote:

In this competitive market, you should not miss any scope. Don’t forget to include Schema Markup in your search engine optimization strategy.

If you are a non-technical person, setting up schema using GTM can be difficult for you. You can use a plugin like RankMath to do it easily from the plugin setting or take help from the professionals. 

Leave a Reply
Comment policy: We value comments and the time that visitors to our blog spend to give feedback. Please note that all comments are manually moderated and any deemed to be spam or promotional will be deleted.