Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@rebelytics
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
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.
@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
a...
@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
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
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
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
Implementing schema.org
in the JSON-LD format
with Google Tag Manager
@rebelytics
Let’s do it!
@rebelytics
@rebelytics@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
1. Pick a data type that we want to implement on a certain page type
2. Create a JSON-LD script...
@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...
@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...
@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...
@rebelytics@rebelytics
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://devel...
@rebelyticshttps://developers.google.com/search/docs/guides/search-gallery
@rebelytics
But:
There’s no need to limit yourself to what Google supports
@rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types...
@rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types...
@rebelytics
But:
There’s no need to limit yourself to what Google supports
➔ Google will certainly support more data types...
@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 profi...
@rebelytics
➔ On our example page, we
also have job title, phone
and fax numbers, email
address, postal address,
languages...
@rebelytics@rebelytics
@rebelytics
Let’s mark up everything that’s on the page and supported by schema.org:
➔ address
➔ e-mail
➔ fax number
➔ ima...
@rebelytics@rebelytics
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 Man...
@rebelytics@rebelytics
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
➔ On our example website, we have thousands of lawyer profile pages
➔ We can’t create an individ...
@rebelytics
GTM variables
➔ On our example website, we have thousands of lawyer profile pages
➔ We can’t create an individ...
@rebelytics
Option 1: DOM element variables
➔ DOM element variables can be used to extract elements from pages using
CSS s...
@rebelytics
➔ You can identify the CSS selector of an element using Chrome’s Developer Tools
(Right click on element > Ins...
@rebelytics@rebelytics
@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
t...
@rebelytics
Option 2: Data layer variables
➔ The data layer is a JavaScript object on the page that contains information
t...
@rebelytics
Option 2: Data layer variables
➔ The data layer is a JavaScript object on the page that contains information
t...
@rebelytics
In our example, we pass some of the data that we cannot extract
with the help of DOM element variables via the...
@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 scri...
@rebelytics@rebelytics
Step 4
Create 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
@rebelytics@rebelytics
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/stru...
@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 cor...
@rebelytics@rebelytics
@rebelytics@rebelytics
@rebelytics
Implementing schema.org
in the JSON-LD format
with Google Tag Manager
@rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Sea...
@rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Sea...
@rebelytics
Really easy, isn’t it?
➔ You can use the exact same steps for all other data types: Breadcrumbs, Sitelinks
Sea...
@rebelytics@rebelytics
Two more examples
@rebelytics
JSON-LD for event pages
@rebelytics
JSON-LD for job postings
@rebelytics@rebelytics
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
execu...
@rebelytics
➔ Even if Google Tag Manager is often the easiest way to implement things on a
page, it is not always the best...
@rebelytics
➔ DOM element variables are not very stable, as CSS selectors may change over time.
@rebelytics@rebelytics
The end
Get in contact:
twitter.com/rebelytics
eoghan@searchviu.com
linkedin.com/in/eoghanhenn/
Upcoming SlideShare
Loading in …5
×

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

4,239 views

Published on

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.

Published in: Marketing
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  2. 2. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  3. 3. @rebelytics@rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  4. 4. @rebelytics Schema.org is a vocabulary for structured data @rebelytics
  5. 5. @rebelytics schema.org can be used to describe:
  6. 6. @rebelytics entities @rebelytics
  7. 7. @rebelytics relationshipsrelationships @rebelytics
  8. 8. @rebelytics and actions @rebelytics
  9. 9. @rebelytics schema.org was founded by Google, Microsoft, Yahoo & Yandex @rebelytics
  10. 10. @rebelytics schema.org can be used in e-mails,
  11. 11. @rebelytics on websites,
  12. 12. @rebelytics and with all other types of documents.
  13. 13. @rebelytics schema.org is a vocabulary, so https://schema.org/ is our dictionary. There’s no need to memorise any of it.
  14. 14. @rebelytics Here’s an example for a page in our dictionary.
  15. 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.
  16. 16. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  17. 17. @rebelytics@rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  18. 18. @rebelytics JSON-LD is one of several formats that can be used to encode schema.org
  19. 19. @rebelytics Advantage of JSON-LD: Does not have to be embedded into existing code > easier to read & implement @rebelytics
  20. 20. @rebelytics JSON-LD in a separate script Microdata included in HTML tags
  21. 21. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  22. 22. @rebelytics@rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  23. 23. @rebelytics Google Tag Manager allows us to easily add JSON-LD scripts to all pages on a website
  24. 24. @rebelytics Values can be populated with the help of Google Tag Manager variables
  25. 25. @rebelytics This means: One script for thousands of pages with the same data type
  26. 26. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  27. 27. @rebelytics Let’s do it! @rebelytics
  28. 28. @rebelytics@rebelytics What we need to do Step by step
  29. 29. @rebelytics 5 simple steps 1. Pick a data type that we want to implement on a certain page type
  30. 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. 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. 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. 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
  34. 34. @rebelytics@rebelytics Step 1 Pick a data type that we want to implement on a certain page type
  35. 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
  36. 36. @rebelyticshttps://developers.google.com/search/docs/guides/search-gallery
  37. 37. @rebelytics But: There’s no need to limit yourself to what Google supports
  38. 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. 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. 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!
  41. 41. @rebelytics Google supports social profile links for the data types Person and Organization.
  42. 42. @rebelytics Let’s have a look at what markup Google suggests for the data type Person.
  43. 43. @rebelytics Google suggests marking up the name of the person, a URL that represents the person, and links to social profiles.
  44. 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
  45. 45. @rebelytics@rebelytics
  46. 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
  47. 47. @rebelytics@rebelytics Step 2 Create a JSON-LD script with the properties we want to describe
  48. 48. @rebelytics How I do it: Copy an example script from Google’s Search Gallery and manually adjust and expand it.
  49. 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/
  50. 50. @rebelytics@rebelytics Step 3 Create the GTM variables we need for the values we want to include
  51. 51. @rebelytics GTM variables ➔ On our example website, we have thousands of lawyer profile pages
  52. 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. 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. 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. 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
  56. 56. @rebelytics@rebelytics
  57. 57. @rebelytics
  58. 58. @rebelytics This variable extracts the name of the lawyer from the example page using a CSS selector
  59. 59. @rebelytics This variable extracts the name of the lawyer from the example page using a CSS selector @rebelytics
  60. 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. 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. 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. 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. 64. @rebelytics We can then create a data layer variable in Google Tag Manager for each value we want to access
  65. 65. @rebelytics On our example page, we use a combination of DOM element and data layer variables to populate the JSON-LD script
  66. 66. @rebelytics@rebelytics Step 4 Create a GTM tag that injects the JSON-LD script with the values into the page
  67. 67. @rebelytics
  68. 68. @rebelytics ➔ A few simple additional lines of jQuery inject the script into the head of the page
  69. 69. @rebelytics@rebelytics Step 5 Debugging and testing
  70. 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/)
  71. 71. @rebelytics No errors, no warnings, Google is happy :)
  72. 72. @rebelytics A few days after publishing, we can also check Google Search Console to see if the data has been processed correctly
  73. 73. @rebelytics@rebelytics
  74. 74. @rebelytics@rebelytics
  75. 75. @rebelytics Implementing schema.org in the JSON-LD format with Google Tag Manager
  76. 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. 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. 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
  79. 79. @rebelytics@rebelytics Two more examples
  80. 80. @rebelytics JSON-LD for event pages
  81. 81. @rebelytics JSON-LD for job postings
  82. 82. @rebelytics@rebelytics Some warnings before you do it yourself
  83. 83. @rebelytics ➔ Not everybody supports JSON-LD yet
  84. 84. @rebelytics ➔ JSON-LD implemented with Google Tag Manager is only accessible for programmes that render the page and execute the GTM script
  85. 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
  86. 86. @rebelytics ➔ DOM element variables are not very stable, as CSS selectors may change over time.
  87. 87. @rebelytics@rebelytics The end Get in contact: twitter.com/rebelytics eoghan@searchviu.com linkedin.com/in/eoghanhenn/

×