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

6,213 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
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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/

×