This document discusses how a JavaScript data layer can help with SEO by providing structured data to search engines. It covers: 1. Using HTML, microdata, and a JavaScript data layer to provide different types of structured data. A JavaScript data layer allows providing data not accessible to robots through HTML alone. 2. Benefits of a data layer for SEO include increased organic click-through rate, better SEO analysis, and enabling dynamic remarketing in AdWords. 3. Examples of setting up a data layer using Google Tag Manager, JSON-LD syntax, and pinging Googlebot to re-crawl pages to index the new structured data.

1. How can a dataLayer help your SEO?
Slides: bit.ly/seodatalayer2

2. Welcome Back
Phil Pearce
Analytics Freedom Fighter
www.linkedin.com/in/philpearce
Web Analytics
Exchange
mentor
750 GA
questions answered
Tracking
protection
group

3. Summary
1. What
HTML structured data
JavaScript structured data
Hybrid mode
2. Why
+ Organic CTR
+ SEO analysis
+ Adwords Dynamic remarketing
3. How
GTM script examples
Validators
Pinging GoogleBot to re-crawl / index
4. Questions

4. 1. HTML structure data
 Human & Robot: Title & H1
 Robot: HTTP Response code (e.g. 200 status)
 Robot: Meta description
 Robot: sitemap.xml
Easy Baddie

5.  Human & Robot: Title & H1
 Better organic CTR
 Higher position for local listing
2. Microdata (aka Rich snippets)
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">L’Amourita Pizza</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in Eastlake!</span>
<span itemprop="description">L'Amourita serves up traditional wood-fired
Neapolitan-style pizza,
brought to your table promptly and without fuss. An ideal neighborhood
pizza joint.</span>
Rating: <span itemprop="rating">4.5</span>
</div>
</div>
A Bit Bad

6. 3. What is a JavaScript DataLayer?
name value
pageCategory : signup
visitorType : high-value
 VariableName + Value pairs. For example...
 VariableName (pageCategory) + Value (signup)
 Like meta <title> but... in JS.
 Like an excel table
 but on website
 and encased in JavaScript
J
S
J
S
Pretty Mean

7. <script type="application/ld+json">
{
"@context": "http://schema.org",
"@id": "2356865",
"@type": "Video",
"name": "What is JSON LD",
"potentialAction": [{
"@type": "WatchAction",
"target": "https://www.youtube.com/watch?v=vioCbTo3C-
4",
}
</script>
JSON-LD datalayer…
Super-Bad
J
S
J
S

8. Markup summary
*JS-Robot for onclick content
Mark-up
name
Human can
see?
Robots
see?
Accessible to
DOM?
HTML
No
(except title)
Yes
No
(except title)
Microdata Yes Yes No
DataLayer
(JSON)
No Yes Yes
Hybrid
(JSON-LD)
Yes Yes* Yes Winner

9. 2. Why JSON-LD
+ Organic CTR
+ SEO analysis
+ Adwords remarketing

10.  Previously, we (Google) only looking at content from
the HTTP response and didn't interpret what a typical
browser running JavaScript would render.
 …When pages that have valuable content rendered
by JavaScript started showing up, we weren’t able to
let searchers know about this content, which was a sad
outcome for both users and webmasters.
 In order to solve this problem… we started executing
JavaScript.
 In the past few months, our indexing system has been
rendering a more web pages like an average user’s
browser (with JavaScript turned on).
JS-Googlebot now indexing JS content!
From 8months ago: May-2014
Source: googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

11. The next page has the following action
Future Action:
Watch

12. What is JSON-LD video
https://www.youtube.com/watch?v=vioCbTo3C-4
And https://www.youtube.com/watch?v=XXw8g-FbemI#t=251

13. <script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.clientdomain.com",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-877-746-0909",
"contactType": "customer service",
"contactOption": "TollFree",
"areaServed": ["US", "CA" ],
"availableLanguage": ["English", "French"]
}]
}
</script>
Telephone action...
googlewebmastercentral.blogspot.co.uk/2014/04/surfacing-your-businesss-contact-and.html
developers.google.com/webmasters/business-location-pages/
www.w3.org/TR/json-ld/#embedding-json-ld-in-html-documents
www.google.com/webmasters/markup-tester/corporatecontacts

14. Note: currently only on Google.com SERPs
... renders JSON-linkedData on SERPs
GoogleNet
GoogleNet
Future Action:
Call

15. use cases:
 1. telephone numbers – action call
 2. company logos– action click
 3. social profile links – action follow
 4. events in the Knowledge Graph – action call
 5. the sitelinks search box – action search
We (Google) are working on expanding support to
additional markup powered features in the future.
 6. product & review actions (not yet supported)
Other Examples

16. Better SEO analysis…

17. Example of automatic Content Groupings via
Wordpress plugin
Also pageGroup = “recentcy” would be a useful value capture

18. Example of automatic Content Groupings via
magneto plugin
Also pageGroup = “intent” would be a useful value capture

19. Better PPC remarketing…

20. variableName value
ecomm_pagetype home
ecomm_pagetype product
ecomm_pagetype category
ecomm_pagetype basket
ecomm_pagetype purchase
ecomm_pagetype siteview
Adwords remarketing pagetype
(allows Adwords to stalk users on
Google Display Network)
Analysing user
session fingerprint
for re-targeting

21. dataLayer = [{
"google_tag_params": {
"ecomm_pagetype": "purchase",
// home > category > product > basket > purchase | siteview
}
}];
Adwords remarketing pagetype dataLayer
Ref
http://support.google.com/adwords/answer/2476691?hl=en
http://support.google.com/adwords/answer/3103357?hl=en
http://support.google.com/tagmanager/answer/3002580?hl=en

22. Industry standardization…

23. Industry standard names
JS dataLayer for TagManger
Bit.ly/gtmdevguide2 (page 5 and page6)

24. Bit.ly/gtmdevguide2 (page 5 and page6)
Google “re-programed” standard
JS dataLayer for TagManger

25. Schema.org and JSON-LD.org

26. The Power of
Structure
mark-up
= Robot
becomes a
goodie 

27. The Power of
Structure
mark-up
= Robot
becomes a
goodie 
http://semanticweb.com/github-adds-schema-org-actions-email-notifications-via-json-ld_b44450
You have mail
Future Action:
Pull Request

28. Benefits of JSON-LD?
1. Supported by Google, Yahoo and Bing.
2. Unlike digitalData layer it is officially W3c
supported
3. SEO`s understand it as it is based on schema.org
/ microdata
4. It will eventually supersede microdata
5. It already has strong adoption in HTML emails
(e.g gmail)
6. Benefit`s SEO, Analytics and Remarketing!

29. 3. Back to the present day
How can I enable this now?
GTM script examples
Validators
Pinging GoogleBot to re-crawl / index

30. GTM config files…
(one click to import files)

31. JSON –LD examples…
JSON script are
downloadable
from here:
login:coolgtmstuff
@gmail.com
pw:philrulesgtm3
Import file for New interface:
http://bit.ly/json-v2
Import file for Old interface:
http://bit.ly/jsonv1

32. Practical example...
json-ld.org >> then click “playground” link
Future Action:
Use
playground

33. How to install & test…

34. Files to import...
Test Container
Test Container

35. Select overwrite

36. Validator…
https://developers.google.com/webmasters/structured-data/testing-tool/

37. Organization – Logo, Social and Telephone number
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://yourdomain.com/",
"logo": "http://yourdomain.com/images/logo.png",
"sameAs": [
"http://www.facebook.com/yourProfile",
"http://www.twitter.com/yourProfile",
"http://plus.google.com/yourProfile",
"http://www.linkedin.com/in/yourProfile",
"http://instagram.com/yourProfile"
],
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-401-555-1212",
"contactType": "customer service",
"contactOption": "TollFree",
"areaServed": [
"US",
"CA"
],
"availableLanguage": [
"English",
"French"
]
}]
}
</script>
Future Action:
Click

38. WebSite – Search box
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://yourdomain.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "http://yourdomain.com/?s={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Future Action:
Search

39. Person
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Barack Obama",
"jobTitle": "President",
"affiliation": "Democratic Party",
"additionalName": "Barack",
"url": "http://www.barackobama.com/",
"sameAs": [
"http://www.facebook.com/yourProfile",
"http://www.twitter.com/yourProfile",
"http://plus.google.com/yourProfile",
"http://www.linkedin.com/in/yourProfile",
"http://instagram.com/yourProfile"
],
"address": {
"@type": "PostalAddress",
"streetAddress": "White house, 1600 Pennsylvania Ave",
"addressLocality": "Northwest",
"addressRegion": "Washington"
}
}
</script>
Future Action:
Follow
updates

40. MusicEvent - location
<!-- http://support.google.com/webmasters/answer/4620133?hl=en -->
<!-- http://developers.google.com/structured-data/events/performers -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "MusicEvent",
"name": "Lady Gaga",
"startDate": "2014-11-13T19:30",
"location": {
"@type": "Place",
"name": "National Indoor Arna",
"address": "King Edwards Rd, Birmingham, United Kingdom"
},
"offers": {
"@type": "Offer",
"url": "http://www.ticketmaster.com/Lady-Gaga-tickets/artist/1249444",
"price": 38.00
}
}
</script>
1. MusicEvent
2. TheaterEvent
3. SportsEvent
4. ComedyEvent
5. Festival
6. FoodEvent
Other supported event types include…
Future Action:
Buy

41. TheaterEvent - location
<!-- http://developers.google.com/structured-data/events/venues -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "TheaterEvent",
"name": "Julius Caesar at Shakespeare's Globe",
"location": {
"@type": "PerformingArtsTheater",
"name": "Shakespeare's Globe",
"sameAs": "http://www.shakespearesglobe.com/",
"address": "London, UK"
},
"offers": [{
"@type": "Offer",
"name": "Standing (Yard)",
"url": "https://tickets.shakespearesglobe.com/performances.asp?PerIndex=287339",
"category": "primary",
"priceCurrency": "GBP",
"price": "7.50",
"availability": "http://schema.org/InStock"
},{
"@type": "AggregateOffer",
"name": "Lower Gallery",
"url": "https://tickets.shakespearesglobe.com/performances.asp?PerIndex=287339",
"category": "primary",
"priceCurrency": "GBP",
"lowPrice": "17.50",
"highPrice": "44.50",
"availability": "http://schema.org/LimitedAvailability"
}
],
Future Action:
Buy

42. MusicGroup - ListenAction
<!-- https://developers.google.com/structured-data/actions/play-music -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "MusicGroup",
"url": [
"http://www.iheart.com/artist/Katy-Perry-35141/"
// Google validator does not like android-app URL - even though its in their example!
//, "android-app://com.clearchannel.iheartradio.controller/ihr/listen/custom_radio/artist/35141"
],
"name": "Katy Perry",
"sameAs": "http://www.katyperry.com",
"logo": "http://{{Page Hostname}}/images/logo.png", // PP missing in Google help pages
"description": "Katy Perry is a pop music artist.",
"potentialAction": {
"@type": "ListenAction",
"target": [
"http://www.iheart.com/artist/Katy-Perry-35141/?autoplay=true&ext=1&playedFrom=197"
// Google validator does not like android-app URL - even though its in their example!
//, "android-
app://com.clearchannel.iheartradio.controller/ihr/listen/custom_radio/artist/35141?ext=1&played_from=197"
],
// Offer added as validator said this was a recommended field
"expectsAcceptanceOf": {
"@type": "Offer",
"eligibleRegion": {
"@type": "Country",
"name": "US"
}
}
}

43. TVEpisode - Play/WatchAction
<!-- https://developers.google.com/structured-data/actions/watch-movies -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@id": "2356865",
"@type": "TVEpisode",
"name": "The Occupation Recalibration",
"episodeNumber": 13,
"partOfSeason": {
"@type": "TVSeason",
"seasonNumber": 7
},
"partOfSeries": {
"@type": "TVSeries",
"name": "The Big Bang Theory",
"sameAs": "http://www.imdb.com/title/tt0898266/",
"url": "http://www.cbs.com/shows/big_bang_theory/",
"description": "The Big Bang Theory is an American sitcom."
},
"releasedEvent": {
"@type": "PublicationEvent",
"startDate": "2015-01-09",
"location": {
"@type": "Country",
"name": "US"
}
},
"potentialAction": [{
"@type": "WatchAction",
"target": "http://www.cbs.com/shows/bbt/vid/2356865/occupation_recal?campaign=google_kp_watch",

44. Products & review markup not yet supported

45. Product & Aggregated Reviews (not yet supported)
<!-- http//rdf.greggkellogg.net/distiller
<!-- http://www.overstock.com/Office-Supplies/Office-Star-Professional-Air-Grid-Deluxe-Task-Chair/2605023/product.html
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@graph": [
{
"@id": "g69993968635260",
"@type": "Product",
"name": "Office Star Professional Air Grid Deluxe Task Chair"
},
{
"@id": "g69993968433920",
"@type": "Offer",
"price": "189.99",
"availability": "InStock"
},
{
"@id": "g69993968533420",
"@type": "AggregateRating",
"ratingValue": "4.6",
"reviewCount": "195"
}]
}
</script>

46. Review by author (not yet supported)
<!-- https://developers.google.com/structured-data/critic-reviews -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Review",
"author": {
"@type": "Person",
"name": "Lisa Kennedy",
"sameAs": "https://plus.google.com/114108465800532712602"
},
"datePublished": "2014-03-13T20:00",
"description": "Nerve-racking, sentimental and thrilling.",
"itemReviewed": {
"@type": "Movie",
"name": "Gravity",
"sameAs": "http://www.imdb.com/title/tt1454468/",
"datePublished": "2013-10-04T00:00",
"director": {
"@type": "Person",
"name": "Alfonso Cuarón",
"sameAs": "http://en.wikipedia.org/wiki/Alfonso_Cuar%C3%B3n"
},
"actor": [{
"@type": "Person",
"name": "Sandra Bullock",
"sameAs": "http://en.wikipedia.org/wiki/Sandra_Bullock"
},{
"@type": "Person",
"name": "George Clooney",
"sameAs": "http://en.wikipedia.org/wiki/George_Clooney"
}

47. 2. DataLayer >> JSON-LD mapping possible…
http://peadig.com/wordpress
-plugins/structured-social-
profiles/
https://wordpress.org/plugin
s/structured-social-profiles/
1. JSON-LD added via wordpress plugin (not tested)

48. 3. Enabling via Linked-Data to 3rd party
entities/websites…
<!-- https://developers.google.com/structured-data/events/performers#option_3_delegate_your_event_listings_to_another_website -->
<!-- https://developers.google.com/structured-data/events/performers -->
<!-- Delegate Your Event Listings to Another Website -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "MusicGroup",
"name": "Your Band or Performer Name",
"url": "http://yourdomain.com/",
"event": {
"url": "http://other-event-site.com/your-event-listing-page/",
"name": "my super gig",
"startDate": "2015-01-01",
"location": {
"@type": "Country",
"address": "somewhere",
"name": "US"
},
"offers": {
"@type": "Offer",
"url": "http://other-event-site.com/your-event-listing-page/",
"priceCurrency": "GBP",
"price": 38
}
}
*/
}
</script>

49. OpenGraph is a list of
entities/websites:

50. Summary

51. http://semanticweb.com/github-adds-schema-org-actions-email-notifications-via-json-ld_b44450
Utilise this
mark-up,
And I`ll be back
(to re-crawl your
website)
Future Action:
Pull Request

52. 1. Enable JSON-LD via GTM (or use CMS plugins)

53. 2. Utilise pageGroups based on this new data…

54. 3. Ping GoogleBot to get the pages indexed and
get a CTR boast…
1. Ensure pages validate:
2. Ping GoogleBot to re-crawl by visiting this URL:
Or use “Fetch, render and index” on homepage & individual pages in GWT.
3. Wait 4+ weeks

55. Future actions…
1. JSON-ld playground - try
2. Google JSON-LD Validator- try
3. Install GTM scripts or CMS mapping
files

56. Thanks & Questions
GET YOUR SEO-ANALYTICS
ASS TO MARS
Future Action:
Ask Question

57. Free resource...
For everyone else...
bit.ly/gtmdevguide2
€ FREE
www.amazon.de/Google-Tag-Manager-Developer-Guide-ebook/dp/B00KEC2IOK
Future Action:
Download

58. Links
http://www.simoahava.com/analytics/enrich-serp-results-using-gtm/
http://rdf.greggkellogg.net/distiller
https://developers.google.com/structured-data/testing-tool/
http://search4phil.com/_testing_script/____json_ld/json-ld-test.html
http://www.greenlaneseo.com/blog/2015/01/introducing-the-meta-and-rich-snippet-tester/
https://docs.google.com/spreadsheets/d/1sreYyRZ31HJdM1-
WX5wztTIbY28aZjCVmGIWN8WKCEM/edit#gid=674078569
https://developers.google.com/schemas/release-notes
http://www.w3.org/wiki/WebSchemas/ActivityActions
// Script to patch a broken inline JSON-LD values
https://plus.google.com/100057001384327175073/posts/SJjfczNMPhc

59. Schema.org adoption rate

60. Examples in the wild
Ticketmaster (JSON-LD for music events)
https://developers.google.com/webmasters/structured-data/testing-
tool?url=http%253A%252F%252Fwww.ticketmaster.com%252FLady-Gaga-
tickets%252Fartist%252F1249444
http://www.ticketmaster.com/
http://www.bandsintown.com/
http://www.bandpage.com/
http://www.songkick.com/
Nest (Telehone number)
nest.com/about/#contact
LastMinute (DigitalDataLayer only)
www.lastminute.com/hotels/amazing-design-hotel-with-pool-in-east-london-london-
gb.1000071234-1-5-
GH:1$v1v$?intcmp=London+AmazingDesignHotelwithPoolinEastLondon
Test using https://developers.google.com/structured-data/testing-tool/

61. MINI-GUN UPGRADES:
JSmacro for
"Semantic - Event Markup Detection"
GTM import:
https://www.dropbox.com/s/mvs84img781le16/OTHER%20-%20semantic-analytics.json?dl=0
// JSmacro for "Semantic - Event Markup Detection" triggered on gtm.dom ready
function () {
var SemElem = document.querySelectorAll('[itemtype=&"Event"]');
SemElem = SemElem.length > 0 ? true : false;
return SemElem;
}
// JSmacro for "Semantic - Event Markup Properties"
function () {
var venue = $('[itemtype*="Event"] [itemprop*="name"]') [0];
var performer = $('[itemtype*="Event"] [itemprop*="performer"]') .text();
venue = $(venue).text();
label = performer + " at " + venue + " (Semantic Event)";
check = venue.length > 0 ? true : false;
if (check === false) {
label = "No semantic data";
return label;
}
else {
return label;
}
}
Source: http://moz.com/blog/semantic-analytics

62. HTML5 data-tracking-attributes:
Competing mark-up standard
Source: http://www.swellpath.com/2014/08/google-tag-manager-events-using-html5-data-attributes/ and this forum post
vs
<a href="#" class="amazingOfferLink" id="amazingOfferLink1"
data-tracking-action="amazingOffer">Click here</a>

63. HTML5 name Value
data-tracking-action click
data-tracking-event video
data-tracking-entity component
data-tracking-event-context-id 12345
data-tracking-event-context-category video
data-tracking-event-context-action play
data-tracking-event-context-label short circuit video
data-tracking-event-context-value 0
data-tracking-event-context-noninteractive false
HTML5 data-tracking-attributes:
Competing mark-up example

64. JSON-LD Links
Testing Tools
• JSON-LD playground & validation tools:
www.json-ld.org
• Official Google markup-Tester for JSON-LD
www.google.com/webmasters/markup-tester/corporatecontacts (phone numbers)
www.google.com/webmasters/markup-tester/events (music events)
www.google.com/webmasters/markup-tester/ (email)
JSON-LD blog posts
• www.seoskeptic.com/json-ld-google-knowledge-graph-schema-org-seo/
• moduscreate.com/google-announces-json-ld-compliance-at-google-io/
• semanticweb.com/category/technologies-2/json-ld
Official Google help pages
• Musical Artists: Specify your events to Google
support.google.com/webmasters/answer/4620133?hl=en
• Companies: Specify your customer service numbers to Google
support.google.com/webmasters/answer/4620709?hl=en
• Email markup: JSON-LD
developers.google.com/gmail/markup/reference/formats/json-ld
developers.google.com/gmail/markup/

65. Other FREE stuff
http://bit.ly/techseoaudit
http://bit.ly/croheatmapaudit
http://bit.ly/cookieaudit

66. 3. GTM dataLayer Position
in the header