Come aggiungere più lingue alla tua app o al tuo sito web

Per aggiungere più lingue a un'app, sposta ogni testo dell'interfaccia in file di traduzione (uno per lingua), caricali con una libreria i18n e aggiungi un selettore della lingua che ricordi la scelta. Per le pagine pubbliche che vuoi far trovare nella ricerca, assegna a ogni lingua un URL proprio, come /fr/, e collega le versioni con i tag hreflang. Poi gestisci le parti che spesso si dimenticano: date, numeri e valute, testi più lunghi in alcune lingue, scritture da destra a sinistra e contenuti salvati nel database.

Termini che sentirai

• Internazionalizzazione (i18n): preparare il codice a supportare qualsiasi lingua — nessuna stringa fissa nel codice, formattazione sensibile alla località, layout flessibili. Il "18" indica il numero di lettere tra la i e la n.
• Localizzazione (l10n): adattare l'app a una lingua o a un mercato specifico, principalmente con la traduzione, a volte anche con valuta, immagini e testi legali.
• Località (locale): una lingua più, facoltativamente, una regione, come en-GB o pt-BR.

Fai l'i18n una volta sola: aggiungere ogni nuova lingua diventerà soprattutto un lavoro di traduzione.

Opzioni e compromessi

Per la maggior parte delle app, una libreria i18n standard con file di traduzione è la base giusta. Puoi preparare bozze con la traduzione automatica o con l'IA, poi fai rivedere dai madrelingua ciò che i clienti vedono più spesso.

Le parti di un'app multilingue

File di traduzione

Invece di <h1>Welcome back</h1>, il codice scrive t('dashboard.welcome'), e ogni locale ha un file con il testo:

{
  "dashboard": {
    "welcome": "Bentornato, {{name}}",
    "items_one": "{{count}} elemento",
    "items_other": "{{count}} elementi"
  }
}

Usa dei segnaposto per le variabili invece di unire frammenti di frase, perché l'ordine delle parole cambia da una lingua all'altra. E usa le regole per il plurale della libreria: l'inglese ha due forme (1 item, 2 items), ma alcune lingue ne hanno tre, quattro o più.

Formattare date, numeri e denaro

Non formattarli a mano. L'API Intl integrata nel browser formatta per qualsiasi locale: 1,234.5 in inglese diventa 1.234,5 in tedesco; le date passano dal giorno-mese-anno al mese-giorno-anno; i simboli delle valute cambiano posizione. Salva le date in UTC e il denaro come numeri con un codice valuta, e formattali solo per la visualizzazione.

Layout che si adatta

Il testo tradotto è spesso più lungo dell'inglese — soprattutto in tedesco e finlandese. Evita pulsanti di larghezza fissa ed etichette troncate, e fai delle prove con la lingua più lunga.

Lingue da destra a sinistra

Arabo, ebraico, persiano e urdu si leggono da destra a sinistra. Imposta dir="rtl" nella pagina per quelle località e usa le proprietà logiche di CSS (margin-inline-start invece di margin-left; in Tailwind, ms-4 invece di ml-4) così il layout si specchia da solo. Anche le icone che indicano una direzione, come le frecce, vanno invertite.

Selettore della lingua e rilevamento

Mostra un selettore in ogni pagina, con il nome di ogni lingua nella lingua stessa ("Deutsch", "Français", "العربية") invece delle bandiere — le bandiere rappresentano i paesi, non le lingue. Al primo accesso rileva la lingua preferita del browser per suggerire una versione, ma la scelta esplicita del visitatore prevale e viene ricordata.

URL e SEO

Per le pagine che vuoi far comparire nei risultati di ricerca, ogni lingua deve avere un proprio URL. Dalle linee guida di Google per i siti multilingue, aggiornate a settembre 2026:

• URL separati per lingua — le sottocartelle (example.com/fr/) sono la soluzione più semplice; anche i sottodomini e i domini nazionali funzionano. I parametri URL (?lang=fr) non sono consigliati.
• Non cambiare lingua solo tramite cookie o impostazioni del browser; il crawler di Google potrebbe non vedere mai le altre versioni.
• Non reindirizzare automaticamente in base alla lingua; collega invece le versioni tra loro.
• Usa hreflang per indicare a Google quali pagine sono traduzioni l'una dell'altra. Ogni versione deve elencare se stessa e tutte le altre, altrimenti le annotazioni potrebbero essere ignorate. Aggiungi x-default per la pagina di riserva.
• Google rileva la lingua di una pagina dal contenuto visibile, non da lang o da hreflang — quindi traduci l'intera pagina, non solo il menu.

Imposta comunque <html lang="fr"> su ogni versione: gli screen reader lo usano per scegliere la pronuncia corretta, ed è un requisito di accessibilità.

Le schermate dell'app riservate agli utenti loggati non devono essere indicizzate, quindi per quelle va bene salvare la lingua nel profilo dell'utente. Vedi SEO per siti creati con l'IA per far scansionare le pagine pubbliche.

Contenuti nel database

Il testo dell'interfaccia sta nei file; i contenuti come nomi di prodotti, articoli del blog e categorie stanno nel database. Due schemi comuni:

• Una tabella delle traduzioni: product_translations (product_id, locale, name, description). È pulita e scala con molte lingue.
• Una colonna JSON per campo: name: {"en": "...", "fr": "..."}. È più semplice per poche lingue.

Decidi cosa succede quando manca una traduzione — di solito si ricade sulla lingua predefinita invece di mostrare spazi vuoti.

Email e notifiche

Memorizza la lingua di ogni utente e usala anche per email, notifiche e PDF. È facile tradurre l'app e dimenticare che l'email di benvenuto arriva ancora in inglese.

Prompt che funzionano

Aggiungi l'internazionalizzazione con react-i18next. Sposta ogni stringa visibile all'utente in locales/en.json con chiavi organizzate in namespace, usa l'interpolazione e le regole dei plurali invece della concatenazione di stringhe, e formatta date, numeri e prezzi con Intl usando la lingua corrente. Non cambiare ancora nessun testo.

Aggiungi francese e tedesco. Le pagine di marketing pubbliche ricevono i prefissi URL /fr/ e /de/ con l'inglese alla radice, link hreflang su ogni pagina (incluso l'auto-riferimento e x-default), e html lang impostato per ogni pagina. Aggiungi un selettore della lingua che mostri il nome nativo di ogni lingua. Per le pagine riservate agli utenti loggati, salva la lingua nel profilo dell'utente.

Aggiungi l'arabo con supporto da destra a sinistra: imposta dir="rtl" per l'arabo, sostituisci i margini e i padding sinistro/destro con proprietà logiche, specchia le icone direzionali e verifica che moduli e tabelle si leggano ancora correttamente.

Passo dopo passo

1. Scegli la prima lingua in più in base alla domanda reale — dove si trovano i tuoi visitatori o clienti.
2. Internazionalizza il codice: sposta le stringhe nei file, aggiungi plurali e formattazione Intl. Pubblica solo in inglese e verifica che nulla sia cambiato.
3. Decidi la struttura degli URL per le pagine pubbliche e aggiungi hreflang.
4. Traduci: prepara una bozza con la traduzione automatica o con l'IA, poi fai rivedere a un madrelingua. Dai ai traduttori un contesto — una parola come "Book" può essere un sostantivo in una schermata e un verbo in un'altra.
5. Traduci i contenuti del database e imposta i valori di riserva.
6. Localizza il resto: email, messaggi di errore, pagine legali, immagini con testo.
7. Prova ogni lingua a larghezza di telefono, e con la scrittura da destra a sinistra se pertinente.
8. Organizza un processo perché le nuove funzionalità escano con le traduzioni, non mesi dopo.

Errori comuni

• Concatenare frasi ("You have " + n + " messages"), che si rompe in altre lingue.
• Testo fisso lasciato nei componenti, nei messaggi di errore e nelle stringhe di validazione.
• Formattare date e prezzi a mano.
• Bandiere al posto delle lingue, e reindirizzamenti automatici che intrappolano le persone nella versione sbagliata.
• Un solo URL per tutte le lingue nelle pagine che vuoi indicizzate.
• Link di ritorno hreflang mancanti, così Google ignora le annotazioni.
• Tradurre l'interfaccia ma non i contenuti, o viceversa.
• Traduzione automatica non revisionata nelle pagine di prezzi, legali e di checkout.

Checklist multilingue

• Nessuna stringa visibile all'utente scritta direttamente nel codice; regole dei plurali e segnaposto usati
• Date, numeri e valute formattati con Intl
• Selettore della lingua con nomi nativi su ogni pagina; scelta ricordata
• URL separati per lingua per le pagine pubbliche; nessun reindirizzamento forzato
• hreflang su ogni versione, incluso il riferimento a sé stessa e x-default
• html lang (e dir="rtl" dove serve) impostato per ogni pagina
• Contenuti del database tradotti con valori di riserva sensati
• Email e notifiche inviate nella lingua dell'utente
• Testi rivolti ai clienti revisionati da un madrelingua

Più lingue su Mythex

Su Mythex aggiungi le lingue chiedendolo in chat — non esiste un pannello di traduzione separato — quindi i prompt sopra funzionano così come sono. Fai prima il passo di internazionalizzazione e verificalo in Anteprima prima di aggiungere lingue; è un refactoring importante, e un checkpoint della chat ti dà un punto a cui tornare se qualcosa si rompe (chat e checkpoint). Se vuoi che l'app traduca automaticamente i contenuti con un'IA o un'API di traduzione, usi una tua chiave API, salvata nelle impostazioni del progetto (variabili d'ambiente e segreti); come usare le API LLM spiega i costi. Pubblica di nuovo quando le nuove lingue sono pronte.

Domande