Generating structured data is a great solution for a page content to be organized and looks different from other results on the search result page. Based on what type of CMS your website is, there are different ways to generate structured data for your posts, products, and pages.
If your website is among the ones on which JavaScript is used for loading dynamic content, this article is here to help you by providing practical information about generating structured data by using Google Tag Manager.
Generate structured data with JavaScript #
As mentioned earlier, websites that use JavaScript for their dynamic content, can generate structured data by use of the JS. There are two common ways:
- Using Google Tag Manager
- Using custom JavaScript
In this article, the first method, Google Tag Manager, is going to be covered, but you can read more about using custom JavaScript on Google Developers structured data with JavaScript article. If you have already installed the GTM on your website, you can read how to insert static structured data using Google Tag Manager section.
How to install and setup Google Tag Manager on a website #
The first step before starting structured data generation, is to install and set up Google Tag Manager on your website. You can follow the steps below to create a GTM account:
1. Log into your google account through https://tagmanager.google.com/
2. Click on the “Create Account” on the top right side.
Create new account in Google Tag Manager
3. Choose a clear name for your account (business or website name is suggested)
4. Select the country of the business.
Account setup section in Google Tag Manager
5. In the Container Setup section, add a name in the Container name field.
6. Select an option in the Target platform between Web, iOS, Android, AMP, and Server.
7. Press the “Create” button to create the new account.
Container setup in Google Tag Manager
After creating a new account in Google Tag Manager panel, you need to add the GTM script to your website by following the steps provided below:
1. In the new account workspace, click on the GTM ID.
2. Copy and paste the piece of the code in the head of your website.
3. Copy and paste the piece of the code in the tag.
Google Tag Manager script
NB: You can add the GTM script whether to all pages of your website or to just some of them which you are going to track or have structured data on.
How to insert static structured data using Google Tag Manager #
After installing Google Tag Manager on your website, the next step is to generate JSON-LD structured data with it. By following the steps below, you can generate dynamic structured data with using GTM:
1. In the Tag Manager workspace, head over to the Tags section.
2. Click on the “New” button to create a new tag.
Adding new tag in Google Tag Manager
3. Write a tag title.
Tag title in Google Tag Manager
4. In the Tag Configuration section, add a Custom HTML tag type.
Custom HTML tag in GTM tag list
5. In the opened Custom HTML area, enter the structured data that you are going to have on your website.
NB: You can find the structured data type which best suits your website content by visiting Google Developers structured data gallery or Schema.org
Structured data sample in custom HTML tag in GTM
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Apple crumble cookies",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"author": {
"@type": "Person",
"name": "Brenda Smith"
},
"datePublished": "2018-03-10",
"description": "This apple crumble cookieis are fruity, crumbly, and buttery!",
"recipeCuisine": "British",
"prepTime": "PT5M",
"cookTime": "PT24M",
"totalTime": "PT29M",
"keywords": "Apple cookie",
"recipeYield": "24 serving",
"recipeCategory": "Cookie",
"nutrition": {
"@type": "NutritionInformation",
"calories": "89 calories"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"recipeIngredient": [
"100 g dried apple",
"200 g self-raising flour",
"100 g unsalted butter , (cold)",
"100 g caster sugar",
"1 large egg"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Chop the dried apple into small pieces, add the flour, butter,sugar, and salt. Mix the mixture for one minute."
},
{
"@type": "HowToStep",
"text": "Add the large egg to the mixture."
},
{
"@type": "HowToStep",
"text": "Divide the dough into 24 pieces, then press down into 4cm rounds."
},
{
"@type": "HowToStep",
"text": "Bake for 8 to 10 minutes, or until lightly golden."
}
]
}
</script>
6. Save the tag by clicking on the “Save” button.
7. Publish the container by clicking on the “Submit” button to have the structured data tag on your website.
For specifying on which pages, the structured data tag be fired, you can follow the steps here:
1. Head over to the Triggers tab
2. Click on the New button
Adding new trigger in GTM
3. Choose a clear name for the trigger.
4. Click on the Trigger Configuration
Adding trigger title in GTM
5. Select Page View trigger type.
Choosing page view from trigger type list in GTM
6. On This trigger fires on the section, select Some Page Views.
7. Select Page URL from the left dropdown.
8. Select Equals from the middle dropdown.
9. Paste the complete page URL where the trigger is going to be fired. For example, if you want to have the Local Business structured data, you can add the “Contact Us” URL to this field.
10. Press Save to keep the changes
Trigger configuration in GTM
Generating dynamic structured data with Variables in Google Tag Manager #
The Variables in Tag Manager is a good solution to avoid mismatching in the inserted SD and content of the page. By using variables in GTM, you can add some information from the page dynamically. Let’s continue explaining more about using variables by an example. Imagining you provide recipe instructions on your website and the name of the recipe instructions is the same as the page title, so you can define a custom variable in GTM named “recipe-title” by following the steps below:
1. In the GTM workspace, head over to the Variable tab.
2. Choose the suitable variables which to be used in the structured data.
Built-in variables in Google Tag Manager
NB: If you do not see the suitable variable in the Built-in Variables list, there are two solutions:
1. Press the Configure button and look for the variable which you are looking for.
Variable configure button in GTM
2. Create a custom variable by following the instructions below:
2.1. In the UserDefined Variables section, click on the “New”.
Adding new User-Defined variable
2.2. Choose a clear name for the custom variable (here, the name of the variable is “recipe-title”).
2.3. From the variable configuration, select the right variable type
2.4. Save the variable.
Choosing variable type from list in GTM
Then you can use the defined variable in the Custom HTML tag.
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "{{recipe-title}}",
"image": [
"https://example.com/photos/photo.jpg"
]
}
</script>
How to test generated structured data with with Rich Result Testing tool #
Testing the generated structured data with GTM is the last step and it is here to make sure everything works fine on your website and Google can detect the generated SD and index it without any problem. To test a page containing the structured data, you can follow the steps below:
1. Open Rich Results Test.
2. Copy and then paste the desired page URL into the “Enter a URL to test” field.
3. Press the “TEST URL” button.
Rich results testing tool
What to consider about generating structured data using GTM #
If you are using Google Tag Manager for generating structured data on your website, it’s better to consider that if the structured data is located in the DOM and can be loaded without any need to run JavaScript, so it can be indexed faster. Otherwise, the Google bot should crawl the whole page, read the page’s resources, execute the JS, and render the page in order to access the structured data. This may take more time to be done and results in the delayed access to the structured data by Google bots.
Conclusion
Providing structured data is a necessity to have different types of content organized and look different on the search result page. If you are using CMSs like WordPress, it is possible to use related modules and plugins or generate a custom SD by using Google Tag Manager or Custom JavaScript. Generating structured data using GTM can be easily done by just installing and enabling GTM on your website, then inserting the structured data which is suitable for your website.
