How to Add Dynamic Blog Schema using Google Tag Manager

You have to follow 5 simple steps to add dynamic schema generation code to blogs pages using Google Tag Manager or GTM.

1. Create a JSON-LD schema markup code for blog posts
2. Identify the field that will change in every post
3. Create variables in GTM to hold the value
4. Replace the values in schema code with variable
5. Add the schema code in custom html tag and fire on blog page

STEP 1: Blog Schema markup code

Copy the below JSON-LD blog schema markup code and paste in any editor. I love Sublime text 3

<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “BlogPosting”,
“mainEntityOfPage”: {
“@type”: “WebPage”,
“@id”: “https://Your-Blog.com/blog/BLOG-POST-URL”
},
“headline”: “BLOG POST HEADING”,
“description”: “SHORT DESCRIPTION OF THE BLOG POST CONTENT”,
“image”: “https://Your-Blog.com/BLOG-IMAGE.jpg”,
“author”: {
“@type”: “Person”,
“name”: “Your Name”
},
“publisher”: {
“@type”: “Organization”,
“name”: “Your Blog Name”,
“logo”: {
“@type”: “ImageObject”,
“url”: “https://Your-Blog.com/YOUR-LOGO.jpg”,
“width”: 200,
“height”: 200
}
},
“datePublished”: “2020-04-25”,
“dateModified”: “2020-04-30”
}
</script>

STEP 2: Identify the fields that change in every blog

STEP3: Create variables in GTM to hold the value

This is very simple and not required any coding skills. See below for the values we are using for each required field.

1. @id: We are using page url as the ID, because it’s unique in all website.
2. headline: We can use the meta title/title tag as the post heading.
3. description: We can use the meta description as the post description.
4. image: It’s the blog banner image. I am using open graph image in this time.
5. datePublished: Time at which the blog published.
6. dateModified: Time at which the blog last updated.

First one the “id” value:

We are using the post URL as the ID value. Google Tag Manager have default variable to hold the Page URL. So we can easily use that.
Variable name: {{Page URL}}

Second: Page Heading

We can easily access it from the meta title/page title tag. I am using the CSS selector option in the GTM DOM element variable to capture the page heading.

Element Selector: title

Variable name: {{Page Title}}

Third: Post Description

I am using the CSS selector option in the GTM DOM element variable to capture the meta descripton.

Element Selector: meta[name=”description”]

Variable name: {{Page Description}}

Fourth: Blog Image

CSS selector option in the GTM DOM element variable to capture the blog image URL.

Variable name: meta[property=”og:image”] Element Selector: meta[property=”og:image”]

Fifth: Blog Published Time

CSS selector option in the GTM DOM element variable to capture the blog published time.

Variable name: {{Blog Published Time}}
Element Selector: meta[property=”article:published_time”]

Sixth: Blog Updated Time

CSS selector option in the GTM DOM element variable to capture the blog updated time.

Variable name: {{Blog Updated Time}}
Element Selector: meta[property=” article:modified_time”]

STEP 4: Replace the dynamic values in schema code with new GTM variables

Your final code will be like below:

<script>
(function(){
var blogsch = {
“@context”: “https://schema.org”,
“@type”: “BlogPosting”,
“mainEntityOfPage”: {
“@type”: “WebPage”,
“@id”: {{Page URL}}
},
“headline”: {{Page Title}},
“description”: {{Page Description}},
“image”: {{Banner Image}},
“author”: {
“@type”: “Person”,
“name”: “Anoop Unnikrishnan”
},
“publisher”: {
“@type”: “Organization”,
“name”: “AnMize”,
“logo”: {
“@type”: “ImageObject”,
“url”: “http://anmize.com/wp-content/uploads/logo.png”,
“width”: 200,
“height”: 200
}
},
“datePublished”: “2020-04-25”,
“dateModified”: “2020-04-30″
}

var script=document.createElement(‘script’);
script.type=”application/ld+json”;

script.innerHTML=JSON.stringify(blogsch);
document.getElementsByTagName(‘head’)[0].appendChild(script);

})(document);
</script>

STEP 5: Add the schema code in custom html tag and fire on blog page

Add the final schema code to an HTML tag in GTM.

Setup the trigger only for blog posts page view.

Publish the container and test the page using Google Structured Data Testing Tool

You will get a result like below:

Feel free to add new blogs to your website, your GTM code will automatically add schema to your posts and helps you to get maximum visibility in search engines.

Still you are looking to customize this code? Do you want to add more dynamic fields to the code? Feel free to contact me, I can provide feel consultation to customize the GTM tags.