LightPress Posted August 22, 2022 Share Posted August 22, 2022 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
tuanphan Posted August 24, 2022 Share Posted August 24, 2022 Have you tried edit each post/page > Add code via Code Block yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lyssipos Posted June 12, 2023 Share Posted June 12, 2023 @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
lyssipos Posted June 12, 2023 Share Posted June 12, 2023 Following up: I tried a variety of approaches, using Google's recommended hreflang flag testing tool for validation https://technicalseo.com/tools/hreflang/. @tuanphan's suggested method above is the only one that worked, which is to add hreflang tags on the blog post itself as a Code block. Link to comment
lyssipos Posted June 14, 2023 Share Posted June 14, 2023 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
lyssipos Posted June 14, 2023 Share Posted June 14, 2023 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
Villiam Posted April 5 Share Posted April 5 (edited) 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 document.head.appendChild(linkCurrent); document.head.appendChild(linkAlternate); document.head.appendChild(linkXDefault); } window.onload = addHreflangTags; Edited April 5 by Villiam Link to comment
Villiam Posted April 5 Share Posted April 5 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: <script> 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"; document.head.appendChild(linkSV); document.head.appendChild(linkEN); document.head.appendChild(linkXDefault); } window.onload = addHreflangTags; </script> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment