Hoe maak je je Squarespace website meertalig?
Tot voor kort had Squarespace geen goede optie om je website meertalig te maken. Daar is door de integratie van Weglot verandering in gekomen. Maar dit is zeker niet de enige manier. Hieronder zet ik de verschillende opties voor je op een rij:
Optie 1: Weglot
7.0 & 7.1
Dit is de mooiste, meest professionele, maar wel duurste oplossing. Net als bij Squarespace betaal je voor Weglot per maand of per jaar. Het te kiezen abonnement hangt af van het aantal talen en woorden. https://weglot.com/pricing/
Via Settings > Language & Region> Site languages koppel je Weglot aan je site (zie afbeelding 1). Daarna ga je in de Weglot-omgeving verder met het inrichten van je account.
Afbeelding 1
Je kiest de talen die je extra aan je site wilt toevoegen. Weglot vertaalt daarna automatisch je content. Uiteraard kan je de automatisch gegenereerde tekst ook handmatig aanpassen en uitzonderingen invoeren (zoals bijvoorbeeld je bedrijfsnaam),
In je Squarespace account zie je deze extra vertaalde pagina’s niet. Als je dus content op je site aanpast hoef je dit dus maar één keer te doen op de pagina van je default taal. Weglot doet daarna de rest. Dit geldt ook voor het nieuwe pagina’s. Die worden in Weglot ook handmatig aangemaakt en vertaald.
Nadat je Weglot hebt ingericht, zet je in Squarespace de language switcher aan in de header settings: Edit Site Header > Global > Elements > Language Switcher (zie afbeelding 2 en 3)
Afbeelding 2
Afbeelding 3
Deze optie kost dus het minste tijd en is met name aan te raden bij een website met veel content en als deze content van je website regelmatig verandert.
SEO-technisch is gebruik maken van Weglot de beste optie.
De integratie met Weglot wordt alleen aangeboden in Squarespace 7.1. Werk je met Squarespace 7.0 dan kan je nog steeds met Weglot werken. Je maakt dan rechtstreeks op de Weglot site een account aan en met een duidelijke handleiding wordt uitgelegd hoe je een stukje code op je website plaats om de koppeling te maken.
Optie 2: de ‘Brad Good’ methode
7.0 en 7.1
In dit artikel legt de Amerikaanse Brad Good uit hoe je zelf je website mbv code meertalig maakt: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template
Kennis van code hoef je niet te hebben. Je moet alleen heel secuur alle stappen doorlopen,
Bij deze optie moet je eerst alle pagina’s in alle talen in je Squaresquare website zetten. Als je bijvoorbeeld een Nederlandse site hebt met een Home page en een contactpagina en je wilt je website ook in het Engels en Duits hebben, dan heb je dus straks 3 home pages (NL, EN en DUI) en 3 contactpagina’s (NL, EN en DUI) in de back-end van je Squarespace website staan.
Met de dupliceer-optie in de paginasettings kan je een pagina eenvoudig kopiëren, dus dat scheelt je alvast een hoop werk. Hierna moet je uiteraard wel zelf alle teksten (laten) vertalen en vervangen. Denk ook aan het aanpassen van alle SEO-omschrijvingen van zowel afbeeldingen als de pagina’s zelf.
Deze optie kost je niks. Wel kost het je (eenmalig) een hoop tijd, want je moet het meeste handmatig doen. En 1 tikfoutje in de code zorgt ervoor dat deze niet werkt. Secuur te werk gaan is dus een must. Niet alleen met het meertalig maken, maar ook met het doorvoeren van wijzigingen in een later stadium. Met een website in 3 talen moet je 1 tekstwijziging dus in 3 (taal)pagina’s doorvoeren.
Omdat alle pagina’s van elke taal in de back-end van je Squarespace site staan, kunnen alle pagina’s opduiken in Google. Zo kan het zijn dat in zoekresultaten 3 keer onder elkaar de contactpagina verschijnt (NL, ENG en DUI).
Nadeel is dat je maar één footer hebt, dus als je een tweetalige website hebt is de footer bij beide talen hetzelfde. Maak de footer bijvoorbeeld dus helemaal in het Engels of kies ervoor om beide talen in de footer te verwerken.
Deze ‘Brad Good’ methode werkt zowel voor Squarespace 7.0 als 7.1. Je hebt hier het Business Plan voor nodig.
Optie 3: folder met dropdown
7.0 en 7.1
Een iets minder gangbare, maar wel eenvoudige optie is om voor elke extra taal een folder in de navigatie te maken. In deze folder zet je alle vertaalde pagina’s. Je krijgt dan per extra taal dus een dropdown menu. Dit werkt het beste als je in de brontaal met een eenvoudige navigatie zonder folders werkt. In Squarespace kan je namelijk niet een folder in een folder plaatsen.
Net zoals bij optie 2 heb je alle vertaalde pagina’s allemaal in de back-end van je Squarespace website staan.
Deze manier van een website meertalig maken zie je niet heel vaak. De meeste mensen gewend zijn om op een vlaggetje te klikken om naar een andere taal te switchen. Nu moet mensen werken met een verticaal uitklapmenu voor een andere taal, terwijl de navigatie van de brontaal horizontaal is.
Daarom noem ik dit een minder gangbare optie. Maar het is wel de meest eenvoudige optie.
Deze optie is zowel mogelijk bij Squarespace 7.0 als 7.1.
Voorbeeld website: https://venture-multilingual.squarespace.com/
(hier zijn beide talen in een folder/dropdown gezet. Je kan er ook voor kiezen om je default taal niet in een folder te zetten.)
Optie 4: een cover page als taalkeuzescherm bij een twee-talige site
7.0
Als je werkt met een Cover Page, dan zet je als het ware een extra taalkeuzescherm voor je website. Hierop staan de buttons die elk linken naar de homepage van een taal.
Net zoals bij optie 2 en 3 heb je alle content in elke taal nodig in de back-end van je website.
De Cover Page zit alleen in Squarespace 7.0. Maak een nieuwe pagina aan zoals je dat normaal doet, maar kies dan voor een Cover Page ipv een Blank page. (zie afbeelding 4)
Afbeelding 4
Alle pagina’s voor taal 1 zet je in de Primary Navigation. Alle pagina’s voor taal 2 zet je in de Secondary navigation.
Daarna zet je bij elke pagina in de Primary Navigation deze code in de Page Header Code Injection:
(via het tandwieltje/pagina settings > Advanced > Page Header Code Injection)
<style>
nav.Header-nav--secondary {
display: none;
}
.Mobile-overlay-nav--secondary {
display: none;
}
</style>
Afbeelding 5
Daarna zet je bij elke pagina in de Secondary Navigation deze code in de Page Header Code Injection:
(via het tandwieltje/pagina settings > Advanced > Page Header Code Injection)
<style>
nav.Header-nav--primary {
display: none;
}
.Mobile-overlay-nav--primary {
display: none;
}
</style>
Bij een Blog voer je de code in bij de Page Header Code Injection. (zie afbeelding 5)
Optie 5: de multi-lingual translator van Google Translate
Bij deze optie maak je gebruik van de service van Google. Je hebt alleen geen controle over de vertalingen. Je moet maar hopen dat Google je webteksten juist vertaalt. Maar deze optie is wel eenvoudig te implementeren en gratis.
In deze blog staat een Engelse video walk-through hoe je dit implementeert in je website: https://www.squarestylist.com/blog/multilanguage-squarespace
Dit werkt voor zowel Squarespace 7.0 als 7.1 en je hebt hier het Business Plan voor nodig.
