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

@rebelytics

Implementing schema.orgin the JSON-LD format

with Google Tag Manager

@rebelytics@rebelytics



@rebelytics

Schema.org is a vocabulary for structured data

@rebelytics

@rebelytics

schema.org can be used to describe:

@rebelytics

entities

@rebelytics

@rebelytics

relationships relationships

@rebelytics

@rebelytics

and actions

@rebelytics

@rebelytics

schema.org was founded byGoogle, Microsoft, Yahoo & Yandex

@rebelytics

@rebelytics

schema.org can be used in e-mails,

@rebelytics

on websites,

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

https://schema.org/

@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



@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



@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



@rebelytics

Let’s do it!

@rebelytics


What we need to doStep 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 1Pick 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


➔ Google will certainly support more data types and properties in future

@rebelytics



➔ Other machines process and use structured data

@rebelytics



➔ 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

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 2Create 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/

https://technicalseo.com/seo-tools/schema-markup-generator/


Step 3Create 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

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

@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 4Create a GTM tag that injects the JSON-LD

script with the values into the page

@rebelytics

@rebelytics

➔ A few simple additional lines of jQuery

inject the script into the head of the

page


Step 5Debugging 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/)

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



@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

[email protected]

linkedin.com/in/eoghanhenn/

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

Top Related