Set Canonical URL via Javascript

head.html

<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.host + location.pathname);
  document.head.appendChild(link);
</script>

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

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

Just to add to the above statement about Vue, I believe that to do this, you need vue-meta installed which currently not supported for Vue 3.0 which new projects ought to be using. With that said, vue-meta looks as though it's not going to make it off the runway.

@SamMakesCode Alternative to vue-meta. I used Unhead, in VueJS 3 which works fine for the meta title, description and og tags.

@shaheeriversion out of curiousity, how did you accomplish this with unhead in VueJS 3? I'm trying to set up a project and would love to get canonical link tags and og:url meta tags working.