How to Implement SEO Changes Using Google Tag Manager

Posted by sam.nemzer

While working at Distilled, I often come across issues with implementing technical SEO changes to websites. This can be for a variety of reasons: some sites have rigid CMSs that don’t allow for customization, while others have development queues of many months (or years, in some cases!).

In these cases, it doesn’t matter how good a job we do identifying the changes that need to be made in order to improve a site’s performance — if nothing can be implemented, our advice is worthless. Something we like to say at Distilled is that “it’s not our job to deliver reports, it’s our job to effect change.” In order to make this a reality for clients with the types of issues I mention above, it’s necessary to explore alternative ways of getting changes made.

One option for this is to implement some sort of “meta-CMS.” This is a system that sits on top of an existing CMS, and allows you to make specific changes to pages on a site, bypassing the technical and/or technical constraints that a CMS may entail. While also having the ability to split-test SEO changes across groups of pages on a website, our own DistilledODN tool can be (and is being) used for this purpose.

For sites for which a meta-CMS is not an option, a third solution is to use a tag management system (when one is installed and configured). In this article I’ll be referencing Google Tag Manager (GTM), which is the most widely used tag manager (accounting for 72.6% of the tag management market, according to BuiltWith.com). Tag managers use a single JavaScript container tag to inject various different tags (e.g. tracking, remarketing, and CRO tags) into webpages. The benefit of this is that in order to add or amend tags, it’s not necessary for a developer to make any changes to the page; changes can be made to the tags within a container and these tags will be implemented on the page.

Tag managers are mostly used to implement off-the-shelf tags, like Google Analytics or Facebook tracking. A lesser-known functionality is to implement custom HTML snippets (which can include JavaScript code). This allows you to make any arbitrary changes you like to the HTML of a page (or set of pages) based on rules you define. A benefit of using tag managers is that you can apply changes to pages at scale across a site with a single tag.

This allows us to bypass CMS restrictions and development queues, directly applying changes to things like page titles, canonical tags, and on-page content.

Because tag managers use JavaScript to implement tags, in the past it hasn’t been seen as a reliable way to make SEO changes. The traditional thinking has been that, in terms of making SEO changes, Google (and other search engines) can’t reliably execute JavaScript, so any changes made with JavaScript would likely be ignored. However, recently, we are seeing evidence that changes are being picked up by Google, including implementation through tag managers. This article will show a few examples of this in action, and how to implement these sorts of changes on your site.

How to make any HTML change using GTM

The sorts of changes we’re interested in involve either adding in new elements to a page, amending the content or attributes of elements, or removing elements from a page. For each of these, you’ll potentially need knowledge around:

  1. CSS selectors and HTML, in order to know which elements on the page to change/pull data from
  2. JavaScript (especially jQuery*), in order to inject elements into the page

For example, there are simple elements you can add into a page that don’t require anything to be extracted from the page (other than the page URL, which is an inbuilt variable in GTM). On the other hand, there are more complex changes, such as adding in product structured data on e-commerce sites, that require you to extract data from the page (e.g. product names, prices, etc).

If you’re not technical and just want to be able to implement changes in GTM, I’ll include an off-the-shelf GTM container at the end of this post, with instructions on how to use it.

*If your site has jQuery loaded, it will be much easier to extract and write elements to a page. In order to check this, you can open the Console while viewing the page in Chrome or Firefox and type “jQuery” (case-sensitive). If jQuery is not loaded, you will see an error message.

Inserting an element

In order to insert an element into an HTML page, you can use a custom HTML tag in GTM. Below is an example of a custom HTML tag that inserts a meta robots noindex tag to the page. This below example uses jQuery, but you can do the same thing without jQuery if need be.

 

This snippet will add a meta robots noindex, follow element, after deleting any existing meta robots elements, to every page to which it applies. In GTM, every tag is associated with at least one trigger, which tells the container when the tag should be applied. For any changes we want Google to take note of, we want the tags to trigger as soon as the page loads. We can decide which pages the tag should load on using any variable we like to specify pages.

The above HTML tag can be amended to create other types of elements. These are explored in the example section below.

Extracting data from the page

There are two approaches to extracting data from a page. You can either use GTM’s inbuilt variables, which allow you to extract the text or an attribute of an element based on CSS selectors, or do the same with JavaScript and/or jQuery within the custom HTML tag.

In the context of SEO changes, the most common place where you’ll want to extract data from the page would be to construct structured data markup using JSON-LD. In order to demonstrate the different methods, I’ll show a way of constructing product markup by extracting items both in GTM variables and within a custom HTML tag.

For this example, we can imagine a site with product pages that have data about their products each given unique IDs within the HTML of the page. In reality, you’ll need to find CSS selectors that give you the exact elements you’re looking for. A great tool for this is the Selector Gadget Chrome extension that allows you to find a unique CSS selector for any element on a page.

For our example, let’s imagine the following IDs:

Element ID

Associated Schema Item

product_name

name

product_img

image

price_value

price

price_currency

priceCurrency

ratings_count

reviewCount

avg_rating

ratingValue

Using GTM variables

If you’re using GTM variables to pull the data out of the page, you’ll need to set up a variable for each of the above elements. You can do this by going to the Variables menu and clicking “NEW” under “User-Defined Variables.”