Learn how to easily implement structured data (schema.org) in the JSON-LD format with Google Tag Manager. These are the slides from my talk at SEO-Day 2017 in Cologne, Germany.
15. @rebelytics
Our dictionary provides us with detailed information
about the properties we can use to describe each entity
and the values that these properties can take.
30. @rebelytics
5 simple steps
1. Pick a data type that we want to implement on a certain page type
2. Create a JSON-LD script with the properties we want to describe
31. @rebelytics
5 simple steps
1. Pick a data type that we want to implement on a certain page type
2. Create a JSON-LD script with the properties we want to describe
3. Create the GTM variables we need for the values we want to include
32. @rebelytics
5 simple steps
1. Pick a data type that we want to implement on a certain page type
2. Create a JSON-LD script with the properties we want to describe
3. Create the GTM variables we need for the values we want to include
4. Create a GTM tag that injects the JSON-LD script with the values into the page
33. @rebelytics
5 simple steps
1. Pick a data type that we want to implement on a certain page type
2. Create a JSON-LD script with the properties we want to describe
3. Create the GTM variables we need for the values we want to include
4. Create a GTM tag that injects the JSON-LD script with the values into the page
5. Debugging and testing
35. @rebelytics
Google’s Search Gallery is a good starting point
to find data types that are supported by Google
https://developers.google.com/search/docs/guides/search-gallery
38. @rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types and properties in future
39. @rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types and properties in future
➔ Other machines process and use structured data
40. @rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types and properties in future
➔ Other machines process and use structured data
Let’s start with an example!
44. @rebelytics
➔ On our example page, we
also have job title, phone
and fax numbers, email
address, postal address,
languages spoken, etc.
➔ All of the above are
supported by schema.org:
https://schema.org/Person
46. @rebelytics
Let’s mark up everything that’s on the page and supported by schema.org:
➔ address
➔ e-mail
➔ fax number
➔ image
➔ job title
➔ name
➔ telephone
➔ url
➔ works for ...
➔ social profile links
48. @rebelytics
How I do it: Copy an example script from
Google’s Search Gallery and manually
adjust and expand it.
49. @rebelytics
The values here are represented by GTM variables, which leads us to the next step:
Creating the Google Tag Manager variables we need.
Tool tip:
https://technicalseo.com/seo-tools/schema-markup-generator/
52. @rebelytics
GTM variables
➔ On our example website, we have thousands of lawyer profile pages
➔ We can’t create an individual script for each page, so we use one script for all
pages and add the values dynamically with GTM variables
53. @rebelytics
GTM variables
➔ On our example website, we have thousands of lawyer profile pages
➔ We can’t create an individual script for each page, so we use one script for all
pages and add the values dynamically with GTM variables
➔ For this implementation, there are two variable types we can choose from:
◆ DOM element variables
◆ Data layer variables
54. @rebelytics
Option 1: DOM element variables
➔ DOM element variables can be used to extract elements from pages using
CSS selectors
https://www.w3schools.com/cssref/css_selectors.asp
55. @rebelytics
➔ You can identify the CSS selector of an element using Chrome’s Developer Tools
(Right click on element > Inspect > Right click on selected HTML > Copy > Copy selector)
Option 1: DOM element variables
60. @rebelytics
Option 2: Data layer variables
➔ The data layer is a JavaScript object on the page that contains information
that can be accessed by Google Tag Manager
61. @rebelytics
Option 2: Data layer variables
➔ The data layer is a JavaScript object on the page that contains information
that can be accessed by Google Tag Manager
➔ The data layer is useful for lots of different applications, for example
Enhanced Ecommerce Tracking with Google Analytics
62. @rebelytics
Option 2: Data layer variables
➔ The data layer is a JavaScript object on the page that contains information
that can be accessed by Google Tag Manager
➔ The data layer is useful for lots of different applications, for example
Enhanced Ecommerce Tracking with Google Analytics
➔ The data layer normally has to be set up on the website itself and not
through Google Tag Manager
63. @rebelytics
In our example, we pass some of the data that we cannot extract
with the help of DOM element variables via the data layer
64. @rebelytics
We can then create a data layer variable in Google
Tag Manager for each value we want to access
65. @rebelytics
On our example page, we use a
combination of DOM element
and data layer variables to
populate the JSON-LD script
70. @rebelytics
We can now publish this and test it with Google’s
Structured Data Testing Tool
(https://search.google.com/structured-data/testing-tool/u/0/)
76. @rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Searchbox, Events, Jobs, Articles, Products, etc.
77. @rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Searchbox, Events, Jobs, Articles, Products, etc.
➔ For some of the simpler data types, you won’t even need GTM variables
78. @rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Searchbox, Events, Jobs, Articles, Products, etc.
➔ For some of the simpler data types, you won’t even need GTM variables
➔ For ecommerce sites, you can even use the same data layer values for Enhanced
Ecommerce Tracking and product JSON-LD
84. @rebelytics
➔ JSON-LD implemented with
Google Tag Manager is only
accessible for programmes
that render the page and
execute the GTM script
85. @rebelytics
➔ Even if Google Tag Manager is often the easiest way to implement things on a
page, it is not always the best way. Speak to your dev team first.
@rebelytics