Aleš Sýkora wrote

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

30. 7. 2018 in

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 markup for WordPress Custom Post types 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

Today I will show you, how to do the simple implementation of 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">[wpv-post-title]</h1>
<p>Author: <span class="post-author">[wpv-post-author format="link"]</span> | Created: <span class="post-created">[wpv-post-date format="Y-m-d"]</span> | Updated: <span class="post-updated">[wpv-post-date type="modified" format="Y-m-d"]</span> | Category: <span class="post-category">[wpv-post-taxonomy type="toolset-component"]</span> | URL adress: <span class="post-url">[wpv-post-url]</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 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": "",
"@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": ""
"articleBody": "{{Post content}}"
    var el = document.createElement('script');
    el.type = 'application/ld+json';
    el.innerHTML = JSON.stringify(jsonData);

json ld script

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Show Oxygen Element by current language with WPML
26. 4. 2021 in ,
When you use WPML with Oxygen Builder and use 1 template for all languages, then you propably want to display/hide elements conditionally. And of course you can. Use the WPML’s filter wpml_current_language to get current language code. Then use the if function to return value you want. I am returning the language code and then […]
Read More
Aleš Sýkora wrote
Add icon to the menu with custom SVG
2. 4. 2021 in
If you need to add icon to the menu item in WordPress you can find many tutorials using fontawesome, plugins or other icon packs embedded from other sites. For my purposes – loading of more external scripts is not good solution. So when I need to add my custom icon to the menu I do […]
Read More
Aleš Sýkora wrote
Tracking Toolset Forms in Google Analytics with Google Tag Manager
7. 8. 2018 in
What if you want to track your Toolset Forms submissions with Google Analytics Events? See how to do this with Google Tag Manager quickly.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram