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.
Scaling	JSON-LD	Using	
Google	Tag	Manager	
Ruth	Burr	Reedy	– SearchLove	Boston	2018
HELLO
SEARCHLOVE!
Ruth Burr Reedy
Director of Strategy,
UpBuild
https://www.upbuild.io
@ruthburr
@ruthburr	#searchlove
01	
THE	CASE	FOR	STRUCTURED	
DATA	
@ruthburr	#searchlove
Rich	Results	
@ruthburr	#searchlove
Entity	Extraction	
@ruthburr	#searchlove
Voice	Search	
@ruthburr	#searchlove
JOHN	MUELLER	
Webmaster	Central	Hangout,	January	9th,	2018	
https://youtu.be/JLCwGo43fAY?t=413	
	
“…from	Google’s	side,	wh...
02	JSON-LD	VS.	INLINE	MARKUP	
@ruthburr	#searchlove
Inline	Markup	
@ruthburr	#searchlove
JSON-LD	Markup	
@ruthburr	#searchlove
The	Case	for	JSON-LD	
@ruthburr	#searchlove
SUPERIOR
ORGANIZATION
Everything together, right
where you want it.
@ruthburr	#searchlove
HARD CODING
IS BRITTLE
It’s time-consuming to do,
and time-consuming to fix.
@ruthburr	#searchlove
SET	UP	STRUCTURED	DATA	FOR	MERCHANT	CENTER	
Google	Merchant	Center	Help	
https://support.google.com/merchants/answer/73310...
CHRISTI	OLSON,	HEAD	OF	EVANGELISM	AT	BING	
“Bing	Has	Confirmed	Support	for	JSON-LD	Formatted	Schema.org	Markup,”	
Search	E...
03	
IMPLEMENTATION	VIA	
GOOGLE	TAG	MANAGER	
@ruthburr	#searchlove
STATIC
JSON-LD
For SearchLove Boston
@ruthburr	#searchlove
STEP	1:	
WRITE	THE	JSON-LD	IN	HTML	
•  Enclose	in	<script>	tags	
•  @context:	Semantic	
vocabulary	(in	this	case,	
schema....
STEP	2:	
VALIDATE	
@ruthburr	#searchlove	
Use	the	
Google	Structured	Data	
Testing	Tool	to	check	for	
errors	or	missing	fi...
STEP	3:	
CREATE	IN	GTM	
Create	a	Custom	HTML	tag	to	
fire	on	Page	View	of	that	page.	
@ruthburr	#searchlove
STATIC JSON-
LD IS GREAT
But it doesn’t scale.
@ruthburr	#searchlove
DYNAMIC
JSON-LD
For the Distilled Blog
STEP	1:	
FIND	UNIQUE	CSS	SELECTORS	
@ruthburr	#searchlove	 @ruthburr	#searchlove
STEP	2:	
CREATE	VARIABLES	
Name	them	something	that	
will	be	easy	to	remember	
later.	
@ruthburr	#searchlove	 @ruthburr	#s...
Use	JavaScript	for	Items	Without	CSS	Selectors	
@ruthburr	#searchlove
STEP	3:	
WRAP	IN	A	FUNCTION	
EXPRESSION	
@ruthburr	#searchlove
Function	Expression	Breakdown	
@ruthburr	#searchlove	
(function(){
var data = {
"@context": "http://schema.org",
"@type": ...
Function	Expression	Breakdown	
@ruthburr	#searchlove	
(function(){
var data = {
"@context": "http://schema.org",
"@type": ...
Function	Expression	Breakdown	
@ruthburr	#searchlove	
(function(){
var data = {
"@context": "http://schema.org",
"@type": ...
Function	Expression	Breakdown	
@ruthburr	#searchlove	
(function(){
var data = {
"@context": "http://schema.org",
"@type": ...
Function	Expression	Breakdown	
@ruthburr	#searchlove	
(function(){
var data = {
"@context": "http://schema.org",
"@type": ...
Step	4:	Use	RegEx	to	Fire	on	Relevant	Pages	
@ruthburr	#searchlove
STEP	5:	
FIDDLE	AND	TEST	
@ruthburr	#searchlove	 @ruthburr	#searchlove
GTM	as	CMS	
@ruthburr	#searchlove
Here	it	is	in	GSC!	
@ruthburr	#searchlove
Here	it	is	Generating	Snippets!	
@ruthburr	#searchlove
Not	Supported	in	GTM	for	AMP	
@ruthburr	#searchlove
04	
USING	A	DATA	LAYER	TO	
DRIVE	JSON-LD	
@ruthburr	#searchlove
What	is	the	Data	Layer?	
@ruthburr	#searchlove	
Experience	
Data	
Application
THE DATA
LAYER
Is like a pocket.
STEP	1:	
Have	your	CMS	create	and	
insert	a	DataLayer	array	
•  Make	sure	it’s	above	your	
GTM	tag	
@ruthburr	#searchlove	...
STEP	2:	
CREATE	VARIABLES	
This	time,	use	Data	Layer	
variables	instead	of	DOM	
Element	variables.		
@ruthburr	#searchlove...
STEP	3:	
PROCEED	AS	BEFORE	
@ruthburr	#searchlove	 @ruthburr	#searchlove
GOOGLE	ANALYTICS	CUSTOM	DIMENSIONS	
Tag	Manager	Help	
https://support.google.com/tagmanager/answer/6164990?hl=en&visit_id=...
Thank	You!	
@ruthburr	#searchlove
Upcoming SlideShare
Loading in …5
×

of

SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 1 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 2 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 3 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 4 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 5 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 6 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 7 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 8 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 9 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 10 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 11 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 12 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 13 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 14 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 15 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 16 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 17 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 18 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 19 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 20 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 21 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 22 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 23 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 24 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 25 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 26 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 27 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 28 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 29 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 30 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 31 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 32 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 33 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 34 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 35 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 36 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 37 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 38 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 39 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 40 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 41 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 42 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 43 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 44 SearchLove Boston 2018 - Scaling Json-LD Using GTM - Ruth Burr Reedy Slide 45
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

5 Likes

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

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
  • santoshkumar3160

    Oct. 3, 2019
  • jonclark

    Dec. 29, 2018
  • egiethoorn

    Jun. 8, 2018
  • ChristopherKeithSmith

    Jun. 7, 2018
  • LoganWalker3

    Jun. 7, 2018

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.

Views

Total views

3,215

On Slideshare

0

From embeds

0

Number of embeds

1,446

Actions

Downloads

52

Shares

0

Comments

0

Likes

5

×