Table of Contents
Schema markup is microdata that helps search engines display your page on SERP in a rich snippet format. Maximum search engines like Google, Yahoo, and Bing use schema markup to show the best SERP result depending on users’ queries.
Why do you need to set up schema markup for your pages?
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. However, the search engine does not know what the page 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 will show up on your page for a relevant query.
Though schema markup does not directly impact ranking, it helps boost the clicks dramatically. A product page with a review and offer price tabs on search results is proven to get more clicks than a page with a title and meta description only.
How do you 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
You will find the codes for different pages from the left sidebar, such as Articles, Books, Courses, Recipes, FAQs, Logos, Movies, Products, Events, Job Postings, etc.
For example, I am using the code below to set up schema markup for an article page (Article headline, published date, images, modified date).
<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>
Test the code
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 if there is an issue.
Now it’s time to integrate the code through Google Tag Manager:
- 1st, Create an account on GTM.
- Then click on add a 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.
- 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.
Then, refresh your domain. A preview tab will appear below your page; you can check that the code is integrated correctly.
Submit to Google Tag Manager
If everything is okay, submit the code to the Google Tag Manager.
The above process sets schema markup for a single page. Below, I will discuss the method of setting up the schema for several pages of the same type.
Let you set up a schema for all your product pages together.
First, collect the JSON-LD code from – https://developers.google.com/search/docs/data-types/product
I am taking the Product Name, Image, Review, & Offer code here.
<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 as the product name, such as “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.
- Dom will help to extract information from every product page.
- Choose the selection method as CSS selector.
- You must enter the class containing each item’s product name in the element selector field.
- To get the class, click the product name on any product page.
- Click on the inspect option and go-to elements.
- The particular code will automatically be selected as you inspect the product name.
- The class will be visible in the bottom right corner of the page.
Ex.
- Just copy the author bio and paste it into the element selector section.
- Repeat the same steps for the other sections like Image, Review & Offer.
This way, you can set up a schema for several pages within a single line of code using Google Tag Manager.
EndNote:
In this competitive market, you should take advantage of all scopes. Remember to include Schema Markup in your search engine optimization strategy.
Setting up schema using GTM can be difficult for a non-technical person. You can do it easily from the plugin settings with a plugin like RankMath or get professional help.