Internacionalización técnica: rutas, hreflang y traducciones que escalan

La conversación suele empezar con una frase muy razonable: «queremos la web también en inglés». Y luego, cuando entramos en el detalle técnico, aparecen las preguntas de verdad. ¿Dominio .co.uk o carpeta /en/? ¿Qué pasa con el blog, que solo está en español? ¿Detectamos el idioma del navegador? ¿Y quién traduce el texto del botón de enviar del formulario, que vive en el código?

En el estudio hemos montado webs en dos, tres y cuatro idiomas, y la experiencia nos dice que la internacionalización se decide en la arquitectura, al principio. Añadir idiomas a una web que no estaba preparada es posible, pero obliga a rehacer rutas, plantillas y textos repartidos por todas partes. Prepararla desde el inicio cuesta muy poco más y deja la puerta abierta a cualquier mercado.

Esta guía se centra en la parte técnica: cómo se estructuran las URLs, cómo se implementa hreflang sin errores, cómo se gestiona el idioma del visitante y cómo se organiza un sistema de traducciones que no se descontrole con el tiempo.

01Internacionalizar y localizar: dos trabajos distintos

En desarrollo se usan dos abreviaturas que conviene distinguir:

• →i18n (internacionalización): preparar el código para que admita cualquier idioma y región. Separar los textos del código, usar formatos de fecha y moneda dinámicos, que el diseño aguante textos más largos o escritura de derecha a izquierda. Se hace una vez.
• →l10n (localización): adaptar el contenido a un mercado concreto. Traducir, ajustar ejemplos, imágenes, precios, referencias culturales y hasta la propuesta de valor. Se hace por cada idioma o región.

Una web bien internacionalizada convierte cada nueva localización en un trabajo de contenidos, no de programación. Ese es el objetivo.

02Estructura de URLs: subdirectorios, subdominios o dominios por país

Cada versión idiomática necesita su propia URL. Es la base de todo lo demás: si el idioma cambia con una cookie o un selector en la misma dirección, Google solo ve una versión y las demás no existen para el buscador.

Para la gran mayoría de empresas españolas que quieren atender a clientes internacionales, los subdirectorios son la opción más equilibrada. Los dominios por país tienen sentido cuando hay estructura comercial real en cada mercado, equipos locales y presupuesto para trabajar el posicionamiento de cada dominio.

Traducir también los slugs

Una URL como /en/servicios/diseno-logo mezcla idiomas. Lo coherente es /en/services/logo-design. Requiere un mapa de rutas por idioma (en el código o en el CMS), pero mejora la confianza del usuario, la lectura del enlace al compartirlo y la relevancia para el buscador. Ese mismo mapa es el que alimenta después hreflang y el selector de idioma, que debe llevar a la página equivalente, no a la portada.

03Hreflang bien hecho: sintaxis, reciprocidad y x-default

Hreflang es una anotación que dice a los buscadores: «esta página tiene equivalentes en estos idiomas, y estas son sus URLs». La documentación de referencia es la de Google Search Central, y sus reglas son pocas pero estrictas.

Los valores

El valor combina un código de idioma ISO 639-1 y, opcionalmente, un código de región ISO 3166-1 alfa-2: es, es-ES, es-MX, en, en-GB, en-US, de-AT. Usa solo idioma si el contenido sirve a todos los hablantes; añade la región cuando hay diferencias reales (precios, envíos, vocabulario).

Además existe el valor especial `x-default`, que indica la página para quien no encaja en ningún idioma declarado. Suele ser la versión en inglés o un selector de idioma.

Las tres reglas que más se incumplen

1. 01Autorreferencia. Cada página se incluye a sí misma en su propio grupo de hreflang.
2. 02Reciprocidad. Si la página A apunta a B, B tiene que apuntar a A. Si falta el enlace de vuelta, el buscador ignora esa relación.
3. 03URLs canónicas y absolutas. Cada hreflang apunta a la URL canónica completa (con https://) de su equivalente, que debe responder con un 200 y no estar bloqueada ni marcada como noindex.

En HTML, dentro del <head> de cada versión, el grupo completo:

<html lang="es">
<head>
  <link rel="canonical" href="https://www.ejemplo.com/servicios/diseno-logo">
  <link rel="alternate" hreflang="es" href="https://www.ejemplo.com/servicios/diseno-logo">
  <link rel="alternate" hreflang="en" href="https://www.ejemplo.com/en/services/logo-design">
  <link rel="alternate" hreflang="de" href="https://www.ejemplo.com/de/leistungen/logo-design">
  <link rel="alternate" hreflang="x-default" href="https://www.ejemplo.com/en/services/logo-design">
</head>

Fíjate en la canónica: cada versión es canónica de sí misma. Apuntar la canónica de la versión inglesa a la española es uno de los errores que más vemos al auditar, y le dice a Google que la versión inglesa sobra.

Hreflang en el sitemap

Cuando hay muchas páginas o varios idiomas, mantener las anotaciones en el sitemap XML es más limpio y aligera el HTML. Cada URL lista todas sus alternativas:

<url>
  <loc>https://www.ejemplo.com/servicios/diseno-logo</loc>
  <xhtml:link rel="alternate" hreflang="es" href="https://www.ejemplo.com/servicios/diseno-logo"/>
  <xhtml:link rel="alternate" hreflang="en" href="https://www.ejemplo.com/en/services/logo-design"/>
  <xhtml:link rel="alternate" hreflang="x-default" href="https://www.ejemplo.com/en/services/logo-design"/>
</url>

El sitemap necesita declarar el espacio de nombres xmlns:xhtml="http://www.w3.org/1999/xhtml". Para archivos que no son HTML, como un PDF descargable en varios idiomas, la tercera vía es la cabecera HTTP Link. Elige un método y úsalo de forma coherente; mezclar dos fuentes de verdad acaba en contradicciones.

04Detectar el idioma sin encerrar a nadie

Es tentador leer la cabecera Accept-Language del navegador y redirigir automáticamente a cada visitante a «su» idioma. Recomendamos no hacerlo de forma forzada, por dos motivos:

• →Los buscadores. Googlebot rastrea mayoritariamente desde Estados Unidos y sin preferencia de idioma. Con redirección automática, podría acabar viendo solo una versión.
• →Las personas. Un británico residente en Marbella puede tener el móvil en inglés y querer leer la web en español, o al revés. Un enlace compartido debe abrir exactamente lo que se compartió.

Lo que funciona es una detección amable: si el idioma del navegador no coincide con el de la página y existe una versión equivalente, se muestra un aviso discreto («This page is also available in English») con un enlace a la página equivalente. Si la persona elige, se guarda su preferencia en una cookie técnica (preferencia solicitada por el usuario, que no necesita consentimiento) y se respeta en las siguientes visitas. La raíz del dominio sí puede redirigir con un 302 a la versión preferida, siempre que cada versión tenga su URL accesible directamente.

05Un sistema de traducciones que escala

La traducción de los contenidos largos vive en el CMS. Pero una web tiene cientos de textos pequeños en el código: botones, mensajes de error, etiquetas de formularios, textos legales del pie. Esos van en archivos de mensajes, uno por idioma, con claves estables:

{
  "form.submit": "Enviar mensaje",
  "form.error.email": "Revisa el correo: parece que falta la @",
  "cart.items": "{count, plural, =0 {Tu cesta está vacía} one {# producto en la cesta} other {# productos en la cesta}}",
  "footer.updated": "Actualizado el {date, date, long}"
}

El formato de cart.items es ICU MessageFormat, el estándar que usan librerías como FormatJS (react-intl), next-intl o i18next. Resuelve los plurales, que cambian mucho entre idiomas (el polaco o el árabe tienen más formas que el español), y las variables en distinto orden según la gramática. Concatenar fragmentos («Tienes » + n + « productos») parece más rápido y luego impide traducir bien.

Fechas, números y monedas: deja que el navegador formatee

La API Intl de JavaScript formatea según la configuración regional sin que tengas que programar reglas: Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }) da «1.250,00 €», y con en-GB y libras, «£1,250.00». Lo mismo con Intl.DateTimeFormat para fechas y Intl.RelativeTimeFormat para expresiones como «hace 3 días».

Flujo de trabajo con traductores

Para equipos con varios idiomas, una plataforma de gestión de traducciones (Crowdin, Lokalise, Phrase o Weblate, de código abierto) sincroniza los archivos de mensajes con el repositorio, da contexto a cada cadena (capturas, límite de caracteres) y avisa de las que faltan. En WordPress, WPML o Polylang cumplen un papel equivalente para los contenidos y generan el hreflang automáticamente. Si la traducción automática hace el primer borrador, la revisión humana es la que da el tono de marca, como contamos en la guía de copy bilingüe y transcreación.

06El diseño también se internacionaliza

La internacionalización no es solo cosa de rutas. El diseño tiene que estar preparado:

• →Textos que crecen. El alemán o el francés ocupan con frecuencia bastante más que el inglés. Botones con ancho flexible, menús que admitan etiquetas largas y titulares que no dependan de un salto de línea exacto.
• →Escritura de derecha a izquierda. Para árabe o hebreo, dir="rtl" en el HTML y propiedades lógicas de CSS (margin-inline-start en lugar de margin-left, padding-inline, inset-inline-end), que se adaptan solas a la dirección del texto. Son parte del CSS moderno que ya usamos por defecto.
• →Tipografías con todos los glifos. Comprueba que la fuente de marca incluye los caracteres de cada idioma (ß, ł, ő, ç) antes de comprometerte con un mercado.
• →Imágenes con texto. Mejor evitarlas; si son imprescindibles, una versión por idioma.

07Checklist de verificación antes de publicar

1. 01Cada página traducida responde con 200 en su URL y tiene lang correcto en <html>.
2. 02Cada versión tiene canónica a sí misma.
3. 03Los grupos de hreflang incluyen autorreferencia, todas las equivalentes y x-default.
4. 04Todos los enlaces de hreflang son recíprocos y apuntan a URLs indexables.
5. 05El selector de idioma lleva a la página equivalente, no a la portada.
6. 06El sitemap incluye todas las versiones y está enviado en Search Console.
7. 07Los datos estructurados (organización, producto, FAQ) están traducidos en cada versión.
8. 08Los formularios, correos de confirmación y mensajes de error existen en todos los idiomas.

Para validar hreflang a escala, un rastreador como Screaming Frog o Sitebulb detecta enlaces no recíprocos, códigos inválidos y canónicas contradictorias en minutos. Inclúyelo en tu checklist de SEO técnico cada vez que añadas páginas.

08Ejemplo resuelto: una inmobiliaria en tres idiomas

Una inmobiliaria de la Costa del Sol con la que trabajamos tenía la web en español y una traducción al inglés y al alemán generada por un plugin que cambiaba el idioma con una cookie, en la misma URL. Para Google solo existía la versión en español. Lo reorganizamos así:

1. 01Rutas por idioma en subdirectorios (/en/, /de/) con slugs traducidos, y un mapa de equivalencias generado desde el CMS para cada inmueble y cada página.
2. 02Hreflang en el sitemap, generado automáticamente a partir de ese mapa, con x-default apuntando a la versión inglesa, que es la lengua común de su público internacional.
3. 03Fichas sin traducir fuera del grupo: los inmuebles recién publicados aparecen solo en español hasta que el equipo revisa la traducción, y entonces se añaden a hreflang sin tocar código.
4. 04Aviso de idioma en lugar de redirección, y preferencia recordada.
5. 05Precios y superficies formateados con Intl según el idioma, y formularios con confirmaciones en los tres idiomas.

En pocas semanas Search Console empezó a mostrar impresiones de las versiones inglesa y alemana en búsquedas desde Reino Unido, Alemania y los países nórdicos, y los contactos internacionales llegaban ya a la página del inmueble en su idioma.

09Una base que abre mercados

Bien planteada, la internacionalización es casi invisible: cada persona llega a su idioma, el buscador entiende la relación entre páginas y el equipo añade contenidos sin tocar código. Es una de esas decisiones de arquitectura que se agradecen durante años.

En SIMA preparamos las webs para varios idiomas desde el primer día en nuestros proyectos de desarrollo web, también la nuestra, que vive en español e inglés. Si estás pensando en abrir tu web a otros mercados, escríbenos y vemos juntos la estructura que mejor te encaja.