Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Schema Markup for blog post w/ Gogle Tag Manager and Toolset Layouts

Last Update: 31. 12. 2019 , Category:

UPDATE!! This was a good idea, it worked well, but Google says do not use Structured data in Tag manager. So do it on your own risk! However, the structured data testing tool still show it well implemented.

USE INSTEAD: Custom Schema.org markup for WordPress Custom Post types

Schema.org markup is definitely good for SEO. Do you know google voice search? How to tell google which part of your page is content, which part is author name, creation date and more? Yes! With Schema.org.

Today I will show you, how to do the simple implementation of Schema.org markup to your blog posts with Toolset and Google Tag Manager with JSON-LD script.

Create layout for blog post with Toolset Views

Our simple layout have one row with featured image, second one with META data, post content and Simple Share Buttons.

toolset layout schema org

Create CSS classes for META informations in HTML structure

At first you need to markup your HTML code with CSS classes wich reflects the data inside.

<h1 class="post-title">Schema Markup for blog post w/ Gogle Tag Manager and Toolset Layouts</h1>
<p>Author: <span class="post-author">Aleš Sýkora</span> | Created: <span class="post-created">2018-07-30</span> | Updated: <span class="post-updated">2019-12-31</span> | Category: <span class="post-category">Toolset Views</span> | URL adress: <span class="post-url">https://toolset.wiki/article/schema-markup-for-post-tag-manager-toolset-layouts/</span></p>

And also markup the content cell:

post content cell css

Create DOM variables in Tag Manager with same CSS classes as your spans

Open Google Tag Manager and create your variable selectors. Variables > User-Defined Variables > NEW > DOM Element > CSS Selector

tag manager variable DOM cssimage variable tag manager

Create JSON-LD script in Google Tag Manager and trigger it on blog post pages

We are preparing the Schema called “TechArticle”. You can generate your schema with some Schema.org markup generator. Then put your schema JSON+LD into custom HTML tag in Google Tag Manager. Add your DOM Variables with {{Variable name}} and don’t forget the opening and closing script tag.

  (function () {
    var jsonData = {
"@context": "http://schema.org",
"@type": "TechArticle",
"dependencies": "toolset plugins, wordpress",
"proficiencyLevel": "Beginner",
"author": "{{Post author}}",
"datePublished": "{{Post created}}",
"datemodified": "{{Post updated}}",
"mainEntityOfPage": "True",
"headline": "{{Post title}}",
"articleSection": "{{Post category}}",
"image": {
"@type": "imageObject",
"url": "{{Post image}}",
"height": "1200",
"width": "630"
},
"publisher": {
"@type": "Organization",
"name": "Toolset Wiki",
"logo": {
"@type": "imageObject",
"url": "https://toolset.wiki/wp-content/uploads/2018/07/toolset-wiki-logo.png"
}
},
"articleBody": "{{Post content}}"
};
    var el = document.createElement('script');
    el.type = 'application/ld+json';
    el.innerHTML = JSON.stringify(jsonData);
    document.head.appendChild(el);
  })();

json ld script schema.org

Then you need to setup the triggering of the tag. In our case it’s every time the page has URL prefix “/article/”.

tag manager schema blog trigger

You are almost done. Save and publish your Tag Manager container and try to test the structured data with Google Schema testing tool. In my case, it is all good.

schema tech article markup

Did you successfully implemented your schema with Toolset? Tell me in the comments below!

Support Us via our Affiliate link!

Schema pro logo

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!