Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Set Canonical URL via Javascript
<script type='text/javascript'>
var link = !!document.querySelector("link[rel='canonical']") ? document.querySelector("link[rel='canonical']") : document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', location.protocol + '//' + + location.pathname);
Copy link

Nikos-yps commented Jun 26, 2019

I've read this article and to be honest I got confused. Although that says Google stated that does not accept or read tags generated with JS in the end canonical urls got passed after a few days.

But those lines made me really skeptical:

The new index coverage report in Google Search Console ignores JS-injected canonical tags in its reports and is thus in line with Google’s official statements.
The reason why Google made an announcement that seems to be wrong might be due to an internal misunderstanding or a bug.

So the only road is to test and see if it works?

Copy link

krschmidt commented Jun 26, 2019

Probably. And then to check it again, since Google tends to change things a lot.

Copy link

andrei0207 commented Jul 9, 2019

i have tried this code and it works as i see it in my page source, Thanks man

Copy link

allanderek commented Jul 19, 2019

Shouldn't you delete any existing canonical links?

Copy link

krschmidt commented Jul 20, 2019

Probably a good idea. Updated to rewrite the existing link element if it's present. Though this whole gist generally feels like a hack.

Copy link

bareddyyaminireddy commented Jan 22, 2021

**** metaInfo: {
link: [{ rel: "canonical", href: ${window.location} }]
} ***

we can directly add it in router if you are using vue js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment