O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 87 Anúncio

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

Baixar para ler offline

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.

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.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

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

Anúncio

Mais recentes (20)

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/

×