← Blog
Web Design28 Mayo 2026·8 min de lectura

Por qué diseño rutas Next.js multilingües nativas (IT/EN/ES) por defecto en cada comisión.

Mapear rutas SEO internacionales en Next.js/Astro previene el lag de renderizado y elimina los defectos encontrados usando traductores automáticos lentos. Esta es exactamente la arquitectura que ejecuta este sitio, ahora mismo, en 9 idiomas.

¿Te está gustando? Hay un ❤️ esperándote al final.

Por qué el multilingüismo importa más de lo que parece

Un negocio local piensa en un idioma. Un negocio que quiere clientes internacionales — turismo, hospitalidad, servicios profesionales, e-commerce — necesita que su sitio exista, nativamente, en los idiomas en los que buscan sus clientes reales. No como algo añadido después. Cada cliente para el que construyo que quiere alcance más allá de su país recibe enrutamiento multilingüe desde el día uno, porque añadirlo después a un sitio de un solo idioma significa rehacer los metadatos, la estructura de URL y a menudo la estrategia de contenido desde cero.

Por qué los dos atajos obvios fallan ambos

Hay dos atajos a los que todos recurren primero, y ambos fallan para el SEO real. El primero es un widget de traducción flotante (Google Translate embed o similar): se ejecuta del lado del cliente, después de que la página ya se cargó en el idioma original, así que los motores de búsqueda indexan el texto original — tus visitantes españoles buscando en español nunca encuentran una página que a Google le parezca en español. El segundo es una sola URL con un parámetro de consulta, como ?lang=es. Los motores de búsqueda no tratan de forma fiable las variantes con query-param como páginas separadas y posicionables independientemente — a menudo se tratan como contenido duplicado de la misma URL, lo que significa que tu contenido en español compite con tu contenido en inglés en vez de posicionarse independientemente para búsquedas en español.

La solución: rutas reales, una por idioma

Cada idioma obtiene su propia ruta rastreable — /it/, /en/, /es/ — cada una renderizada del lado del servidor con contenido completamente traducido, su propio atributo <html lang>, y sus propios metadatos. En Next.js esto es lo que next-intl con localePrefix configurado en "always" te da de fábrica: en vez de una página que cambia texto con JavaScript, obtienes páginas genuinamente separadas que los motores de búsqueda pueden rastrear, indexar y posicionar independientemente — cada una una página real y completa en ese idioma, no una piel traducida sobre el mismo contenido.

Cómo está realmente conectado en este sitio

1Define los idiomas soportados y configura localePrefix: "always" en la configuración de enrutamiento de next-intl, para que cada URL — incluido el idioma predeterminado — lleve un prefijo explícito /it/, /en/, /es/ sin ruta raíz ambigua
2Guarda las cadenas traducidas en un archivo JSON por idioma (messages/en.json, messages/it.json, etc.) para que cada cadena de UI y cada texto de página tenga un hogar por locale, no disperso entre componentes
3En generateMetadata(), configura alternates.canonical con la URL del idioma actual y alternates.languages con un mapa completo de la URL equivalente de cada idioma — esto es lo que realmente emite las etiquetas hreflang que los motores de búsqueda usan para conectar las variantes de idioma de la misma página
4Configura openGraph.locale y una og:image correcta por página para que los enlaces compartidos muestren la vista previa correcta sin importar qué variante de idioma se comparta
5Nunca traduzcas en tiempo de solicitud con un traductor automático. Traduce una vez, guárdalo, sírvelo estáticamente por locale — esto mantiene rápido el Time to First Byte y significa que no hay ninguna API de traducción en la ruta crítica de renderizado

Qué obtienes realmente

Cada variante de idioma se posiciona en sus propios términos — una búsqueda en italiano trae la página en italiano, una búsqueda en español trae la página en español, y ninguna compite con ni diluye a la otra ante los ojos de Google. Igual de importante para la conversión: los visitantes llegan a una página que se lee como genuinamente escrita en su idioma, no una con un widget de traducción visible en la esquina. Para un restaurante, hotel o servicio profesional que busca parecer creíble ante una audiencia internacional, esa diferencia suele ser la brecha entre un rebote y un cliente.

¿Quieres esta arquitectura en tu sitio?

Hablemos →

About

Patrick Chen — desarrollador independiente y diseñador web detrás de Sublimearts.io. Esta configuración exacta de enrutamiento — next-intl, localePrefix always, metadatos por idioma — es lo que está renderizando la página que estás leyendo ahora mismo, en cualquiera de los 9 idiomas en que la estés viendo.

Did you find this helpful?