Post on 10-Feb-2022
transcript
Technical SEO 1 training – Module 2.1
Google Tag Manager and structured dataIn the previous lessons you learned a lot about structured data,
Schema.org and JSON-LD. In this lesson, Joost discussed in the video
how to actually implement structured data using the JSON-LD
Schema.org markup on the pages of your site. In the following text,
we’ll take a closer look at how to put Schema.org on your pages using
Google Tag Manager. When we use the term structured data in this
text, we are referring to the JSON-LD Schema.org markup.
Google Tag Manager
With Google Tag Manager, Google has developed a tool that can take
your marketing to the next level without the need of a developer. It’s a
tool which can easily add scripts or pieces of code to a page. You can
use Google Tag Manager to implement Google Analytics and create, for
instance, events. There are several advantages to using Google Tag
Manager to implement structured data. The most important one is
that it allows you to generate tags, triggers, and variables, which
means that you can apply the same code again and again on different
pages. In the end, this will save you a lot of work. Google Tag Manager
also features a preview mode, which allows you to check whether you
successfully implemented your data immediately.
Joost recorded a training video in which he explains how to add
a JSON-LD structured data script to your pages using Google Tag
Manager. In this text, we’ll give you a step-by-step instruction
of what Joost is showing you in his video.
‘‘With Google Tag Manager, Google has developed a tool that can take your marketing to the next level without the need of a developer’’
2Structured data training – Module 2.1 – Google Tag Manager
How to get to Google Tag Manager
Google Tag Manager is a free tool, so we can’t think of a reason not
to sign up for it. You can sign up by visiting the following page:
https://www.google.nl/analytics/tag-manager/. You will then be
guided to a dashboard that you can reach by going to the following
page: https://tagmanager.google.com/.
When you first visit Google Tag Manager, you’ll need to create a
container. The container is where you contain or keep all your tags.
In this case, you probably want to add the structured data tag to your
website, so choose ‘Web’.
Before you can actually use Google Tag Manager on your website,
you need to add a piece of code to your pages. The process is similar
to what you do when adding the Google Analytics tracking code.
3Structured data training – Module 2.1 – Google Tag Manager
If you’re using WordPress, you can easily add the Google Tag Manager code
using a plugin called DuracellTomi's Google Tag Manager for WordPress:
https://wordpress.org/plugins/duracelltomi-google-tag-manager/
Please note that you only have to use the GTM-XXXX code.
If you’re using another CMS, please visit the quick install guide:
https://developers.google.com/tag-manager/quickstart for more
information about how to get started.
When you’re all set up, you can take the following steps. In the
end, you’ll have added structured data to a page or multiple pages
on your site!
Understanding how Google Tag Manager works
Google Tag Manager serves a wide range of purposes. In this text,
however, we’re just going to cover all aspects that are important for
implementing structured data to pages of your website.
What you need to understand first is how Google Tag Manager works.
Basically, there are three elements that are important for implementing
structured data with Google Tag Manager.
• Variables
• Triggers
• Tags
You can find these elements on the left hand side of your workspace.
A workspace is simply a place where you can work on creating and
adding pieces of code to your pages.
4Structured data training – Module 2.1 – Google Tag Manager
Tags
A tag is a piece of code that can be fired on a page of your website.
You can put many things in a tag. For instance, you can add the Google
Analytics tracking code in a tag. This tag will enable Google Analytics
to track your website. Similarly, you can also put your structured data
code in a tag. In other words: a tag contains information as to what
you want to add to a page.
Triggers
Tags only work when there’s a trigger attached. You need a way of
telling Google Tag Manager under which condition a tag must be used,
or fired as we like to call it. For instance, the tag that contains the
Google Analytics tracking code only works if there’s a trigger saying it
should fire on all pages when a page is viewed (pageview). If you have
a structured data tag, the trigger tells Google Tag Manager on which
pages to fire that tag. This is because it’s possible that not all your
pages need a recipe structured data markup, for instance. A trigger can
be either true or false. Simply put, a trigger tells Google Tag Manager:
“Please fire this tag on these pages, but not on these pages”. In short,
a trigger contains information as to when to fire a tag on a page.
‘‘Google Tag Manager is a free tool, so we can’t think of a reason not to sign up for it’’
5Structured data training – Module 2.1 – Google Tag Manager
Variables
Variables serve two functions. First of all, triggers need variables
to know whether or not to fire. Suppose Google Tag Manager runs
on your page. If the value of the variable meets the conditions
you set, the trigger will fire. This, in turn, allows the tag to work.
Now, the second function of variables comes into play. The variable
provides Google Tag Manager with variable information. This means
that the information can be different in different contexts. A Date
Published, for example, will be different for every eBook you publish.
Variables allow you to categorize information. If the trigger fires,
Google Tag Manager will then fetch the specific value from the
specific page it visits.
An example of a variable is the URL of a page, but you can use any
element of a page as a variable. It could be an ‘Add to cart’ button,
or the H1 of a page, for example. The most commonly used variables
are predefined in Google Tag Manager. But things like buttons or the
H1 are variables you have to define yourself. In short: if you make a
variable for H1, Tag Manager will take the post title from the page
(the h1) and display it in the structured data.
With variables, you can edit your code in such a way that it will take
elements from the current page to use in tag.
Adding JSON-LD to your site step by step
Now, we’re going to guide you through implementing structured data
on your pages. Since this is a course, we’ll take the type Course as an
example. We’re going to use the schema.org structured data for
courses. As stated before, we will use JSON-LD markup. There are
five steps to take:
• Step 1: Creating structured data
• Step 2: Creating tags and triggers
• Step 3: Creating variables
• Step 4: Triggering your code
• Step 5: Validating and publishing your code
6Structured data training – Module 2.1 – Google Tag Manager
Step 1: Creating the structured data code for Google Tag Manager
In the training video of the first lesson of module 2, Joost shows
you how to use the markup helper. If you go to the markup helper:
https://www.google.com/webmasters/markup-helper/, you can
create your own markup.
In this example, we’re using the Course markup, which looks like this:
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Course", "name": "Site structure training", "description": "Learn how to create site structure for your site that makes Google understand your site and makes visitors go where they need to be", "provider": { "@type": "Organization", "name": "Yoast", "sameAs": "https://yoast.com/" }, "offers": { "@type": "Offer", "price": "99", "priceCurrency": "USD" }}</script>
‘‘Before you can actually use Google Tag Manager on your website, you need to add a piece of code to your pages ’’
7Structured data training – Module 2.1 – Google Tag Manager‘‘Variables, triggers and tags are three
elements that are important for implementing structured data with Google Tag Manager ’’
After you’ve created your markup, you’ll need to make it Google
Tag Manager-ready. The only thing you need to do is go to:
http://yoa.st/json/, paste the piece of code and hit the submit button:
The tool will create a piece of code you can use in Google Tag Manager:
Copy the piece of code. You’ll need it for the tag you’ll be creating in
Google Tag Manager.
8Structured data training – Module 2.1 – Google Tag Manager
Step 2: Creating tags in Tag Manager
After you’ve written your code and have run it through the script
helper, you’re ready to make your tags and triggers in Tag Manager.
You can do this by following the easy steps below:
• Make a new tag and give it a name (Site structure training,
for instance)
• Click Tag Configuration and choose tag type: Custom HTML
• Paste code from the script helper tool
• Check Support document.write
• Hit Save
9Structured data training – Module 2.1 – Google Tag Manager
Step 3: Creating triggers
Now that your tag is saved in the database, you need to add a trigger
so it knows when to fire the tag. You can do this in the same screen
you see in the screenshot above, or directly from the Triggers screen
in the Workspace.
Click on the Triggering space in your new tag and choose the correct
page view. Hit Save and your snippet is now implemented as is
(see below for working with variables).
If no triggers are implemented, you can add them in the same screen.
If you want a trigger to a specific page, you can copy the relevant
piece of the URL and add it to a new trigger. So if you only want to
trigger a tag on this page: https://yoast.com/academy/course/site-structure-training/, you need to copy the part /academy/course/site-structure-training/.
10Structured data training – Module 2.1 – Google Tag Manager
Hit the New or + button to add a new trigger. Give it a name and click
on Trigger Configuration. Choose Page View from the list of trigger
types and click on Some Page Views. You can now choose when the tag
should trigger and which conditions should be met before it’s possible.
In our case, we want to trigger the tag on https://yoast.com/academy/course/site-structure-training/. That’s why we’ll choose Page Path
and Equals from the dropdown, and paste in the URL in empty box.
Step 4: Creating variables
Variables make it much easier to implement the same structured
data on many different sites. You’ll be able to just apply the same
code again and again if you set your variables up correctly.
The variables can be found on the left hand side of the workspace
as well. You’ll get an overview of all predefined variables. There’s
also an option for user-defined variables. To create a variable,
click on “New”.
11Structured data training – Module 2.1 – Google Tag Manager
Clicking on “New” will take you to the following screen:
In the above screenshot, you’ll see the first 4 steps you’ll have to take:
1 Name the variable
2 Click on Variable Configuration
3 Choose variable type
4 In this example: DOM Element
12Structured data training – Module 2.1 – Google Tag Manager
The 4th step depends on the type of tag or trigger you want to create.
In this example, we’ll use a DOM Element. This might sound difficult,
but a DOM Element is a piece of your page, like DIV, HTML and BODY.
And in this example, the DOM Element is the H1, which is the most
important heading of the page.
Once you’ve clicked on the DOM Element, you need to choose which
method you want to use to select a page element with. In this case,
we’ll use a CSS Selector. By simply entering h1 into the element
selector, you’ve created a variable that grasps the H1 of a page.
If you want to use the meta description of a page, enter
meta[name="description"] and that variable will make sure
to add the meta description of your pages.
13Structured data training – Module 2.1 – Google Tag Manager
Once you’ve created these variables, you can use them in your tags.
As you can see, you can use the H1 variable for the “name” and Meta
description variable for the “description”. This will make sure that the
Course schema markup sends the right name and the right description
to Google.
Variables make this method of implementing structured data flexible
and scalable. In this way, you can make a piece of code that can be
used on many places, without having to add it manually or change
it for every instance. You only have to set up the tags once and
you’re done.
‘‘Variables make it much easier to implement the same structured data on many different sites ’’
14Structured data training – Module 2.1 – Google Tag Manager
Step 5: Test, saving and publishing
After you’ve set everything up, you’re ready test your code. Tag
Manager has a great Preview mode that lets you test code before
you publish it on a live site. Go to your Workspace in Tag Manager
to activate that mode. Hit Preview to start.
Now, in your browser, go to the page you're implementing structured
data on and refresh. You’ll see the Preview tab appear and this should
show you the tags that fired.
If you want to know more, you can go to the Window Loaded screen
to see if your variables were executed properly. If all is well, your H1
variable should now show the same value that’s visible on the site
(the title). Always test your code before publishing!
15Structured data training – Module 2.1 – Google Tag Manager
If all the information displayed in this screen is correct, you can
publish your tag. If there are still some flaws, go through the steps
again. In addition, Google can really help you out here.
To publish your tag, hit the ‘Submit’ button you see at the top right:
It will take you to the following screen:
16Structured data training – Module 2.1 – Google Tag Manager
Module 1.1
Module 3.2
Module 1.2 Module 2.1
Module 2.2 Module 3.1
Module 1.3
Give your version a descriptive name and press ‘Publish’. Congratula-
tions, you’ve just added the first piece of structured data to your site!
Once you’ve published your structured data tag, go to the
Google structured data testing tool: https://search.google.com/
structured-data/testing-tool and enter the URL of the page that
should now contain structured data. With this tool you can check
if the structured data is implemented correctly:
See no errors and warnings? Well done! If you do see errors, dive
in more deeply and read what Google has to say about it.