Cómo añadir varios idiomas a tu app o web

Para añadir varios idiomas a una app, pasa todo el texto de la interfaz a archivos de traducción (uno por idioma), cárgalos con una librería de i18n y añade un selector de idioma que recuerde la elección. En las páginas públicas que quieres que se encuentren en buscadores, dale a cada idioma su propia URL, como /fr/, y enlaza las versiones con etiquetas hreflang. Después, ocúpate de lo que la gente suele olvidar: fechas, números y monedas, textos más largos en algunos idiomas, escrituras de derecha a izquierda y el contenido guardado en tu base de datos.

Términos que oirás

• Internacionalización (i18n): preparar el código para admitir cualquier idioma: sin cadenas de texto escritas directamente, formato según la configuración regional y diseños flexibles. El «18» es el número de letras que hay entre la «i» y la «n».
• Localización (l10n): adaptar la app a un idioma o mercado concreto; sobre todo traducción, a veces también moneda, imágenes y textos legales.
• Configuración regional (locale): un idioma y, opcionalmente, una región, como en-GB o pt-BR.

Haz la i18n una vez, y añadir cada idioma nuevo se convierte sobre todo en trabajo de traducción.

Opciones y compromisos

Para la mayoría de las apps, una librería i18n estándar con archivos de traducción es la base adecuada. Si quieres, genera borradores con traducción automática o con IA y luego haz que hablantes nativos revisen lo que más ven los clientes.

Las partes de una app multilingüe

Archivos de traducción

En lugar de <h1>Welcome back</h1>, el código dice t('dashboard.welcome'), y cada idioma tiene un archivo con su texto:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Usa marcadores para las variables en lugar de unir fragmentos de frase: el orden de las palabras cambia de un idioma a otro. Y usa las reglas de plural de la librería: el inglés tiene dos formas (1 item, 2 items), pero algunos idiomas tienen tres, cuatro o más.

Formato de fechas, números y dinero

No los formatees a mano. La API Intl del navegador da formato para cualquier configuración regional: 1,234.5 en inglés es 1.234,5 en alemán; las fechas cambian entre día-mes y mes-día; los símbolos de moneda se mueven. Guarda las fechas en UTC y el dinero como números con un código de moneda, y da formato solo al mostrarlo.

Diseño que se adapta

El texto traducido suele ser más largo que el inglés, sobre todo en alemán y finlandés. Evita botones de ancho fijo y etiquetas cortadas, y prueba con tu idioma más largo.

Idiomas de derecha a izquierda

El árabe, el hebreo, el persa y el urdu se leen de derecha a izquierda. Pon dir="rtl" en la página para esas configuraciones regionales y usa propiedades lógicas de CSS (margin-inline-start en lugar de margin-left; en Tailwind, ms-4 en lugar de ml-4) para que el diseño se refleje solo. Los iconos que indican dirección, como las flechas, también hay que invertirlos.

Selector de idioma y detección

Muestra un selector en todas las páginas, con el nombre de cada idioma en su propia lengua («Deutsch», «Français», «العربية») en lugar de banderas: las banderas representan países, no idiomas. Detecta el idioma preferido del navegador en la primera visita para sugerir una versión, pero deja que la elección explícita del visitante prevalezca y recuérdala.

URL y SEO

Para las páginas que quieres que aparezcan en los resultados de búsqueda, cada idioma necesita su propia URL. Desde septiembre de 2026, la guía de Google para sitios multilingües dice:

• URL separadas por idioma: los subdirectorios (example.com/fr/) son lo más sencillo; los subdominios y los dominios por país también funcionan. Los parámetros de URL (?lang=fr) no se recomiendan.
• No cambies de idioma solo con una cookie o con la configuración del navegador: el rastreador de Google podría no ver nunca las otras versiones.
• No redirijas automáticamente según el idioma; enlaza entre versiones.
• Usa hreflang para indicar a Google qué páginas son traducciones unas de otras. Cada versión debe incluirse a sí misma y a todas las demás, o las anotaciones pueden ignorarse. Añade x-default para la página de respaldo.
• Google detecta el idioma de una página por su contenido visible, no por lang ni por hreflang; así que traduce toda la página, no solo el menú.

Aun así, pon <html lang="fr"> en cada versión: los lectores de pantalla lo usan para elegir la pronunciación correcta, y es un requisito de accesibilidad.

Las pantallas de la app con sesión iniciada no necesitan indexarse, así que para ellas basta con guardar el idioma en el perfil del usuario. Consulta SEO para sitios web creados con IA para que las páginas públicas se rastreen en primer lugar.

Contenido en tu base de datos

El texto de la interfaz vive en archivos; el contenido, como nombres de productos, entradas de blog y categorías, vive en la base de datos. Dos patrones habituales:

• Una tabla de traducciones: product_translations (product_id, locale, name, description). Limpio y escalable a muchos idiomas.
• Una columna JSON por campo: name: {"en": "...", "fr": "..."}. Más sencillo para pocos idiomas.

Decide qué pasa cuando falta una traducción: normalmente, recurrir al idioma por defecto en lugar de mostrar un hueco en blanco.

Correos y notificaciones

Guarda el idioma de cada usuario y úsalo también para los correos, las notificaciones y los PDF. Es fácil traducir la app y olvidar que el correo de bienvenida sigue llegando en inglés.

Prompts que funcionan

Añade internacionalización con react-i18next. Mueve cada texto visible para el usuario a locales/en.json con claves por espacio de nombres, usa interpolación y reglas de plural en lugar de concatenar cadenas, y formatea fechas, números y precios con Intl según el idioma actual. No cambies todavía ninguna redacción.

Añade francés y alemán. Las páginas públicas de marketing reciben los prefijos de URL /fr/ y /de/, con el inglés en la raíz, enlaces hreflang en cada página (incluido el autorreferencia y x-default), y html lang definido por página. Añade un selector de idioma que muestre el nombre nativo de cada idioma. En las páginas con sesión iniciada, guarda el idioma en el perfil del usuario.

Añade árabe con soporte de derecha a izquierda: pon dir="rtl" para el árabe, sustituye los márgenes y rellenos izquierdo y derecho por propiedades lógicas, invierte los iconos direccionales y comprueba que los formularios y las tablas siguen leyéndose bien.

Paso a paso

1. Elige tu primer idioma adicional según la demanda real: dónde están tus visitantes o clientes.
2. Internacionaliza el código: pasa las cadenas a archivos, añade plurales y formato Intl. Publícalo solo en inglés y comprueba que nada ha cambiado.
3. Decide la estructura de URL de las páginas públicas y añade hreflang.
4. Traduce: genera un borrador con traducción automática o con IA y luego haz que lo revise un hablante nativo. Da contexto a los traductores: una palabra como «Book» es un sustantivo en una pantalla y un verbo en otra.
5. Traduce el contenido de la base de datos y define los respaldos.
6. Localiza el resto: correos, mensajes de error, páginas legales, imágenes con texto.
7. Prueba cada idioma en el ancho de un teléfono y, si aplica, con derecha a izquierda.
8. Establece un proceso para que las funciones nuevas salgan con traducciones, no meses después.

Errores habituales

• Concatenar frases ("You have " + n + " messages"), que se rompe en otros idiomas.
• Texto escrito directamente en los componentes, mensajes de error y cadenas de validación.
• Dar formato a fechas y precios a mano.
• Banderas para representar idiomas, y redirecciones automáticas que dejan a la gente en la versión equivocada.
• Una sola URL para todos los idiomas en las páginas que quieres indexar.
• Faltan los enlaces de retorno hreflang, así que Google ignora las anotaciones.
• Traducir la interfaz pero no el contenido, o al revés.
• Traducción automática sin revisar en las páginas de precios, legales y de pago.

Lista de comprobación multilingüe

• Sin cadenas visibles para el usuario escritas directamente; se usan reglas de plural y marcadores
• Fechas, números y monedas con formato Intl
• Selector de idioma con nombres nativos en todas las páginas; la elección se recuerda
• URL separadas por idioma en las páginas públicas; sin redirecciones forzadas
• hreflang en cada versión, incluidos el autorreferencia y x-default
• html lang (y dir="rtl" cuando haga falta) definido por página
• Contenido de la base de datos traducido, con respaldos razonables
• Correos y notificaciones enviados en el idioma del usuario
• Texto para clientes revisado por un hablante nativo

Múltiples idiomas en Mythex

En Mythex, añades idiomas pidiéndolo en el chat; no hay un panel de traducción aparte, así que los prompts de arriba funcionan tal cual. Haz primero el paso de internacionalización y compruébalo en la vista previa antes de añadir idiomas: es una refactorización grande, y un punto de control del chat te da un lugar al que volver si algo se rompe (chat y puntos de control). Si quieres que la app traduzca contenido automáticamente con una IA o una API de traducción, eso usa tu propia clave de API, guardada en la configuración del proyecto (variables de entorno y secretos); cómo usar APIs de LLM explica los costes. Vuelve a publicar cuando los nuevos idiomas estén listos.

Preguntas