Implementing schema.org in the JSON-LD format with Google Tag Manager

@rebelytics
Implementing schema.org
in the JSON-LD format
with Google Tag Manager

@rebelytics@rebelytics
Implementing schema.org
in the JSON-LD format
with Google Tag Manager

@rebelytics
Schema.org is a vocabulary for structured data
@rebelytics

@rebelytics
schema.org can be used to describe:

@rebelytics
entities
@rebelytics

@rebelytics
relationshipsrelationships
@rebelytics

@rebelytics
and actions
@rebelytics

@rebelytics
schema.org was founded by
Google, Microsoft, Yahoo & Yandex
@rebelytics

@rebelytics
schema.org can be used in e-mails,

@rebelytics
and with all other types of documents.

@rebelytics
schema.org is a vocabulary, so
https://schema.org/ is our dictionary.
There’s no need to memorise any of it.

@rebelytics
Here’s an example for a page in our dictionary.

@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.

@rebelytics
JSON-LD is one of several formats that can be
used to encode schema.org

@rebelytics
Advantage of JSON-LD:
Does not have to be embedded into existing code
> easier to read & implement
@rebelytics

@rebelytics
JSON-LD in a separate script Microdata included in HTML tags

@rebelytics
Google Tag Manager allows us to easily add
JSON-LD scripts to all pages on a website

@rebelytics
Values can be populated with the help of
Google Tag Manager variables

@rebelytics
This means: One script for thousands of
pages with the same data type

@rebelytics
Let’s do it!
@rebelytics

What we need to do
Step by step

@rebelytics
5 simple steps
1. Pick a data type that we want to implement on a certain page type

@rebelytics
5 simple steps
2. Create a JSON-LD script with the properties we want to describe

@rebelytics
5 simple steps
3. Create the GTM variables we need for the values we want to include

@rebelytics
5 simple steps
4. Create a GTM tag that injects the JSON-LD script with the values into the page

@rebelytics
5 simple steps
4. Create a GTM tag that injects the JSON-LD script with the values into the page
5. Debugging and testing

Step 1
Pick a data type that we want to
implement on a certain page type

@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

@rebelyticshttps://developers.google.com/search/docs/guides/search-gallery

@rebelytics
But:
There’s no need to limit yourself to what Google supports

@rebelytics
But:
➔ Google will certainly support more data types and properties in future

@rebelytics
But:
➔ Other machines process and use structured data

@rebelytics
But:
➔ Other machines process and use structured data
Let’s start with an example!

@rebelytics
Google supports social profile
links for the data types Person
and Organization.

@rebelytics
Let’s have a look at what markup Google
suggests for the data type Person.

@rebelytics
Google suggests marking up the name of the person, a
URL that represents the person, and links to social profiles.

@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

@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

Step 2
Create a JSON-LD script with the
properties we want to describe

@rebelytics
How I do it: Copy an example script from
Google’s Search Gallery and manually
adjust and expand it.

@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/

Step 3
Create the GTM variables we need
for the values we want to include

@rebelytics
GTM variables
➔ On our example website, we have thousands of lawyer profile pages

@rebelytics
GTM variables
➔ 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

@rebelytics
GTM variables
➔ 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

@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

@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

@rebelytics
This variable extracts the name of the lawyer from the example page
using a CSS selector

@rebelytics
This variable extracts the name of the lawyer from the example page
using a CSS selector
@rebelytics

@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

@rebelytics
➔ The data layer is useful for lots of different applications, for example
Enhanced Ecommerce Tracking with Google Analytics

@rebelytics
➔ 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

@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

@rebelytics
We can then create a data layer variable in Google
Tag Manager for each value we want to access

@rebelytics
On our example page, we use a
combination of DOM element
and data layer variables to
populate the JSON-LD script

Step 4
Create a GTM tag that injects the JSON-LD
script with the values into the page

@rebelytics
➔ A few simple additional lines of jQuery
inject the script into the head of the
page

Step 5
Debugging and testing

@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/)

@rebelytics
No errors, no warnings,
Google is happy :)

@rebelytics
A few days after publishing, we can also check
Google Search Console to see if the data has been
processed correctly

@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.

@rebelytics
➔ For some of the simpler data types, you won’t even need GTM variables

@rebelytics
➔ 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

Two more examples

@rebelytics
JSON-LD for event pages

@rebelytics
JSON-LD for job postings

Some warnings
before you do it
yourself

@rebelytics
➔ Not everybody supports JSON-LD yet

@rebelytics
➔ JSON-LD implemented with
Google Tag Manager is only
accessible for programmes
that render the page and
execute the GTM script

@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

@rebelytics
➔ DOM element variables are not very stable, as CSS selectors may change over time.

The end
Get in contact:
twitter.com/rebelytics
eoghan@searchviu.com
linkedin.com/in/eoghanhenn/

Implementing schema.org in the JSON-LD format with Google Tag Manager

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Implementing schema.org in the JSON-LD format with Google Tag Manager

Similar to Implementing schema.org in the JSON-LD format with Google Tag Manager (20)

Recently uploaded

Recently uploaded (20)

Implementing schema.org in the JSON-LD format with Google Tag Manager