Jump to content

Inject hreflang header code into specific blog POSTS and portfolio pages?

Recommended Posts

I'm having trouble finding the answer to this question. I'm building a second location for a client website, and I need to insert a snippet of header code (hreflang tags) on a per-page, per-post basis, both in individual blog posts and individual portfolio pages. Of course there is nowhere to add injection code to these in the page settings panels.

Can I just drop a code block onto each post or page, and then label the hreflang code in some way that signals its placement in the header code?

Thanks for any help you can offer!

–– Cooper 

Link to comment
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 9 months later...

@LightPress I'm in the same boat with my multilingual site. I need to add hreflang tags per Google's guide. I'm wondering whether it's possible in the Squarespace UI under Blog Settings > Advanced > Page Header Code Injection. In the subtitle description for 'Per Blog Item Code Injection' Squarespace says "To access the permalink, use {permalink}. To access the post's title, use {title}."

@tuanphan Is there a way using above to add tags in the 'Page Header Code Injection' for Blog Settings that will then apply the correct html to each blog post's <head> section, satisfying Google's requirements? I have no idea if this is even correct, but something like <link rel="alternate" href="https://www.example.com/en/blog/{title}" hreflang="cs" />

Link to comment

I'm adding one more post, for anyone that runs into this thread trying to achieve something similar.

It turns out that the solution of adding hreflang tags to the body isn't respected by Google search, so there's no point. Testing with the w3 validator https://validator.w3.org returns errors "Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, or stylesheet."

Link to comment

Squarespace support also escalated this with their Engineering team, and let me know that "...you would not be able to achieve what you are wanting - the Google guidelines say that the hreflang HTML tag has to go in the <head> section. So they don't think adding the tags to the body of the post will achieve anything. "

Link to comment
  • 9 months later...

I think I've found a decent solution. As @lyssipos explains, hreflang-tags in the body aren't of value to Google.

I used Gemini to write me some javascript that lets me add hreflang-tags to the header using codeblocks.

This is my code but bear in mind you're going to have to adjust it according to your website's structure, this is based on my site that uses subdirectories for /en and /sv:


function addHreflangTags() {
  const currentURL = window.location.href; 

  // *** ADJUST: Extract the language code from your URL structure ***
  const languageCode = currentURL.split('/')[3]; // Example, change the index if needed

  // *** ADJUST: Your website's base URL ***
  const baseURL = "https://www.example.com/"; 

  const alternateLang = (languageCode === 'en') ? 'sv' : 'en';  
  const alternateURL = baseURL + alternateLang + currentURL.substring(baseURL.length + languageCode.length); 

  // Create links
  const linkCurrent = document.createElement('link');
  linkCurrent.rel = "alternate";
  linkCurrent.href = currentURL;
  linkCurrent.hreflang = languageCode;

  const linkAlternate = document.createElement('link');
  linkAlternate.rel = "alternate";
  linkAlternate.href = alternateURL;
  linkAlternate.hreflang = alternateLang;

  const linkXDefault = document.createElement('link');
  linkXDefault.rel = "alternate";
  linkXDefault.href = baseURL + 'en' + currentURL.substring(baseURL.length + languageCode.length); 
  linkXDefault.hreflang = "x-default";

  // Append links to the head

window.onload = addHreflangTags; 


Edited by Villiam
Link to comment

If you don't have a logic URL structure, you might want to use this code instead and adjust it manually for each page depending on the URL:


  function addHreflangTags() {
    var linkSV = document.createElement('link');
    linkSV.rel = "alternate";
    linkSV.href = "https://www.examplesite.com/sv/blog/sem-vs-seo";
    linkSV.hreflang = "sv";

    var linkEN = document.createElement('link');
    linkEN.rel = "alternate";
    linkEN.href = "https://www.examplesite.com/en/blog/sem-vs-seo"; 
    linkEN.hreflang = "en";

    var linkXDefault = document.createElement('link');
    linkXDefault.rel = "alternate";
    linkXDefault.href = "https://www.examplesite.com/en/blog/sem-vs-seo"; // English as x-default
    linkXDefault.hreflang = "x-default";


  window.onload = addHreflangTags; 


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.