Guida definitiva alla creazione di un sito Squarespace multilingue

Squarespace non è pensato per avere un sito multilingue.

Sembra incredibile, ma è così.

Come è possibile che questo sistema, che ha ricevuto 78 milioni di dollari di venture capital, costringa i web designer a ricorrere a stratagemmi per progettare un sito in più lingue?

Immagino sia una semplice questione numerica: la maggior parte degli utenti di Squarespace non ha bisogno di un sito in più lingue e quindi Squarespace non se ne preoccupa più di tanto.

Il mio spassionato consiglio è di non usare Squarespace se hai in mente un’espansione all’estero e ti serve una soluzione multilingue solida, flessibile e facile da aggiornare. Ci sono altri CMS già progettati per essere multilingui che non ti obbligheranno ai salti mortali necessari in Squarespace.

Tuttavia, se hai già un sito in Squarespace e hai la necessità di aggiungere una o più versioni tradotte, al momento hai 4 opzioni:

1. avere una home (cover page) collegata alle diverse sezioni del sito in ogni lingua, con un menu a discesa per ciascuna lingua
2. creare un sito diverso per ogni lingua e collegarli fra loro
3. usare un plugin esterno
4. aggiungere codice JavaScript personalizzato

L’ideale sarebbe scegliere il metodo che fa per te prima di iniziare a creare il sito, perché la struttura delle pagine del sito dipende dal metodo scelto.

Metodo 1: menu principale come menu delle lingue

Il primo metodo è quello descritto nell’aiuto ufficiale di Squarespace. Non è ottimale, tanto che nemmeno Squarespace usa questo metodo sul suo stesso sito, squarespace.com.

Consiste nell’impostare una pagina iniziale con due o più pulsanti o link da cui entrare nelle versioni tradotte. Una volta entrato, l’utente trova il menu delle lingue come menu principale, anziché avere da un lato il selettore delle lingue e dall’altro il menu principale.

La differenza è fra questo

o questo

e questo

Fa molto anni novanta, ma è l’unica opzione percorribile se non vuoi spendere soldi extra per sistemi aggiuntivi e se non vuoi impazzire con l’inserimento di codice.

Da un punto di vista dell’esperienza utente, questa soluzione aggiunge un passaggio (un clic) prima che l’utente possa accedere al contenuto nella lingua desiderata. Ma è anche vero che si può semplicemente passare ai contatti l’URL della pagina in lingua, poiché ogni pagina di Squarespace ha un URL unico.

Il vero svantaggio è che l’intestazione, il menu e il piè di pagina del sito saranno uguali in tutte le lingue.

Ad esempio, in un sito in tre lingue, italiano, inglese e tedesco, l’utente vedrà il menu ripetuto nelle tre lingue su ogni pagina. Altri pulsanti o call to action inseriti nell’intestazione non potranno essere tradotti.

Nel sito di Daeverso.com, alla cui creazione abbiamo collaborato, il problema è stato risolto usando l’icona di un telefono al posto della scritta “Chiamami” o “Call me”, che sarebbe comparsa in una sola lingua nelle tre versioni del sito.

Il metodo della cover page è consigliabile solo se:

• il sito da tradurre è costituito da poche pagine, perché bisogna creare una pagina tradotta per ogni pagina originale
• il sito va tradotto in un numero limitato di lingue; poiché ogni lingua compare come elemento di primo livello nel menu, non c’è spazio per più di 4-5 lingue

Nell’esempio precedente di Daeverso.com, il sito è di una sola pagina e avere lo stesso menu ripetuto non disturba più di tanto la navigazione, che è un semplice salto alle diverse sezioni della pagina.

Per creare un sito multilingue con il metodo suggerito da Squarespace:

1. Prima di tutto crea una homepage e spostala nella sezione Navigazione nascosta del pannello Pagine.

2. Aggiungi nella navigazione principale una cartella chiamata Italiano che serve come contenitore dei testi originali (se scrivi il tuo sito in italiano).

   

3. Sempre nella navigazione principale, aggiungi tante cartelle quante sono le lingue del tuo sito. Dai a ciascuna cartella il nome della lingua in quella lingua, cioè “English” per l’inglese, “Español” per lo spagnolo, “Français” per il francese.

4. Nella cartella Italiano, clicca su + Aggiungi Pagina per aggiungere le pagine del tuo sito. Attenzione: la prima pagina è quella che si apre quando l’utente fa clic sul pulsante della cover page.

5. Dopo aver creato le pagine e i contenuti nella lingua originale, duplicali nelle cartelle delle altre lingue.

   

6. Una volta create le pagine tradotte, torna alla homepage nella sezione Navigazione nascosta e clicca su Modifica.

7. Aggiungi un testo o un pulsante per ogni lingua.

8. Collega ciascun testo o pulsante con la prima pagina presente nella cartella di ogni lingua.

Con questo sistema si possono tradurre i contenuti inseriti dall’utente, ma tutti i messaggi di sistema, ad esempio le date nelle pagine di tipo blog, saranno visualizzati in una sola lingua a prescindere dal resto della pagina.

Un’altra limitazione importante riguarda i siti di e-commerce. Benché Squarespace permetta di vendere prodotti, mettendo a disposizione funzioni di carrello e checkout, su un sito Squarespace è consentita una sola valuta per volta.

Ancora peggio, tutti i messaggi legati all’esperienza d’acquisto, come quelli della pagina di checkout, compariranno in una sola lingua a prescindere dalle lingue in cui è tradotto il sito.

Metodo 2: siti diversi collegati fra loro

Il secondo metodo, sempre suggerito (in modo un po’ superficiale, bisogna dire) da Squarespace, è quello di creare siti separati e poi collegarli fra loro.

Questa soluzione ha il vantaggio di poter avere menu e contenuti diversi fra una lingua e l’altra, ma significa anche che i siti sono slegati l’uno dall’altro.

Squarespace suggerisce di “collegare i siti tra loro con link esterni” e di creare una landing page con l’accesso alle varie lingue, soluzioni che molti utenti reputerebbero insufficienti.

Senza contare che avere siti separati significa pagare una licenza per ogni sito.

Metodo 3: uso di un plugin esterno

Per tradurre un sito Squarespace si può anche ricorrere a plugin esterni, la maggior parte dei quali sono basati su sistemi di translation proxy. Alcuni sono:

• WeGlot
• Bablic
• Easyling

Questi sistemi hanno vari vantaggi. Nel caso di Squarespace in particolare, questi sistemi consentono di accedere ai contenuti e di tradurli prescindendo dall’interfaccia di Squarespace. Sovente questo avviene aggiungendo uno speciale frammento JavaScript nel codice delle pagine, tramite la funzionalità di inserimento codice (Code Injection), presente nelle impostazioni avanzate di Squarespace, che richiede un abbonamento Business o superiore.

Tutti i translation proxy danno all’utente un pannello di amministrazione proprio da cui si possono esaminare i testi, tradurli automaticamente o a mano e, nel migliore dei casi, esportarli per tradurli comodamente offline o mandarli al proprio fornitore di traduzioni di fiducia.

L’uso di un translation proxy comporta però una penalizzazione dal punto di vista SEO, in quanto le pagine vengono tradotte dinamicamente dal proxy, ma non esistono in quanto tali.

Per ovviare al problema, i fornitori propongono soluzioni più o meno complesse. Quasi tutte passano dalla configurazione dei DNS, un procedimento che potrebbe essere non alla portata di tutti.

Il procedimento di solito consiste nel creare un record DNS per ciascuna lingua tradotta, più un altro record per vincolare il sito al fornitore della tecnologia di traduzione.

In linea di massima, se il tuo dominio è gestito da Squarespace, cioè se hai comprato il nome a dominio da loro, devi:

1. Andare nella sezione Impostazioni > Domini. Troverai l’indicazione “Gestito da Squarespace”
2. Clicca su Impostazioni avanzate
3. Inserisci i record DNS che troverai nel pannello di amministrazione del translation proxy

Se invece hai collegato il tuo sito Squarespace a un dominio acquistato da terzi (spesso i prezzi di rivenditori di domini sono più economici rispetto a quelli applicati da Squarespace), allora dovrai accedere alla sezione DNS del rivenditore di domini e configurare lì i record DNS.

Metodo 4: inserimento di JavaScript e CSS personalizzati

Il quarto metodo, basato sull’inserimento di codice personalizzato, è quello che dà risultati migliori, sia a livello di esperienza utente, sia a livello di SEO.

Poiché viene visualizzato il contenuto in una sola lingua per volta, l’utente non deve districarsi fra menu multilingui, ma trova subito quello che cerca.

E rispetto agli altri metodi, esiste una pagina in ogni lingua per ciascun contenuto originale, quindi Google riesce a indicizzare tutte le pagine correttamente.

Tuttavia, per usare questo metodo è necessario:

• avere dimestichezza con il linguaggio JavaScript
• avere dimestichezza con il linguaggio CSS
• possedere un abbonamento Business a Squarespace

Il primo passo è l’aggiunta del codice della lingua nell’URL di ciascuna pagina. Poi si aggiunge un frammento di JavaScript (di solito nel piè di pagina) che nasconde programmaticamente tutte le pagine nelle lingue diverse da quella selezionata.

La selezione della lingua avviene attraverso un selettore (language switcher), anch’esso aggiunto tramite il JavaScript citato.

Le pagine vanno create nel modo consueto. Anche qui è necessario creare una versione di ogni pagina per lingua. Si può ricorrere alla duplicazione o alla copia della pagina, come già visto.

Alcuni fornitori hanno impacchettato il codice in un plugin a prezzo fisso che si può acquistare e far installare sul proprio sito Squarespace, come ad esempio Ervinas di Squarecamp Web Design o Multilingualizer.

Altri ancora suggeriscono di aggiungere CSS personalizzato con cui nascondere sezioni del sito o voci del menu agli occhi degli utenti. Sconsiglio questa soluzione perché macchinosa da applicare e controproducente a livello SEO, in quanto il contenuto della pagina resta in varie lingue contemporaneamente, caratteristica che non è amata da Google. Il motore di ricerca, come le persone, predilige i siti in un’unica lingua.

In conclusione: avere un sito Squarespace in più lingue non è proprio una passeggiata. Devi considerare i vantaggi e gli svantaggi di ciascun metodo:

Metodo	Vantaggi	Svantaggi	Consigliato per...
Cover page e menu lingue = menu principale	+ Relativamente facile da creare + Non servono altre licenze	- Esperienza utente non ottimale - Intestazione e menu uguali per tutte le lingue - Macchinoso da mantenere aggiornato	Siti non molto estesi Siti con poche lingue
Siti diversi collegati fra loro	+ Contenuti indipendenti fra loro	- Necessaria 1 licenza per ogni sito - Esperienza utente non ottimale	Siti grandi, con contenuti diversi fra loro
Inserimento Javascript	+ Esperienza utente migliore	- Necessarie competenze tecniche	Chi conosce Javascript e CSS

Soprattutto, come ti dicevo, se sei ancora in tempo, valuta altri CMS che semplificano la gestione multilingue. Ma se devi proprio tradurre il tuo sito Squarespace, contattaci e saremo lieti di darti una mano.