Jump to content

Setting the canonical URL for a blog post via javascript - check my work

Recommended Posts

Hi all, I've been trying for a few months to find a way to cross link a blog post to another website via the canonical URL. I didn't have any luck finding an existing solution. So, I wound up coming with the following script inside a blog post page. In the script, I find the existing/default Squarespace canonical URL and replace it with the external blog post link on page load.

For my fellow programmers out there, what flaws does this approach have? Will this get the benefits of a canonical URL from a SEO perspective? Or because the page has to be loaded will it not work? 
 

<html>
  <script>
    function updateCanonicalURL() {
      // Get the <head> element
      const headElement = document.querySelector('head');

      // Find the existing <link> tag with rel="canonical"
      const canonicalLinkTag = headElement.querySelector('link[rel="canonical"]');

      // Update the href attribute of the <link> tag
      if (canonicalLinkTag) {
        canonicalLinkTag.setAttribute('href', 'https://www.example.com/new-page');
      } else {
        // If the <link> tag doesn't exist, create it and append it to the <head> element
        const newCanonicalLinkTag = document.createElement('link');
        newCanonicalLinkTag.setAttribute('rel', 'canonical');
        newCanonicalLinkTag.setAttribute('href', 'https://www.example.com/new-page');
        headElement.appendChild(newCanonicalLinkTag);
      }
    
    }
      // Attach the event listener to window.onload
    window.onload = function () {
      updateCanonicalURL();
    };
    
  </script>
</html>

 

From testing it out, it does update the HTML header on page load correctly. Thanks all for any input and advice!

Edited by DanielleS
Updated some wording.
Link to comment
  • 4 months later...
  • 1 month later...

@DanielleS your code works really well. Thank you!

I have just made a small adjustment to ensure that the event listener doesn't overwrite other onload handlers.

Quote

<!-- Changing the canonical URL of the page  -->
<script>
  function updateCanonicalURL() {
    // Get the <head> element
    const headElement = document.querySelector('head');

    // Find the existing <link> tag with rel="canonical"
    const canonicalLinkTag = headElement.querySelector('link[rel="canonical"]');

    // Update the href attribute of the <link> tag
    if (canonicalLinkTag) {
      canonicalLinkTag.setAttribute('href', 'https://www.example.com/new-page');
    } else {
      // If the <link> tag doesn't exist, create it and append it to the <head> element
      const newCanonicalLinkTag = document.createElement('link');
      newCanonicalLinkTag.setAttribute('rel', 'canonical');
      newCanonicalLinkTag.setAttribute('href', 'https://www.example.com/new-page');
      headElement.appendChild(newCanonicalLinkTag);
    }
  }

  // Attach the event listener to window.onload using addEventListener
  window.addEventListener('load', function () {
    updateCanonicalURL();
  });
</script>

And yes, according to Google's documentation it is possible to inject a canonical tag with JavaScript.

I hope this helps.

Edited by NathanV
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.