Breve guida ai siti web multilingui con Webflow

Webflow da poco più di un anno ha introdotto la possibilità di realizzare un sito multilingue.

Tuttavia, a meno che non si sia disposti ad optare per una versione a pagamento o ci si affidi a strumenti di terzi, il processo di traduzione di un sito Webflow in altre lingue non è altrettanto semplice.

Come è possibile che questo sistema, lanciato nel 2013, abbia tardato tanto nel rilasciare una versione a pagamento e abbia costretto 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 Webflow non ha bisogno di un sito in più lingue e quindi Webflow non se n’è preoccupato più di tanto.

Potete vederne la prova sul forum ufficiale di Webflow: un thread iniziato nel 2015 che chiedeva la migliore soluzione per un sito multilingue ha ricevuto una possibile soluzione solamente nel 2022.

Dunque, Webflow ha introdotto un metodo per la traduzione dei siti che vuole limitare il tempo perso. Tuttavia, se ora hai in mente un’espansione all’estero e ti serve una soluzione multilingue solida, flessibile e facile da aggiornare, ti puoi affidare anche ad altri CMS progettati per essere multilingui, che in molti casi non ti obbligheranno ai salti mortali spesso necessari in Webflow.

E se questo articolo ti sembra molto simile a quello su Squarespace, beh, la ragione è che entrambi i sistemi hanno gli stessi difetti quando si tratta di creare siti in più lingue.

Quindi, se hai già un sito in Webflow e hai la necessità di aggiungere una o più versioni tradotte, al momento hai 6 opzioni:

1. duplicare tutte le pagine, in modo da avere una home page collegata alle diverse sezioni del sito in ogni lingua, con un menu a discesa per ciascuna lingua;
2. duplicare il sito, creando un sito diverso per ogni lingua e collegandoli fra loro;
3. usare un plugin esterno;
4. creare un sito multilingue con la funzione Localization;
5. creare un sito multilingue con Polyflow;
6. 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: duplicare tutte le pagine

Un modo di applicare questo metodo consiste nel duplicare tutte le pagine e poi tradurle. Se stai usando le collezioni (la cosiddetta funzione “CMS” in Webflow), devi separare i campi per ogni lingua nella stessa collezione.

Per esempio, se hai notizie in 3 lingue, avrai bisogno di aggiungere il contenuto nelle 3 lingue all’interno della stessa pagina. Poi è necessario impostare anchor link per mostrare e nascondere il contenuto nelle diverse lingue in base alla lingua.

Un altro aspetto negativo è che è necessario configurare i pulsanti per la scelta della lingua in ogni pagina.

Questo metodo è 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.

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.

Metodo 2: duplicare siti diversi collegati fra loro

Il secondo metodo è quello di creare siti separati e poi collegarli tra 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, a meno che non li si colleghi tra loro con link esterni, per esempio attraverso una landing page.

Considera anche che avere siti separati significa pagare una licenza per ogni sito.

Metodo 3: uso di un plugin esterno

Per tradurre un sito Webflow 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 Webflow in particolare, questi sistemi consentono di accedere ai contenuti e di tradurli prescindendo dall’interfaccia di Webflow. Sovente questo viene fatto aggiungendo uno speciale frammento JavaScript nel codice delle pagine.

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.

Metodo 4: creare un sito multilingue con Localization

Webflow ha rilasciato la prima versione di Localization nel 2022. È uno strumento di traduzione eseguito direttamente su Webflow, quindi il lavoro non viene delegato a terzi. Qui non si cambia soltanto un sito da una lingua a un’altra, ma si crea una versione dove è possibile personalizzare tutto il contenuto in modo che gli utenti possano provare l’esperienza di usare un sito fatto su misura per il loro locale, cioè la combinazione di lingua e paese.

La funzione può essere utilizzata per tradurre non solo i testi (compreso il menu di navigazione) e le immagini, ma anche le impostazioni di pagina.

Localization prevede la scelta di un locale primario e di un locale secondario che ne erediterà tutti i contenuti. In questo modo, Webflow creerà automaticamente una struttura di URL che si differenzia da quello primario per la presenza del codice del paese del locale secondario selezionato.

Dal menu a tendina nella sezione “Localization” si seleziona il locale necessario, che in seguito è possibile tradurre automaticamente attraverso lo strumento. Si può anche semplicemente cliccare su qualunque parte del contenuto per tradurlo manualmente (questo vale anche per le immagini), senza modificare il locale primario che rimane invariato.

Tuttavia, ogni cambiamento effettuato al locale primario non provocherà cambi nel secondario se questo è già stato tradotto.

La funzione Localization è disponibile a un costo aggiuntivo rispetto all’abbonamento di Webflow, anche se è presente una versione gratuita, seppure molto limitata.

Metodo 5: creare un sito multilingue con Polyflow

Un altro metodo per localizzare un sito creato con Webflow riguarda l’uso di Polyflow, ovvero uno strumento di traduzione specializzato che permette di tradurre le pagine in oltre 120 lingue.

Si tratta di un’estensione di Google Chrome connessa all’account Webflow, che vincola il progetto o i progetti in corso.

Una volta sincronizzato l’account, Polyflow indirizza al progetto dando la possibilità di vedere la struttura della pagina e le singole voci disponibili per la traduzione, oltre alle opzioni e alla scelta della lingua per la traduzione.

Durante la fase di traduzione questo strumento suddivide gli elementi traducibili della pagina in tre sezioni:

• “Pagine”;
• “Raccolte CMS”;
• “Simboli”.

Qui è presente il pulsante “+ Aggiungi alternativa” che permette di aggiungere la rispettiva traduzione per ogni singola voce.

Quando si raggiunge la fine della fase di traduzione, Polyflow genera un URL per ciascuna lingua, in modo che gli utenti possano cambiare la lingua di preferenza.

Questa funzione è offerta a pagamento in due versioni “Business”, che si distinguono principalmente per la quantità di pagine tradotte, ossia un massimo di 500 al mese o illimitate.

Ovviamente, quando si tratta di strumenti di traduzione che facilitano e velocizzano la produttività e consentono di risparmiare tempo, bisogna sempre considerare il prezzo. Ogni sito di un progetto tradotto mediante Polyflow ha un costo a parte per ogni lingua di traduzione impiegata, portando anche ad un considerevole aumento dei costi.

Metodo 6: inserimento di JavaScript e CSS personalizzati

Il quarto metodo prevede l’inserimento di un codice personalizzato. Questo è quello che dà i migliori risultati, 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.

Tuttavia, per usare questo metodo è necessario:

• avere dimestichezza con il linguaggio JavaScript;
• avere dimestichezza con il linguaggio CSS.

Un approccio a questo metodo, insieme al codice da inserire e alle istruzioni dettagliate, può essere trovato su multilinguale.webflow.io.

Conclusione

Avere un sito Webflow in più lingue non è proprio una passeggiata. Devi considerare i vantaggi e gli svantaggi di ciascun metodo:

Metodo	Vantaggi	Svantaggi	Consigliato per...
Duplicazione di pagine	+ Relativamente facile da creare + Non servono altre licenze	- Esperienza utente non ottimale - Macchinoso da tenere aggiornato	Siti non molto estesi Siti con poche lingue
Diversi siti collegati tra loro	+ Contenuti indipendenti l’uno dall’altro	- Necessaria 1 licenza per ogni sito - Esperienza utente non ottimale	Grandi siti, con contenuti diversi fra loro
Plugin esterno	+ Facile da configurare	- Soluzione di terzi, licenza aggiuntiva - Possibili problemi di SEO	Siti legacy che hanno bisogno di una soluzione rapida
Uso di Localization	+ Esperienza utente più semplice + Soluzione propria di Webflow	- Versione completa a pagamento	Siti da internazionalizzare con immagini
Uso di Polyflow	+ Esperienza utente migliore	- Versione completa a pagamento	Siti più corti
JavaScript incorporato	+ Esperienza utente migliore	- Necessarie competenze tecniche	Chi conosce JavaScript e CSS

Soprattutto, come già detto, se sei ancora in tempo, valuta altri CMS che semplificano la gestione multilingue.