Install the Required Tools

Here are the tools required tools for this tutorial

Google Tag Manager: Create an account with Google Tag Manager. Following the creation of your account, it is necessary to install the provided GTM code across all pages on your website. This is a crucial step to ensure proper schema installation and management.

SelectorGadget: Selector Gadget is an open source Chrome Extension that makes CSS selector generation and discovery on complicated sites a breeze. There is a tutorial video and a bookmarklet version available at https://selectorgadget.com

In case you are building knowledge graphs and semantic schema networks, use the following recommended tool.

Suggested Tools

If you are familiar with network theory and you would like to create markups on an advanced level, by building knowledge graphs and semantic schema networks, you can use this tool. In case you dont know how to, and you want to learn structured data for semantic SEO sign up for my course.

Schemantra: If you don't have your structured data set up yet, consider using Schemantra. This unique tool, designed for semantic SEO, combines the functions of a schema generator and an ontology constructor.

Schemantra lets you define your primary entity and its relations on the page, providing search engines with a clear understanding of your site and removing any ambiguities. Simply put, Schemantra puts you in charge of illustrating your site's semantic blueprint.

Now that all the required and the recommended tools are ready let’s start by identifying what kind of schema markups we need to describe our page.

Identify the Schema Types That You Want to Implement and Their Required Properties

When deciding on the type of schema markup to implement, you should first identify the type of schema that represents the content on your page. Here's a step-by-step guide:

• Identify Your Content Type: Analyze your website and understand what kind of content you have. It could be articles, products, recipes, events, etc.
• Check Schema.org: Look for the schema type that best matches your content. For instance, if you are a book retailer, you might use the 'Book' schema. Here is a comprehensive list of all schema types.

• Review the Required and Recommended Properties: For example, the 'Book' schema requires properties like 'name' (title of the book), 'author', 'workExample' (specific edition of the book), and recommends properties like 'isbn', 'numberOfPages', etc. here is a list of the most important schema types and their required and recommended properties.

Having identified the schema type we wish to implement on your website, the next step is to create the corresponding schema template.

Create a Schema Template

A schema template is a structured data model that you create to represent the type of data you wish to mark up on your website. This template is a blueprint that can be repeatedly used for similar types of content, making the markup process easier and more efficient. Once you have identified what type of schema is needed and its required properties.

• Build the Template: Go to Schemantra to generate any type of schema needed to describe your page.
• Test the Template for errors: Use a tool such as Schema Validator Tool to make sure your template doesn't have any errors.
• Test the template for the required and recommended properties: Use a tool such as Google’s Structured Data Testing Tool to make sure your template matches the required and the recommended properties for rich results of featured snippets.

Remember that each type of content will have its own specific schema, so you might need to create several different templates if your site has diverse content.

In this example, the schema template defines a BreadcrumbList schema using the JSON-LD format. It includes the following properties: name and item

JSON_LD Code Example for a BreadcrumbList

<script type=”application/ld+json”>
{
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": "1",
        "name": "Home",
        "item": "https://schemantra.com"
      },
      {
        "@type": "ListItem",
        "position": "2",
        "name": "Complete List of Schemas",
        "item": "https://schemantra.com/schema_list"
      },
      {
        "@type": "ListItem",
        "position": "3",
        "name": "Accommodation",
        "item": "https://schemantra.com/schema_list/BreadcrumbList"
      }
    ]
  }
</script>

After successfully creating the schema template, the next step is ensuring our schema accurately represents the content of every page. To do that we have to identify the dynamic content.

Identify Dynamic Content

To identify the properties that you would like to be replaced dynamically, consider your content and identify the elements that change for each instance. In this example, if you are creating a template for a BreadcrumbList schema, properties like 'name',and ‘item’ would likely be different for each list item and therefore should be replaced dynamically.

<script type=”application/ld+json”>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "",
    "item": ""
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "",
    "item": ""
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "",
    "item": ""
  }]
}
</script>

Now that the dynamic content is identified we have to turn these values into variables.

Transform Values into Variables

Inserting variables for schema in Google Tag Manager allows for dynamic and personalized schema markups for each page. Variables act as placeholders for data that is dynamically injected into the schema markup.

To do this, substitute each blank property with a suitably named variable. Select variable names that best resonate with their function or purpose. Encase these variables within double curly braces, as this is the standard syntax Google Tag Manager uses to identify variables.

<script type=”application/ld+json”> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "{{first_bread_crumb}}", "item": "{{first_bread_crumb_url}}" },{ "@type": "ListItem", "position": 2, "name": "{{second_bread_crumb}}", "item": "{{second_bread_crumb_url}}" },{ "@type": "ListItem", "position": 3, "name": "{{third_bread_crumb}}", "item": "{{third_bread_crumb_url}}" }] } </script> 

Note that, it's recommended to generate your BreadcrumbList schema template to the depth of your most nested page level. This is because, if a value is absent, the corresponding list item will be automatically removed from the schema. And this will make sure the BreadCrumbs work on every page.

Moreover, these variable are user defined meaning that i will be creating them using Google Tag Manager. But before that we have to identify the CSS selectors using SelectorGadget tool.

Get the CSS Selectors for the Target Elements

After having installed the SelectorGadget extension on you Chrome browser, go to the desired page and launch it. A box will open in the bottom right of the website. We want to select the first element on the BreadcrumbList to make it dynamic. Once its done, we do the same process for the second and the third element.

• Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element in the bottom of the screen, and will highlight (yellow) everything that is matched by the selector. In this case the gadget will highlight all three elements.
• Now to select one element only, click on the other highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs. In this case the goal is to highlight only one element.
• Once you highlight one element, you can copy the selected css code from the bottom of the page.
• Repeat the same process for the second and third element.

For more info There is a tutorial video and a bookmarklet version available at https://selectorgadget.com Now that we have the css code of the elements selected, let’s go and create the variables in GTM.

Create the Variables in GTM

Now let’s create the variables that will insert information into our schema code using Google Tag Manager. For the BreadCrumbList, we aim to create a couple of variables including bread crumb item name and url.

To create the name variable

• Open Google Tag Manager and access the left menu.
• Click on "Variables" to access the variable management section.
• Scroll down to user defined variable and click ‘New’
• Click on the variable configuration and select “DOM Element”
• In the DOM Element select CSS Selector from the "Selection Method” menu
• Name this variable “first_bread_crumb” and click save.
• Repeat the same steps for the second and third names.

To create the item variable

• In the user defined variable click ‘New’.
• Click on the variable configuration and select URL.
• Click on “More Settings”
• In the “URL Source” menu select “first_bread_crumb”
• Name this variable “first_bread_crumb_url” and click save.
• Repeat the same steps for the second and third URLs. Now that the variables are created, we have to deploy the code.

Deploy Your JSON-LD Code Using Google Tag Manager

Google Tag Manager (GTM) can be a great tool for implementing dynamic schema markups, especially for non-technical users who may not be comfortable directly editing the website's code.

Deploying a schema code using Google Tag Manager is a straightforward process. Here's a step-by-step guide on how to deploy schema markup using GTM:

• Log Into Google Tag Manager
• Create a New Tag: Once inside the container, click on "Tags" in the left-hand sidebar, then click "New" to create a new tag.
• Configure Your Tag: Click on "Tag Configuration" and choose "Custom HTML" as your tag type. In the HTML text box, paste your JSON-LD schema markup code.
• Set Up a Trigger: Now you got to define when this tag should fire.
• Click on "Triggering" below the tag configuration. You can choose a pre-existing trigger or create a new one based on your needs. For example, if you want the schema markup to appear on every page, you could choose the "All Pages" trigger.
• Save Your Tag: Click "Save" to finish creating your tag.

Before pushing it live, use the "Preview" mode in GTM to test your tag and ensure it fires correctly on your website.

Test Your Implementation (Preview/Debug Mode)

Testing a tag before deploying it in Google Tag Manager (GTM) is a crucial step to ensure its correct functionality and prevent potential errors or issues.

• Click “Preview” in the upper right corner.
• Enter the a URL you’d like to test and click “Connect.”
• Confirm that Tag Assistant has connected.
• Select the “Window Loaded” or “Container Loaded” from the left menu.
• Click on the “Variables” tab (with “Window Loaded” selected) to confirm your variables are working as intended.
• If you can’t see the values of the variables you created, make sure the CSS selector is correct by following the previous steps
• Go back to the page opened via GTM and click finished. Now that everything is working as expected let’s go live and submit the changes

Submit Your Changes

Once you've verified everything works as expected, click "Submit" to publish your changes. This will push your schema markup live on your website.

Conclusion

Wrapping up, keep in mind that this technique can be used for almost any page type, note that some websites have very complex and unorganized CSS selectors and this method might not always work. Therefore I'm building this course that teaches advanced schema creation and automation techniques and can work with any website. With these techniques, not only can you add dynamic schema to your current pages, but you will also handle building and inserting schema code for any website on scale. If you are interested, learn more about this structured data course here.