Here's how I structured my multi language site, the main idea is to have in the main navigation section in Squarespace all the pages you want to have in both English and whatever alternate language, do the translation manually and just ensure the URL slug is correct and add the page header code injection for the alternate hreflang tag.
Main language is English under
www.website.com
Alternate language is under
www.website.com/xx/
The main navigation section in Squarespace looks like: (example for English & Italian language)
+ /page
+ /it/page
+ /about-us
+ /it/about-us
I then have in the main navigation a link page acting as language switcher:
link title: English/Italiano
url: #lang
For each page both English and alternate language, you will have to ensure google knows the alternate href lang tag, so add the following code in both languages:
<link rel="alternate" hreflang="en" href="https://www.website.com/about-us" />
<link rel="alternate" hreflang="it" href="https://www.website.com/it/about-us" />
and here's the code injection in the site footer:
// Default Country Code
let defaultCountryCode = 'en';
let alternateCountryCode = 'it';
let countryCode = defaultCountryCode;
let countryCodePath = location.pathname.match(/\/[a-z]{2}\//);
// Set Country Code from URL
if (countryCodePath != null) {
countryCode = countryCodePath[0].replaceAll('/', '');
document.documentElement.lang = countryCode;
// Hide all but 'countryCode'
document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href]:not([href^="/' + countryCode + '"]')
.forEach(function (el) {
el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none';
});
document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href]:not([href^="/' + countryCode + '"]')
.forEach(function (el) {
el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none';
});
// Change language switcher URL
document.querySelectorAll('[href="#lang"]').forEach(function (el) {
el.setAttribute('href', location.pathname.substring(3));
});
// URL Mapping for Logo
document.querySelectorAll('a[href="/"]')
.forEach(function (el) {
el.setAttribute('href', '/' + countryCode + '/home');
});
} else {
// Hide all but English
document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href^="/' + alternateCountryCode + '"]')
.forEach(function (el) {
el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none';
});
document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href^="/' + alternateCountryCode + '"]')
.forEach(function (el) {
el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none';
});
// Change language switcher URL
document.querySelectorAll('[href="#lang"]').forEach(function (el) {
el.setAttribute('href', (location.pathname === '/') ? alternateCountryCode + '/home' : '/' + alternateCountryCode + location.pathname);
});
}
When users will click the "English/Italiano" link (on desktop and mobile) it will automatically switch from the English page to the same Italian page
/home -> /it/home
The only problem with this and any other similar solution is the Hreflang and HTML lang mismatch
unfortunately the HTML language will stay to whatever language you set the squarespace website, even if I change it in the code... that's done at the JS level not at the server level, so robots will always see the default language ex. English
Hope it helps.