The author's views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.
[Estimated read time: 7 minutes]
One of the biggest takeaways from SearchFest in Portland earlier this year was the rapidly rising importance of semantic search and structured data — in particular Schema.org. And while implementing Schema used to require a lot of changes to your site's markup, the JSON-LD format has created a great alternative to adding microdata to a page with minimal code.
Check out Mike Arnesen's deck from his SearchFest talk, "Understanding & Facilitating Semantic Search," for a great overview on using structured data.
What was even more exciting was the idea that you could use Google Tag Manager to insert JSON-LD into a page, allowing you to add Schema markup to your site without having to touch the site's code directly (in other words, no back and forth with the IT department).
Trouble is, while it seemed like Tag Manager would let you insert a JSON-LD snippet on the page no problem, it didn't appear to be possible to use other Tag Manager features to dynamically generate that snippet. Tag Manager lets you create variables by extracting content from the page using either CSS selectors or some basic JavaScript. These variables can then be used dynamically in your tags (check out Mike's post on semantic analysis for a good example).
So if we wanted to grab that page URL and pass it dynamically to the JSON-LD snippet, we might have tried something like this:
But that doesn't work. Bummer.
Meaning that if you wanted to use GTM to add the the BlogPosting Schema type to each of your blog posts, you would have to create a different tag and trigger (based on the URL) for each post. Not exactly scalable.
But, with a bit of experimentation, I’ve figured out a little bit of JavaScript magic that makes it possible to extract data from the existing content on the page and dynamically create a valid JSON-LD snippet.
Dynamically generating JSON-LD
The reason why our first example doesn't work is because Tag Manager replaces each variable with a little piece of JavaScript that calls a function — returning the value of whatever variable is called.
We can see this error in the Google Structured Data Testing Tool:
The error is the result of Tag Manager inserting JavaScript into what should be a JSON tag — this is invalid, and so the tag fails.
However, we can use Tag Manager to insert a JavaScript tag, and have that JavaScript tag insert our JSON-LD tag.
If you're not super familiar with JavaScript, this might look pretty complicated, but it actually works the exact same way as many other tags you’re probably already using (like Google Analytics, or Tag Manager itself).
Here, our Schema data is contained within the JavaScript "data" object, which we can dynamically populate with variables from Tag Manager. The snippet then creates a script tag on the page with the right type (application/ld+json), and populates the tag with our data, which we convert to JSON using the JSON.stringify function.
The purpose of this example is simply to demonstrate how the script works (dynamically swapping out the URL for the Organization Schema type wouldn't actually make much sense). So let's see how it could be used in the real world.
Dynamically generating Schema.org tags for blog posts
Start with a valid Schema template
First, build out a complete JSON/LD Schema snippet for a single post based on the schema.org/BlogPosting specification.
Identify the necessary dynamic variables
There are a number of variables that will be the same between articles; for example, the publisher information. Likewise, the main image for each article has a specific size generated by WordPress that will always be the same between posts, so we can keep the height and width variables constant.
In our case, we've identified 7 variables that change between posts that we'll want to populate dynamically:
Create the variables within Google Tag Manager
- Main Entity ID: The page URL.
- Headline: We'll keep this simple and use the page title.
- Date Published and Modified: Our blog is on WordPress, so we already have meta tags for "article:published_time" and "article:modified_time". The modified_time isn't always included (unless the post is modified after publishing), but the Schema specification recommends including it, so we should set dateModified to the published date if it there isn't already a modified date. In some circumstances, we may need to re-format the date — fortunately, in this case, it's already in the ISO 860 format, so we're good.
- Author Name: In some cases we're going to need to extract content from the page. Our blog lists the author and published date in the byline. We'll need to extract the name, but leave out the time stamp, trailing pipe, and spaces.
- Article Image: Our blog has Yoast installed, which has specified image tags for Twitter and Open Graph. Note: I'm using the meta twitter:image instead of the og:image tag value due to a small bug that existed with the open graph image on our blog when I wrote this.
- Article Description: We'll use the meta description.
Here is our insertion script, again, that we'll use in our tag, this time with the properties swapped out for the variables we'll need to create:
I'm leaving out dateModified right now — we'll cover than in a minute.
Extracting meta values
Fortunately, Tag Manager makes extracting values from DOM elements really easy — especially because, as is the case with meta properties, the exact value we need will be in one of the element's attributes. To extract the page title, we can get the value of the <title> tag. We don't need to specify an attribute name for this one:
For meta properties, we can extract the value from the content attribute:
Tag Manager also has some useful built-in variables that we can leverage — in this case, the Page URL:
Processing page elements
For extracting the author name, the markup of our site makes it so that just a straight selector won't work, meaning we’ll need to use some custom JavaScript to grab just the text we want (the text of the span element, not the time element), and strip off the last 3 characters (" | ") to get just the author's name.
In case there's a problem with this selector, I've also put in a fallback (just our company name), to make sure that if our selector fails a value is returned.
Testing
Tag Manager has a great feature that allows you to stage and test tags before you deploy them.
Once we have our variables in place, we can enter the Preview mode and head to one of our blog posts:
Here we can check the values of all of our variables to make sure that the correct values are coming through.
Finally, we set up our tag, and configure it to fire where we want. In this case, we're just going to fire these tags on blog posts:
And here's the final version of our tag.
For our dateModified parameter, we added a few lines of code that check whether our modified variable is set, and if it’s not, sets the "dateModified" JSON-LD variable to the published date. You can find the raw code here.
Now we can save the tag, deploy the current version, and then use the Google Structured Data Testing Tool to validate our work:
Success!!
This is just a first version of this code, which is serving to test the idea that we can use Google Tag Manager to dynamically insert JSON-LD/Schema.org tags. However after just a few days we checked in with Google Search Console and it confirmed the BlogPosting Schema was successfully found on all of our blog posts with no errors, so I think this is a viable method for implementing structured data.
Structured data is becoming an increasingly important part of an SEO's job, and with techniques like this we can dramatically improve our ability to implement structured data efficiently, and with minimal technical overhead.
I'm interested in hearing the community's experience with using Tag Manager with JSON-LD, and I'd love to hear if people have success using this method!
Happy tagging!
FAQs
How do I add a dynamic blog schema to Google Tag Manager? ›
- Create a JSON-LD schema markup code for blog posts.
- Identify the field that will change in every post.
- Create variables in GTM to hold the value.
- Replace the values in schema code with variable.
- Add the schema code in custom html tag and fire on blog page.
- Identify expected user behavior.
- Initialize a data source.
- Create a schema.
- Complete sample schema.
- Register your schema.
- Index your data.
- Test your schema.
- Tune your schema.
- Understand the type of data you can represent on a webpage with schema.
- Use a tool to generate the schema markup.
- Embed the schema markup on that specific page.
- Test it with Google or Bing structured data testing tool.
...
Manually specify the schema:
- Using the Google Cloud console.
- Inline using the bq command-line tool.
- Using the CREATE TABLE SQL statement.
- Plan before the implementation.
- Account/container structure and ownership.
- Use Proper Naming Conventions.
- Give GTM control only to the right people.
- Leverage Workspaces.
- Use GA Settings Variable.
- Consider using constant variables.
- Use Lookup/Regex Tables.
Remote SEO (Search Engine Optimisation)…
Schema.org is a collection of schemas for structured data markup (sometimes called “schema markup”) that helps search engines better understand content on websites. Implementing this markup on a site can also improve how that site's listings appear in SERPs.
- Step 1: Ensure Your On-Page Content Structure Meets Google Guidelines. ...
- Step 2: Create the Necessary JSON-LD Code. ...
- Step 3: Google Tag Manager Setup & Testing.
The Schema Generator processor generates a schema based on the structure of a record and writes the schema into a record header attribute. The Schema Generator processor generates Avro schemas at this time. Use the Schema Generator processor to generate a basic schema when the schema is unknown.
What is Google schema? ›Schema markup is code that helps search engines to understand your content and better represent it in the search results. You've probably already encountered marked-up content in the form of rich snippets: But schema markup can do more than that and help your SEO in other ways.
How do you use a schema markup generator? ›- Step 1: Select a Data Type. Choose one of the common data types from the given list. ...
- Step 2: Paste Your URL. Paste the URL of the page you want to add markup to. ...
- Step 3: Start Marking Up Your Page. ...
- Step 4: Generate HTML. ...
- Step 5: Add the Markup to Your Site. ...
- Step 6: Test Your Structured Data.
How will you create an XML schemas? ›
- Open an XML file in Visual Studio.
- On the menu bar, choose XML > Create Schema. An XML Schema document is created and opened for each namespace found in the XML file. Each schema is opened as a temporary miscellaneous file. The schemas can be saved to disk, added to your project, or discarded.
...
Procedure
- Click File > New > Other. A window opens in which you can select a wizard.
- Expand XML, select XML Schema File, click Next. The Create XML Schema wizard opens.
- Select a parent folder and enter a file name for your XML schema file.
- Click Finish.
General Quota Limits
The following quota limits apply to all requests made to the Tag Manager API: 10,000 requests per project per day. 0.25 queries per second (QPS) per project.
But it looks like Google Tag Manager isn't going away anytime soon: it's very popular, and the number of free and paid GTM resources is also constantly increasing. Also, if you're stuck with GTM, you can always get help in various places, e.g. GTM subreddit, GTM community on Facebook.
Do hackers use Google Tag Manager? ›Hackers are abusing Google's Tag Manager (GTM) containers to install malicious e-skimmers that steal payment card data and personally identifiable information of shoppers on e-commerce sites, according to a new report from Recorded Future.
What is the difference between tags triggers and variables in GTM? ›In triggers, a variable is used to define filters that specify when a particular tag should fire. (e.g.: fire a trigger when the url variable contains “example.com/index.html”). In tags, variables are used to capture dynamic values (e.g.: pass a transaction value and product ID to a conversion tracking tag).
What is the benefit of schema markup? ›Schema markup informs the search engine precisely what your content is trying to convey on your web page. It converts unstructured data into structured data. Adding schema will help the search engine crawl better, raising the websites ranking while keeping other best practives of SEO in mind.
Is schema markup a ranking factor? ›The consensus among SEO professionals had long been that while schema was useful, it was not a ranking factor.
How do I create a FAQ schema? ›You can click the 'Add One' button for additional questions. If you're using the classic WordPress editor, then you'll notice a new button in the menu bar. Simply click that to add the FAQ schema markup. Once you click that button, a form will appear.
How do I create a custom variable in Google Tag Manager? ›- In the left navigation, click Variables.
- In the User-Defined Variables section, click New.
- Click Variable Configuration and select the desired variable type.
- Enter configuration options for the selected variable type.
- Name the variable. ...
- Click Save.
How do I create a trigger in Google Tag Manager? ›
...
Create a new trigger
- Click Tags. New.
- Click Trigger Configuration.
- Select the trigger type you would like to create.
- Complete the setup for the selected trigger type.
Just to recap, article schema markup is a piece of code that sits behind blog posts and news articles that gives search engines more information about the content on the page.
What is a schema template? ›A schema describes the specifications of a Deployment Manager template. If a schema exists for a template, Deployment Manager uses the schema to enforce how users can interact with the corresponding template. Schemas define a set of rules that a configuration file must meet if it wants to use a particular template.
What are the 3 types of schema? ›Schema is of three types: Logical Schema, Physical Schema and view Schema.
What are the 5 types of schemas? ›- Abandonment/Instability.
- Mistrust/Abuse.
- Emotional Deprivation.
- Defectiveness/Shame.
- Social Isolation/Alienation.
There are many types of schemas, including object, person, social, event, role, and self schemas. Schemas are modified as we gain more information.
What's the difference between schema and structured data? ›Where Schema is the language in which you present your content, structured data is the actual data you provide. It describes the content on your page and what actions site visitors can perform with this content. This is the input you give search engines to get a better understanding of your pages.
What is the best example of a schema? ›Examples of schemata include rubrics, perceived social roles, stereotypes, and worldviews.
How to generate JSON schema from JSON file? ›- Click File > New > Other. A window opens in which you can select a wizard.
- Expand General, select File, click Next. The Create New File window opens.
- Select a parent folder and enter a file name for your JSON schema file. Give the file an extension of . schema. ...
- Click Finish.
- Select a CSV file. Add your CSV file (we'll work with it within your browser; it won't get uploaded anywhere unless you choose to do the validation step at the end).
- Check the auto-detection. ...
- Save the JSON Table Schema. ...
- Validate.
What is the use of schema Builder tool? ›
The schema builder is a simple graphical interface for visualising and editing the data model of your Org. The schema builder can get all fields from an Object, perform basic impact analysis of changes to an Object, and show all dependencies on an Object, without having to click from page to page.
What is the difference between XML and XML Schema? ›XSD (XML Schema Definition) specifies how to formally describe the elements in an Extensible Markup Language (XML) document. Xml: XML was designed to describe data.It is independent from software as well as hardware.
Can I generate XSD from XML? ›With the desired XML document opened in the active editor tab, choose Tools | XML Actions | Generate XSD Schema from XML File on the main menu. The Generate Schema From Instance Document dialog box opens. and select the desired file in the dialog that opens.
How to create xsd schema? ›In Visual Studio, open the File menu and select New > File. Or, use the Ctrl+N keyboard shortcut. In the New File dialog box, select XML Schema and then select Open. A new file is created.
What language are XML schemas written in? ›XML Schemas are extensible, because they are written in XML.
How do I convert Excel data to XML Schema? ›Click File > Save As, and select the location where you want to save the file. , point to the arrow next to Save As, and then click Other Formats. In the File name box, type a name for the XML data file. In the Save as type list, click XML Data, and click Save.
What is the difference between DTD and XML Schema? ›XML schemas are written in XML while DTD are derived from SGML syntax. XML schemas define datatypes for elements and attributes while DTD doesn't support datatypes. XML schemas allow support for namespaces while DTD does not. XML schemas define number and order of child elements, while DTD does not.
How do I add FAQ schema markup? ›You can click the 'Add One' button for additional questions. If you're using the classic WordPress editor, then you'll notice a new button in the menu bar. Simply click that to add the FAQ schema markup. Once you click that button, a form will appear.
How do I add custom variables to Google Tag Manager? ›- In the left navigation, click Variables.
- In the User-Defined Variables section, click New.
- Click Variable Configuration and select the desired variable type.
- Enter configuration options for the selected variable type.
- Name the variable. ...
- Click Save.
FAQ schema is specialized markup you can add to a webpage's code that contains a list of questions and answers. Google then reads this markup and uses it to generate a rich snippet. Like this one: This FAQ rich snippet shows a collapsible list under your typical SERP result.
Does Google Tag Manager set a cookie? ›
Google tags set and read cookies to identify unique users across browsing sessions. Cookies are small files saved on peoples' computers to help store preferences and other information that's used on web pages that they visit. Google uses cookies in various ways.
Can you use GTAG and Google Tag Manager? ›Google Ads and Google Marketing Platform tags are fully supported by Tag Manager, and there is no need to deploy additional gtag. js-based code on your site if Tag Manager is already in use. If you're already using gtag. js, you can always upgrade to Tag Manager at a later date.
How do I manually add a schema? ›- Step 1: Enable Custom Fields. From your WordPress Dashboard, access the page or post you intend to add Schema to. ...
- Step 2: Generate Your Code. You can create your Schema markup code via Google's Structured Data Markup Helper. ...
- Step 3: Insert the Code. ...
- Step 4: Update Your Header File.
Content guidelines. Only use FAQPage if your page contains FAQs where there's a single answer to each question. If your page has a single question and users can submit alternative answers, use QAPage instead.
What is the difference between tags triggers and variables in GTM *? ›In triggers, a variable is used to define filters that specify when a particular tag should fire. (e.g.: fire a trigger when the url variable contains “example.com/index.html”). In tags, variables are used to capture dynamic values (e.g.: pass a transaction value and product ID to a conversion tracking tag).
What is the difference between tag and trigger in GTM? ›Tag: A tag is code that send data to a system such as Google Analytics. Trigger: A trigger listens for certain events, such as clicks, form submissions, or page loads. When an event is detected that matches the trigger definition, any tags that reference that trigger will fire.
How to create JavaScript variable in GTM? ›- Click on Variables in Google Tag Manager.
- Scroll down to the "User Defined" variable section.
- Click on "New"
- Click in the middle to configure the new variable.
- In the next window under "Page Variables" select "JavaScript Variable"
Verify Schema.org Markup
Enter the URL of the webpage and click Check Schema.org markup on Google. This will open Google's Rich Results Test and display the detected Schema.org markup.