In this guide, I will be showing you how to override the canonical tag URL using Google Tag Manager. I will show you how to override a canonical tag URL and how to edit in bulk using a lookup table.
Why would you use GTM to override the canonical tag?
Some CMSes and eCommerce platforms do not allow editing of canonical tags on the fly or in bulk. This can be frustrating should you need to consolidate equity or seek to temporarily remove URLs from Google's index. Another popular reason would be reducing keyword cannibalisation of near-duplicate products or content.
This method that I shall be demonstrating is actually simpler than you may think. When I first started trying to edit the canonical tag, I was worried that it wouldn't be possible. As confidence grew, realising that you could use GTM to override or modify almost anything within the DOM using JavaScript Element override and Google Tag Manager.
How to Override Multiple Canonicals
Should you seek to update/override canonicals in bulk, start by logging into Google Tag Manager.
Create a Lookup Table
The first step is to create a new variable with the following variable configuration.
Paste in the URL (URI) to be overridden. No need to paste in the domain name, just the URI will suffice. see the image below for example.
Output
Paste in the full destination URL (URL that the overridden will be pointed to). That includes the domain name with HTTPS (and/or www.). See below for an example.
Once you've added all the source and destination URLs it should look similar to this:
Name the variable 'Lookup - Canonicals'. If you decide to name the variable something else, make a mental note of it as you will be needing it for the next step.
Go ahead save the variable. We have completed the creation of the Lookup Table. Remember you can come back to the variable and remove or add and the added URLs.
Creating the Tag
Now that we have created the variable and Lookup Table. We now need the create the custom HTML tag and set the tag firing conditionals. This step is relatively straightforward and easy. Create a Custom HTML tag, in the editor box paste in the following script:
If you have named the variable Lookup table something different from above, ensure you update the lookup name {{Lookup - Canonicals}} in the script otherwise it will not work correctly.
Setting the Firing Trigger
For the firing trigger set it to All Pages - Page View. See below for an example of the custom HTML tag and the firing trigger.
Once you have created the custom HTML tag and set the firing triggers. Go ahead with naming the tag and saving it.
Publishing the GTM Container
If you have followed the steps above, proceed to publish the GTM container. If all the steps went as planned. Hopefully, you should not encounter any JS debug errors.
If you do get any debug errors, double-check that the lookup table names exactly match the reference to the lookup table in the script (custom HTML tag).
Troubleshooting and testing
Now that we have published the container it is time to test. Head over to a couple of the source (input) URLs. View the rendered HTML in the web browser. Hopefully, if all went to plan you should see the overridden canonical tag showing the destination (output) URLs. They have been moved lower down in the DOM Head, so check thoroughly.
If you have access to tools such as Screaming Frog, DeepCrawl or Sitebulb. Crawl the list of source (input) URLs using JS crawl/render mode. This would be useful to confirm that all the source (input) has successfully had their canonical URL overridden.
If you need support troubleshooting comment below.
Why would you use GTM to override the canonical tag?
Some CMSes and eCommerce platforms do not allow editing of canonical tags on the fly or in bulk. This can be frustrating should you need to consolidate equity or seek to temporarily remove URLs from Google's index. Another popular reason would be reducing keyword cannibalisation of near-duplicate products or content.
This method that I shall be demonstrating is actually simpler than you may think. When I first started trying to edit the canonical tag, I was worried that it wouldn't be possible. As confidence grew, realising that you could use GTM to override or modify almost anything within the DOM using JavaScript Element override and Google Tag Manager.
How to Override Multiple Canonicals
Should you seek to update/override canonicals in bulk, start by logging into Google Tag Manager.
Create a Lookup Table
The first step is to create a new variable with the following variable configuration.
- Choose variable type - Lookup Table
- Input variable - Page Path
Paste in the URL (URI) to be overridden. No need to paste in the domain name, just the URI will suffice. see the image below for example.
Output
Paste in the full destination URL (URL that the overridden will be pointed to). That includes the domain name with HTTPS (and/or www.). See below for an example.
Once you've added all the source and destination URLs it should look similar to this:
Name the variable 'Lookup - Canonicals'. If you decide to name the variable something else, make a mental note of it as you will be needing it for the next step.
Go ahead save the variable. We have completed the creation of the Lookup Table. Remember you can come back to the variable and remove or add and the added URLs.
Creating the Tag
Now that we have created the variable and Lookup Table. We now need the create the custom HTML tag and set the tag firing conditionals. This step is relatively straightforward and easy. Create a Custom HTML tag, in the editor box paste in the following script:
Code:
<script>
if({{Lookup - Canonicals}}) {
jQuery('link[rel="canonical"]').remove();
var link = document.createElement('link');
link.rel = 'canonical';
link.href = {{Lookup - Canonicals}};
document.head.appendChild(link); }
</script>If you have named the variable Lookup table something different from above, ensure you update the lookup name {{Lookup - Canonicals}} in the script otherwise it will not work correctly.
Setting the Firing Trigger
For the firing trigger set it to All Pages - Page View. See below for an example of the custom HTML tag and the firing trigger.
Once you have created the custom HTML tag and set the firing triggers. Go ahead with naming the tag and saving it.
Publishing the GTM Container
If you have followed the steps above, proceed to publish the GTM container. If all the steps went as planned. Hopefully, you should not encounter any JS debug errors.
If you do get any debug errors, double-check that the lookup table names exactly match the reference to the lookup table in the script (custom HTML tag).
Troubleshooting and testing
Now that we have published the container it is time to test. Head over to a couple of the source (input) URLs. View the rendered HTML in the web browser. Hopefully, if all went to plan you should see the overridden canonical tag showing the destination (output) URLs. They have been moved lower down in the DOM Head, so check thoroughly.
If you have access to tools such as Screaming Frog, DeepCrawl or Sitebulb. Crawl the list of source (input) URLs using JS crawl/render mode. This would be useful to confirm that all the source (input) has successfully had their canonical URL overridden.
If you need support troubleshooting comment below.