CODEWITHSUNDEEP
javascriptjqueryhtmlcanonical-link
John R Perry
John R Perry

Reputation: 4202

Replace existing canonical tag with javascript or jquery

I'm wanting to create a widget for Adobe Muse that replaces the canonical tags that Muse automatically generates.

I know that this will not work with most bots because they don't run any scripts when crawling pages, but I have read that Google's bot does run scripts when it crawls.

I found many questions on how to replace the href from a links but I couldn't seem to find any questions on replacing the href URL of a canonical tag. I'm almost positive this is where I start... I just don't know how to finish it:

<script>
    $(document).ready(function() {
         $('link[rel=canonical]').attr('href' 'NEW_LINK');
    }
</script>

Upvotes: 8

Views: 15598

Answers (3)

Jaceczek
Jaceczek

Reputation: 31

This is the version that worked for me in TypeScript/ReactJS:

document.querySelector('link[rel="canonical"]')?.setAttribute("content", "NEW_HREF_GOES_HERE");

Upvotes: 0

crenshaw-dev
crenshaw-dev

Reputation: 8412

And for those who are fans of vanilla JS:

const canonical = document.querySelector('link[rel="canonical"]');
if (canonical !== null) {
  canonical.href = 'NEW_HREF_GOES_HERE';
}

If cross-browser compatibility is important, and you're not using a transpiler, change const to var.

Upvotes: 10

Miguel
Miguel

Reputation: 20633

$('link[rel="canonical"]').attr('href', 'NEW_HREF_GOES_HERE');

Upvotes: 15

Related Questions