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.

SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy

1,735 views

Published on

Google and Bing now both support semantic markup and structured data via JSON-LD - in fact, Google now recommends JSON-LD as the preferred method for marking up data, for both organic and paid search features. Implementing markup via JSON-LD can be a snap for a small or simple site, but when you’ve got multiple sites, hundreds of locations, or thousands of products, it can still be a slog to implement that JSON-LD statically for each page.

SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy

  1. 1. Scaling JSON-LD Using Google Tag Manager Ruth Burr Reedy – SearchLove Boston 2018
  2. 2. HELLO SEARCHLOVE! Ruth Burr Reedy Director of Strategy, UpBuild https://www.upbuild.io @ruthburr @ruthburr #searchlove
  3. 3. 01 THE CASE FOR STRUCTURED DATA @ruthburr #searchlove
  4. 4. Rich Results @ruthburr #searchlove
  5. 5. Entity Extraction @ruthburr #searchlove
  6. 6. Voice Search @ruthburr #searchlove
  7. 7. JOHN MUELLER Webmaster Central Hangout, January 9th, 2018 https://youtu.be/JLCwGo43fAY?t=413 “…from Google’s side, what we try to do is to understand your pages best, and to figure out with which type of voice queries match those pages. So that’s something you can help us with using structured data on the pages so if you tell us a bit more about what this page is about” @ruthburr #searchlove
  8. 8. 02 JSON-LD VS. INLINE MARKUP @ruthburr #searchlove
  9. 9. Inline Markup @ruthburr #searchlove
  10. 10. JSON-LD Markup @ruthburr #searchlove
  11. 11. The Case for JSON-LD @ruthburr #searchlove
  12. 12. SUPERIOR ORGANIZATION Everything together, right where you want it. @ruthburr #searchlove
  13. 13. HARD CODING IS BRITTLE It’s time-consuming to do, and time-consuming to fix. @ruthburr #searchlove
  14. 14. SET UP STRUCTURED DATA FOR MERCHANT CENTER Google Merchant Center Help https://support.google.com/merchants/answer/7331077 “We recommend you add new structured data markup with JSON-LD, separate from your HTML markup, especially if your product data contains variants. Added markup are distinct from any user-facing code, which makes it easier to maintain. Any structured data markup specifically designed for Google usage can be added without changing any of the visual elements of your site.” @ruthburr #searchlove
  15. 15. CHRISTI OLSON, HEAD OF EVANGELISM AT BING “Bing Has Confirmed Support for JSON-LD Formatted Schema.org Markup,” Search Engine Land, March 5th, 2018 https://searchengineland.com/bing-confirmed-support-json-ld-formatted-schema-org- markup-293508 “Bing has been using JSON-LD as a signal, but we are still building out the verification tools as part of the Webmaster Tools offering.” @ruthburr #searchlove
  16. 16. 03 IMPLEMENTATION VIA GOOGLE TAG MANAGER @ruthburr #searchlove
  17. 17. STATIC JSON-LD For SearchLove Boston @ruthburr #searchlove
  18. 18. STEP 1: WRITE THE JSON-LD IN HTML •  Enclose in <script> tags •  @context: Semantic vocabulary (in this case, schema.org) •  @type: Which schema (same as “itemtype” inline) •  Directly reference properties of the schema (same as “itemprop” inline) @ruthburr #searchlove @ruthburr #searchlove
  19. 19. STEP 2: VALIDATE @ruthburr #searchlove Use the Google Structured Data Testing Tool to check for errors or missing fields. @ruthburr #searchlove
  20. 20. STEP 3: CREATE IN GTM Create a Custom HTML tag to fire on Page View of that page. @ruthburr #searchlove
  21. 21. STATIC JSON- LD IS GREAT But it doesn’t scale. @ruthburr #searchlove
  22. 22. DYNAMIC JSON-LD For the Distilled Blog
  23. 23. STEP 1: FIND UNIQUE CSS SELECTORS @ruthburr #searchlove @ruthburr #searchlove
  24. 24. STEP 2: CREATE VARIABLES Name them something that will be easy to remember later. @ruthburr #searchlove @ruthburr #searchlove
  25. 25. Use JavaScript for Items Without CSS Selectors @ruthburr #searchlove
  26. 26. STEP 3: WRAP IN A FUNCTION EXPRESSION @ruthburr #searchlove
  27. 27. Function Expression Breakdown @ruthburr #searchlove (function(){ var data = { "@context": "http://schema.org", "@type": "blogPosting", "name": {{dataPoint — Entry Title}}, "description": {{dataPoint — Blog Post Description}}, ... } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document); Do this right away – don’t worry about the other JS on the page
  28. 28. Function Expression Breakdown @ruthburr #searchlove (function(){ var data = { "@context": "http://schema.org", "@type": "blogPosting", "name": {{dataPoint — Entry Title}}, "description": {{dataPoint — Blog Post Description}}, ... } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document); A JavaScript Object named “data” that contains all our variables in double curlies
  29. 29. Function Expression Breakdown @ruthburr #searchlove (function(){ var data = { "@context": "http://schema.org", "@type": "blogPosting", "name": {{dataPoint — Entry Title}}, "description": {{dataPoint — Blog Post Description}}, ... } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document); Create a new <script> tag It’s JSON-LD, not regular JavaScript
  30. 30. Function Expression Breakdown @ruthburr #searchlove (function(){ var data = { "@context": "http://schema.org", "@type": "blogPosting", "name": {{dataPoint — Entry Title}}, "description": {{dataPoint — Blog Post Description}}, ... } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document); Inside our new <script> tag, put all the values from “data” in a JSON-LD block
  31. 31. Function Expression Breakdown @ruthburr #searchlove (function(){ var data = { "@context": "http://schema.org", "@type": "blogPosting", "name": {{dataPoint — Entry Title}}, "description": {{dataPoint — Blog Post Description}}, ... } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document); Find the <head> of the page, and plop that script on in there
  32. 32. Step 4: Use RegEx to Fire on Relevant Pages @ruthburr #searchlove
  33. 33. STEP 5: FIDDLE AND TEST @ruthburr #searchlove @ruthburr #searchlove
  34. 34. GTM as CMS @ruthburr #searchlove
  35. 35. Here it is in GSC! @ruthburr #searchlove
  36. 36. Here it is Generating Snippets! @ruthburr #searchlove
  37. 37. Not Supported in GTM for AMP @ruthburr #searchlove
  38. 38. 04 USING A DATA LAYER TO DRIVE JSON-LD @ruthburr #searchlove
  39. 39. What is the Data Layer? @ruthburr #searchlove Experience Data Application
  40. 40. THE DATA LAYER Is like a pocket.
  41. 41. STEP 1: Have your CMS create and insert a DataLayer array •  Make sure it’s above your GTM tag @ruthburr #searchlove @ruthburr #searchlove
  42. 42. STEP 2: CREATE VARIABLES This time, use Data Layer variables instead of DOM Element variables. @ruthburr #searchlove @ruthburr #searchlove
  43. 43. STEP 3: PROCEED AS BEFORE @ruthburr #searchlove @ruthburr #searchlove
  44. 44. GOOGLE ANALYTICS CUSTOM DIMENSIONS Tag Manager Help https://support.google.com/tagmanager/answer/6164990?hl=en&visit_id=0-636638304790527132-2502822287&rd=1 @ruthburr #searchlove
  45. 45. Thank You! @ruthburr #searchlove

×