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 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">[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 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!

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
Modify ‘ASAP’ label in Iconic Delivery Slots
5. 1. 2021 in
You can use this code snippet to change the label for 'ASAP' when using ASAP delivery.
Read More
Aleš Sýkora wrote
Disable scrolling in Iframe when scrolling page
23. 11. 2020 in
Disable scroll until you click into iframe.
Read More
Aleš Sýkora wrote
Display only first image from multi value field in toolset
22. 7. 2020 in
I am using a custom field called “product images” where I upload images for my custom post type Coffee machines. When I want to show the image in the archive then, I just want to display the first Image. Not all of them. What happen is that toolset field automatically display all images from the […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram