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.

1. Scaling JSON-LD Using
Google Tag Manager
Ruth Burr Reedy – SearchLove Boston 2018

2. HELLO
SEARCHLOVE!
Ruth Burr Reedy
Director of Strategy,
UpBuild
https://www.upbuild.io
@ruthburr
@ruthburr #searchlove

3. 01
THE CASE FOR STRUCTURED
DATA
@ruthburr #searchlove

4. Rich Results
@ruthburr #searchlove

5. Entity Extraction
@ruthburr #searchlove

6. Voice Search
@ruthburr #searchlove

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. 02 JSON-LD VS. INLINE MARKUP
@ruthburr #searchlove

9. Inline Markup
@ruthburr #searchlove

10. JSON-LD Markup
@ruthburr #searchlove

11. The Case for JSON-LD
@ruthburr #searchlove

12. SUPERIOR
ORGANIZATION
Everything together, right
where you want it.
@ruthburr #searchlove

13. HARD CODING
IS BRITTLE
It’s time-consuming to do,
and time-consuming to fix.
@ruthburr #searchlove

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. 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. 03
IMPLEMENTATION VIA
GOOGLE TAG MANAGER
@ruthburr #searchlove

17. STATIC
JSON-LD
For SearchLove Boston
@ruthburr #searchlove

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. STEP 2:
VALIDATE
@ruthburr #searchlove
Use the
Google Structured Data
Testing Tool to check for
errors or missing fields.
@ruthburr #searchlove

20. STEP 3:
CREATE IN GTM
Create a Custom HTML tag to
fire on Page View of that page.
@ruthburr #searchlove

21. STATIC JSON-
LD IS GREAT
But it doesn’t scale.
@ruthburr #searchlove

22. DYNAMIC
JSON-LD
For the Distilled Blog

23. STEP 1:
FIND UNIQUE CSS SELECTORS
@ruthburr #searchlove @ruthburr #searchlove

24. STEP 2:
CREATE VARIABLES
Name them something that
will be easy to remember
later.
@ruthburr #searchlove @ruthburr #searchlove

25. Use JavaScript for Items Without CSS Selectors
@ruthburr #searchlove

26. STEP 3:
WRAP IN A FUNCTION
EXPRESSION
@ruthburr #searchlove

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. 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. 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. 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. 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. Step 4: Use RegEx to Fire on Relevant Pages
@ruthburr #searchlove

33. STEP 5:
FIDDLE AND TEST
@ruthburr #searchlove @ruthburr #searchlove

34. GTM as CMS
@ruthburr #searchlove

35. Here it is in GSC!
@ruthburr #searchlove

36. Here it is Generating Snippets!
@ruthburr #searchlove

37. Not Supported in GTM for AMP
@ruthburr #searchlove

38. 04
USING A DATA LAYER TO
DRIVE JSON-LD
@ruthburr #searchlove

39. What is the Data Layer?
@ruthburr #searchlove
Experience
Data
Application

40. THE DATA
LAYER
Is like a pocket.

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. STEP 2:
CREATE VARIABLES
This time, use Data Layer
variables instead of DOM
Element variables.
@ruthburr #searchlove @ruthburr #searchlove

43. STEP 3:
PROCEED AS BEFORE
@ruthburr #searchlove @ruthburr #searchlove

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. Thank You!
@ruthburr #searchlove