brightonSEO Masterclass - Implementation of schemas via GTM

Schema markup, also known as structured data, is used by SEO professionals to help Google to fully understand the content on a page.

Some Schemas are also used to generate rich snippets in Google's search results or to influence what is shown in the Knowledge Graph.

One of the biggest challenges faced by SEO experts is the actual implementation of Schemas, which usually requires development resources and in some cases multiple iterations are needed to get it right.

This led to the increased usage of GTM as a tool to implement structured data, especially static markup such as Organization Schema or markup with a fixed number of items and values that update when a page loads, e.g. Product or Job Schema.

In this masterclass you'll learn all these standard Schema implementation cases and how to go beyond.

You'll discover how to utilise the power of GTM to implement dynamic JSON-LD Schemas such as Carousel, FAQ and Breadcrumb - i.e. Schemas with a variable number of items.

You will learn how to capture the content needed to build Schemas that will work even after items are added or removed from a webpage.

Valuable pieces of code to allow you to implement Schemas via GTM will also be shared with you, as well as insights on Google's amazing rendering powers.

3 important clarifications for those who didn't attend my talk. The following aspects were covered in my talk, but they are not mentioned on the attached slides:

1. I covered the impact of using GTM to publish Schema on crawl budget. I suggested that this approach is not suited for sites with 10,000+ pages that update frequently. But I suggested that even some Schemas such as Organisation Schema can still be used even on these sites, as you are only pushing this on maximum two pages: Home and/or About us.

2. I explained the risk of capturing the wrong values if the CSS selectors are not accurate and suggested using Screaming Frog to test the set-up at scale. I also mentioned that if something goes wrong with the JavaScript code meant to scrape values, the best case scenario is that a particular item won't be included in the schema, and the worst is that you might break the page.

3. I gave credit to John Mueller for the Gemini screenshots as he took the time to create the prompts and suggested mentioning that you can also use AI to generate the CSS selectors and the JavaScript code required to capture values from a page.

Radu Stoian is a Technical Director at Enhance Media.

Radu manages a vibrant team of digital marketing experts at Enhance Media. He is responsible for the successful delivery of innovative digital marketing solutions across AI, SEO, PPC, analytics, CRO, research and web. His passion was and remains SEO and he is still hands on involved in helping clients to attract traffic from search engines and AI platforms.

Transcript

1. Implementation of schemas via GTM Radu Stoian Enhance Media linkedin.com/in/radustoian Masterclass
2. Getting to know each other • Started in SEO in 2007 • At Enhance since 2010 • SEO was & is a passion linkedin.com/in/radustoian Technical Director Enhance Media
3. 1. Be able to implement standard schemas via GTM using existing recipes 2. Use generative AI or developer help to implement complex schemas via GTM linkedin.com/in/radustoian Goals
4. 1. JavaScript rendering 2. Why use GTM? 3. Schema categorisation 4. How to implement schemas via GTM 5. Q&A linkedin.com/in/radustoian Agenda
5. Some Mythbusting linkedin.com/in/radustoian
6. Credit: https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process Published on 31st July 2024 MERJ & Vercel Mythbusting linkedin.com/in/radustoian 1. “Google can’t render client-side JavaScript.” 2. “Google treats JavaScript pages differently.” 3. “Rendering queue and timing significantly impact SEO.” 4. “JavaScript-heavy sites have slower page discovery.”
7. Google’s Guidelines linkedin.com/in/radustoian https://developers.google.com/search/docs/appearance/structured-data/generate-structured-data-with-javascript
8. Google’s Rendering Magic linkedin.com/in/radustoian document.querySelector("script[type='application/ld+json']").remove(); Remove JSON-LD Schema via GTM We’ll go through this in a couple of minutes Implement New Schema via GTM
9. The existing Job Schema is invalid Virgin Media O2 linkedin.com/in/radustoian
10. GTM Fix: 1. Remove invalid Schema 2. Insert correct Schema Virgin Media O2 linkedin.com/in/radustoian 1 2
11. Google renders the Schema removal and insertion via GTM just fine. Virgin Media O2 linkedin.com/in/radustoian
12. 1. Fast deployment time 2. No development costs 3. Ownership over the schema 4. Bypass “computer says no” Why use GTM? linkedin.com/in/radustoian Computer says no
13. Schema via GTM linkedin.com/in/radustoian Credit: Chris Goddard - Moz, 2016 https://moz.com/blog/using-google-tag-manager-to-dyna mically-generate-schema-org-json-ld-tags
14. Push Schema to HEAD linkedin.com/in/radustoian Google has always rendered enough JavaScript to pick up all changes to the Head.
15. Triggers and variables linkedin.com/in/radustoian
16. 1. Static Schemas 2. Template Schemas 3. Dynamic Schemas Schema Types linkedin.com/in/radustoian
17. Examples: • Organization • Site Name Static Schemas linkedin.com/in/radustoian
18. Examples: • Articles • Products • Job listings Template Schemas linkedin.com/in/radustoian
19. Examples: • FAQs • Carousel • Breadcrumb Dynamic Schemas linkedin.com/in/radustoian
20. Example of JS Loop linkedin.com/in/radustoian for (i = 0; i < document.querySelectorAll('CSS_Selector_of_Question').length; i++) { data.mainEntity.push( { "@type":"Question", "name":document.querySelectorAll('CSS_Selector_of_Question')[i].innerText, "acceptedAnswer": { "@type": "Answer", "text":document.querySelectorAll('CSS_Selector_of_Answer')[i].innerText} }; }); Details: linkedin.com/dynamically-publish-faq-schema-via-google-tag-manager-radu-stoian/
21. FAQ Schema - impact linkedin.com/in/radustoian
22. The @id element can link on-page schema with GTM schema. Hybrid Implementations linkedin.com/in/radustoian
23. Quick Recap linkedin.com/in/radustoian Custom HTML Trigger Variable Push schema into HEAD.
24. • DOM Ready Page Path Triggers linkedin.com/in/radustoian
25. • Advanced Triggers linkedin.com/in/radustoian Methods using CSS Selectors: document.getElementsByTagName('body')[0]["className"];
26. • Advanced Triggers linkedin.com/in/radustoian Methods using CSS Selectors: document.querySelectorAll('.accordion h3').length;
27. GTM Variables linkedin.com/in/radustoian • DOM Element • Data Layer • RegEx Table • Custom JavaScript
28. RegEx Table linkedin.com/in/radustoian
29. Custom JavaScript linkedin.com/in/radustoian
30. Reading Page Values linkedin.com/in/radustoian Methods that can be used to pinpoint an element on a page By Class document.getElementsByClassName() By Name document.getElementsByTagName() By ID document.getElementById() Get the first CSS Selector element document.querySelector() Get all CSS Selector elements document.querySelectorAll()
31. Chrome’s Console linkedin.com/in/radustoian https://developer.chrome.com/docs/devtools/console
32. Testing in the Console linkedin.com/in/radustoian • Open Graph Image URL
33. Testing in the Console linkedin.com/in/radustoian • FAQ items, question and answer
34. Copy the CSS Selector linkedin.com/in/radustoian
35. Shout-Out to Simo Ahava linkedin.com/in/radustoian https://www.simoahava.com/analytics/css-selector-guide-google-tag-manager/ https://www.teamsimmer.com/all-courses/mastering-css-selectors/
36. Is There More to This? linkedin.com/in/radustoian
37. It’s Not Over Yet linkedin.com/in/radustoian • The values can be further modified:
38. Using Gemini linkedin.com/in/radustoian
39. Complex Example linkedin.com/in/radustoian
40. Using Gemini linkedin.com/in/radustoian
41. Most Used Methods linkedin.com/in/radustoian Method Description split() splits a string into an array of substrings pop() returns (pops) the last element of an array shift() returns the first item of an array replace() searches a string for a value and returns the string with the replaced value trim() removes whitespace from both sides of a string Learn and practice: https://www.w3schools.com/jsref/jsref_obj_string.asp
42. • GTM can be used to implement Schema • Push Schema into the HEAD • Use the right GTM triggers and variables • Read values using CSS Selectors Final Recap linkedin.com/in/radustoian
43. Next Steps linkedin.com/in/radustoian 1. Start with Chris Goddard’s 2016 Moz article 2. Implement static schema via GTM 3. Get familiar with CSS selectors 4. Check out my FAQ Schema solution 5. Implement complex schema via GTM
44. Questions & Answers Q&A linkedin.com/in/radustoian
45. Thank You! linkedin.com/in/radustoian Slides, code giveaways and SEO tips on LinkedIn