Google TagManager - Adding Schema Markup - The Non-Developer Guide
Google Tag Manager has many uses, but one of my favorite things to do is add schema code using GTM. Honestly this is probably my favorite Google product to date, and unleashing its power to help you crush the SERPs is what I am here to show you. Google loves structured data, and personally I do not see that changing any time soon. Using the GTM tag system, we are able to add markup for just about anything by creating tags. As someone who does this at an agency, Tag Manager has made markup considerably easy and I hope this can apply to others.
What is Google Tag Manager?
If you have not heard of Google Tag Manager, you can read all about it at: https://www.google.com/analytics/tag-manager/. I suggest you learn as much as you can about it, as it really is a powerful tool when used right.
In "simple" terms, GTM is a tag management system that allows you to create and deploy different tags (Analytics, Remarketing, Transactions) through a container placed on your website. You then can set "tag-firing triggers" that define what pages of your site the tags are deployed in. One of the biggest advantages of GTM is adjusting event tracking without touching the code, as you will see below, it makes changing schema easy without the risk of breaking the website. It has a very eye pleasing user interface so even non-developers can create tags without touching code.
What Schema Can I Use With GTM?
Schema.org is the structured data vocabulary that we will be using in this GTM demo. I love Schema, it is so powerful, yet so many websites either have poor implementation or are not using it at all. You can literally markup just about anything, and the benefits from doing this can really pay off in the search results. Visit Schema.org to learn more.
JSON-LD is the format of my choice and the following examples will be using them.
How to build a tag and Ball Out
After you have created your GTM account and have the container snippet on your website, you can create your first tag. Since local SEO schema is important, we will build a Local Business Schema tag and deploy it on a contact page.
Step 1
Create A New Tag. by clicking the "Add New Tag" link from the main interface.
Step 2
Name Your Tag - Keep It Simple, and Make It Easy To Remember.
Step 3
Choose your tag product/type - Navigate to the "Custom HTML" button and click.
Step 4
Add Your Schema To The Tag - Can be found in JSON-LD format at http://schema.org/LocalBusiness. You can also use the Schema Creator: http://schema-creator.org/ to create your schema code quickly.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"address": {
"@type": "PostalAddress",
"addressLocality": "Mexico Beach",
"addressRegion": "FL",
"streetAddress": "3102 Highway 98"
},
"description": "A superb collection of fine gifts and clothing to accent your stay in Mexico Beach",
"name": "Beachwalk Beachwear & Giftware",
"telephone": "850-648-4200"
}
</script>
There are a few settings you will see, I do not use them, but I encourage you to learn about them. So leaving other settings as is - You can click continue after you have added the code. Remember to always proof your code for errors. It all starts with you ;)
Step 5
Set Your Tag Firing Triggers - This tells us what pages the tag will fire on. - Choose The "Some Pages" Option
For this tag we will be setting it up to fire on the contact page. If you would like to set it to fire on every page, just click the "All Pages" option. For this tutorial we will be going one step further. Select the "Some Pages" option as pictured below.
This is going to bring up a new popup called "Choose Pages". This allows us to choose the pages we want it to fire on. It uses variables and operations that can be used for firing rules. If you are familiar with Regular Expressions, you may also use those as well. We will be making this tag ONLY fire on the homepage. So name your triggers accordingly as they are reusable!
Click the red "New Button"
A new row will appear with Name, Variable, Operation, and Value. This is where we tell our tag where to fire. For this tag we will be using an exact URL match for the firing conditions. In human terms we are telling Google Tag Manager we only want the tag fired on the contact page. Click save after you have the settings entered.
Here are the settings:
Variable: Page URL
Operation: Equals
Value: http://www.yourdomain.com/contact (Or whatever your contact/location page url is)
You should then see the "Contact Page" trigger at the bottom of the page. It should look like the image below. Click the "Create Tag" button after you have confirmed all looks good.
Step 6
Testing Your New Tag, Validation, and Publishing Your GTM Container
One amazing feature of Google Tag Manager allows you to debug your tags in your browser using "Preview Mode". This allows us to test tags before deploying any code on the site.. GTM is able to do this because they work in versions. You work on a version, but your changes are not live until you publish the newest version. This is great because it allows us to created different versions of GTM containers to use in say a seasonal manner. It also helps with learning as you can preview any version. In the top nav you can see the version you are editing and the unpublished changes compared to the live version.
Ok, so now we have our tag and we want to check that it is working properly before we publish the tag. There is a dropdown arrow to the side of the "Publish Button", we want to expand the dropdown and choose "Preview And Debug".
You should now see an orange banner that says "Now Previewing Version X". You will also see there are a few options in that header banner. When you want to update the preview, you will need to click refresh from this banner. Also when you are done using the preview mode, make sure to click " Leave Preview Mode" unless you want to see the GTM preview every time you are on your website. I have not used the "Share Preview" feature, so I can not speak on how to use it!
The next step is to browse to your contact page to begin the testing. Depending on if you are using GTM to implement your Google Analytics tracking, (you should) you might only see the tag we build firing. As you can see in my example below, I am using GTM for universal analytics, Local Business Schema, and my Org Schema test I am doing for the knowledge graph. This interface actually is pretty cool. There is a navigation box to the left that include: Summary, Page Load, DOM Ready, Pageview.
Make sure the "Summary Tab" is the current view. You should see "Tags Fired On This Page:" as well as "Tags Not Fired On This Page". You should see the Local Business Schema tag as fired on your contact page.
If you can see the tag firing and working as intended, it is time for validation. If the tag is not showing as "Fired" you will need to retrace your steps for errors.
Which brings us to validation. This is a step you MUST do to ensure Google and other search engines see your structured data with no errors.
Browse to Google's structured data testing tool at - https://developers.google.com/structured-data/testing-tool/. You can copy and paste your source code if you would like, but I prefer to just let Google fetch the URL so I know what they are actually seeing.
On the next screen you should see the source code for the URL that you had the tool fetch, as well as the results of the structured data located on the page. On the right side of the page you should see the status of the structured data on the page. If it looks like the below image, you are good to go!
Now that we are all validated, it is time to publish the GTM container to our live website. Navigate back to Google Tag Manager, and into your account with the container. From there click the "Publish" button located in the upper right hand corner. This will bring a prompt up like the one in the image below. Click publish now, and start adding more structured data with Google Tag Manager!
This is Just The Tip Of The GTM Iceberg
Google created a really powerful tool. I work at an agency and using GTM for things like this really help with organization as well as troubleshooting. There are a ton of different things you can do with this tool, I personally think it is a good way to learn some code as well as they way things work together from a data standpoint. For those of you that want to learn more about GTM, I highly suggest reading the fundamentals course that Google offers in Analytics Academy. Good luck out in the world of Schema and Google Tag Manager!
 |
Zack Hayes is an SEO Consultant for Blizzard Internet Marketing specializing in real estate and vacation rentals. He offers independent SEO and branding services for digital presence growth. |