Cómo traducir un sitio web con Astro: enrutamiento i18n y SEO

Publica URL rastreables para las versiones regionales de Astro con enrutamiento i18n, colecciones de contenido, etiquetas SEO localizadas, mapas del sitio preparados para hreflang y flujos de trabajo editoriales con MDX.

Grant DaviesActualizado

Cómo traducir un sitio web en Astro: componentes de isla de Astro flotando en el marco de una página estática con etiquetas de carpetas por idioma sobre un

La arquitectura de Astro, que prioriza la generación estática, encaja de forma natural con los sitios de marketing multilingües, siempre que los equipos traten el enrutamiento i18n, las colecciones de contenido y las anotaciones SEO como tareas de ingeniería de primer nivel. A menudo, quienes desarrollan con Astro publican carpetas por idioma bien organizadas y luego descubren que falta hreflang, que los elementos comunes de la interfaz siguen en inglés o que las islas híbridas renderizan textos sin traducir en el cliente.

Esta guía explica cómo traducir un sitio web en Astro con HTML rastreable por idioma, colecciones de contenido organizadas, elementos de diseño y etiquetas SEO localizados, mapas del sitio compatibles con hreflang, consideraciones sobre el renderizado híbrido y flujos editoriales para Markdown y MDX. Todo ello se basa en los requisitos de Google para sitios multilingües. Sin factores de posicionamiento inventados.

Preguntas que responde esta guía

  • ¿Cómo permite el enrutamiento i18n de Astro crear versiones por idioma rastreables?
  • ¿Cómo se deben organizar las colecciones de contenido por idioma?
  • ¿Cómo se localizan los elementos comunes de la interfaz y las etiquetas SEO en Astro?
  • ¿Cómo se debe generar hreflang para la salida estática de Astro?
  • ¿Cuándo es necesario el renderizado híbrido en sitios multilingües de Astro?
  • ¿Cómo se debe integrar el flujo de traducción con el contenido en Markdown/MDX?
  • ¿Qué errores son habituales en los sitios multilingües de Astro?
  • ¿Cuándo deberían los equipos que usan Astro adoptar una plataforma de traducción?

Respuesta rápida: el HTML estático por idioma es la ventaja SEO de Astro

Respuesta breve: Usa el enrutamiento i18n de Astro para prerrenderizar URL distintas por idioma con HTML completamente localizado, incluidos la navegación, los metadatos y el contenido principal. Después, añade referencias hreflang recíprocas entre las versiones alternativas.

El HTML prerrenderizado para cada URL de idioma encaja bien con la preferencia de Google por versiones lingüísticas rastreables con URL distintas. Astro puede generar archivos estáticos por idioma durante la compilación, lo que permite a los rastreadores acceder al mismo documento en cada idioma que reciben los usuarios, sin depender de selectores de idioma del lado del cliente.

Google recomienda usar URL rastreables distintas para cada versión lingüística, en lugar de depender únicamente de las cookies o del idioma del navegador. El enrutamiento astro:i18n de Astro, o patrones equivalentes con prefijos de idioma, permite seguir ese modelo si generas una ruta de salida por idioma.

Enrutamiento i18n de Astro y diseño de URL

Configura Astro con una lista explícita de idiomas y un idioma predeterminado. Patrones de URL habituales:

  • Incluir el prefijo del idioma predeterminado (/en/about, /fr/about) — explícito y fácil de anotar.
  • Ocultar el prefijo del idioma predeterminado (/about para inglés, /fr/about para francés) — genera URL más limpias para el mercado principal; documenta la correspondencia en hreflang.

En astro.config.mjs, establece i18n.locales, i18n.defaultLocale y i18n.routing de acuerdo con tu matriz de idiomas. Cada archivo de ruta debe recibir el idioma activo a través de las API de Astro para que las plantillas rendericen el idioma correcto.

Google determina el idioma de una página principalmente a partir del contenido visible; cada versión lingüística debe mantener el contenido y la navegación predominantemente en un solo idioma. Conecta los componentes de navegación a diccionarios de traducción que tengan en cuenta el idioma activo para que las cabeceras y los pies de página coincidan con el idioma del cuerpo de la página.

Evita las redirecciones automáticas basadas en suposiciones sobre el idioma o la ubicación. Google desaconseja las redirecciones automáticas y recomienda un selector de idioma visible para el usuario que enlace a las URL alternativas.

Para conocer el contexto estratégico de la segmentación por idioma frente a la segmentación por país, consulta SEO internacional frente a SEO multilingüe.

Colecciones de contenido por configuración regional

Las colecciones de contenido de Astro sirven de base para blogs, documentación y textos de páginas de destino. Organiza el contenido multilingüe de forma planificada:

  • Directorios de colecciones separados por configuración regional (src/content/blog/en/, src/content/blog/fr/) con esquemas compartidos.
  • Campo de configuración regional en el frontmatter para filtrar una única colección cuando el volumen de contenido es pequeño.
  • Índices generados o vinculados mediante enlaces simbólicos que incluyan solo los elementos disponibles en cada configuración regional; evita publicar páginas vacías para otras configuraciones regionales.

Cada documento localizado debe hacer referencia a recursos y enlaces internos adecuados para su configuración regional. Una publicación en francés que enlaza a un documento disponible solo en inglés perjudica la confianza del usuario y la coherencia lingüística.

Cuando no exista contenido equivalente en una configuración regional, no crees relaciones hreflang ficticias: traduce el contenido para disponer de ambas versiones u omite la relación hasta que estén listas.

Localización de diseños, SEO y Open Graph

Centraliza los elementos comunes del diseño en componentes que tengan en cuenta la configuración regional:

  • BaseLayout.astro lee Astro.currentLocale (o tu función auxiliar de i18n) y selecciona las cadenas de diccionarios JSON o TS.
  • <title> y la metadescripción proceden del frontmatter o de los campos del CMS de cada página, en lugar de estar escritos directamente en inglés en el código.
  • Las etiquetas de Open Graph y Twitter reflejan el título y la descripción localizados.
  • El atributo html lang coincide con la configuración regional activa (por accesibilidad y claridad; Google sigue utilizando el contenido visible para detectar el idioma).

Los títulos SEO y las metadescripciones localizados deben ser únicos para la URL de cada configuración regional. Una localización superficial que solo traduzca los elementos comunes —por ejemplo, la navegación, pero no el cuerpo de los artículos en inglés— da lugar a versiones lingüísticas deficientes.

Hreflang y generación de sitemaps

Los sitios creados con Astro también deben incluir anotaciones hreflang recíprocas (en HTML, cabeceras o sitemaps) entre las URL de las distintas configuraciones regionales cuando existan versiones alternativas. Durante la compilación, genera una matriz de configuraciones regionales a partir del grafo de contenido:

  1. Para cada página lógica, enumera todas las URL publicadas de sus distintas configuraciones regionales.
  2. Incluye <link rel="alternate" hreflang="..." href="..." /> en <head> en cada archivo HTML estático, o
  3. Genera un sitemap XML con versiones alternativas xhtml:link para cada entrada de URL.

Los sitemaps XML facilitan el descubrimiento de las versiones en distintos idiomas y pueden incluir anotaciones hreflang mediante xhtml:link cuando se utilizan como método de implementación.

Cada URL de idioma debe tener una URL canónica claramente definida en ese mismo idioma. Las directrices de Google sobre URL canónicas se aplican por igual a los sitios estáticos y a los dinámicos.

Integra la generación de sitemaps en la integración continua (CI) —@astrojs/sitemap junto con hooks de serialización personalizados funciona bien— para mantener hreflang sincronizado cuando cambie el contenido.

Consulta los fundamentos del SEO multilingüe para saber cómo los equipos editoriales gestionan las anotaciones en coordinación con las implementaciones técnicas.

Islas híbridas y consideraciones sobre el contenido dinámico

La arquitectura de islas de Astro permite hidratar de forma selectiva componentes de React, Vue o Svelte. Consideraciones para sitios multilingües:

  • Los widgets que se ejecutan solo en el cliente pueden mostrarse en inglés hasta que se cargue JavaScript, lo que perjudica la detección del idioma y la experiencia de usuario.
  • Renderiza en el servidor el HTML inicial de las islas con la configuración regional correcta siempre que sea posible.
  • Las rutas dinámicas (output: 'server' o hybrid) necesitan que la configuración regional se transmita a través del middleware para que el HTML renderizado en el servidor (SSR) coincida con el prefijo de la URL.

¿Cuándo es necesario el renderizado híbrido? Utiliza el renderizado híbrido o en el servidor cuando el contenido sea personalizado, requiera autenticación o se obtenga en el momento de la solicitud, pero sigue generando estructuras estáticas rastreables por configuración regional para las páginas de marketing que deban posicionarse. Las versiones regionales de marketing deben usar la generación estática de forma predeterminada; reserva el renderizado dinámico para las secciones de la aplicación que requieran autenticación.

Flujo de trabajo editorial para contenido MDX y de CMS

Para muchos equipos, Markdown y MDX siguen siendo la capa de contenido más fácil de mantener en Astro:

  1. Cadenas de origen en archivos de traducción (src/i18n/fr.json) para los elementos de la interfaz.
  2. Frontmatter en cada archivo de configuración regional para contenido extenso.
  3. Solicitudes de incorporación por lote de configuración regional con comprobaciones del glosario.
  4. Exportación desde herramientas TAO o TMS para grandes conjuntos de documentación, con posterior reimportación a src/content.

Las directrices de Google sobre contenido útil priorizan las páginas pensadas para las personas; publicar traducciones automáticas sin revisión genera experiencias localizadas de escaso valor.

Define controles de publicación: no se debe permitir la integración si faltan campos obligatorios de alguna configuración regional, si los enlaces internos llevan a otra configuración regional o si las comprobaciones de reciprocidad fallan en una muestra de pares hreflang.

Lista de comprobación para la implementación

Errores comunes

  1. Estructura de diseño solo en inglés en rutas localizadas.
  2. Ausencia de hreflang porque las rutas estáticas se mantenían manualmente.
  3. Configuración regional predeterminada oculta sin documentar las versiones alternativas: se rompe la reciprocidad.
  4. Selector de idioma renderizado en el cliente sin URL diferenciadas.
  5. MDX con varios idiomas mezclados por integrar traducciones parciales.
  6. Publicación de versiones regionales incompletas con texto de relleno o contenido provisional en inglés.
  7. Omisión del sitemap en sitios estáticos grandes, lo que ralentiza el descubrimiento del contenido.
  8. URL canónica que apunta a otro idioma sin el debido cuidado.

Las directrices para webmasters de Bing también destacan la importancia de ofrecer contenido útil y rastreable y una estructura clara del sitio para la indexación en distintos mercados.

Fundamentos de la búsqueda tradicional y los motores de respuestas

Los fundamentos comunes del HTML estático localizado de Astro y de las colecciones de contenido siguen siendo importantes para Google, Bing y los motores de respuestas: versiones lingüísticas rastreables, entidades claras, afirmaciones respaldadas por pruebas, datos estructurados que reflejen la realidad y una localización auténtica, no estructuras de página solo en inglés. Considera las siguientes guías como perspectivas específicas de cada plataforma sobre un mismo nivel de exigencia para la publicación multilingüe.

En la Búsqueda de Google, el descubrimiento depende de URL localizadas rastreables, con HTML en el idioma correspondiente, títulos y encabezados precisos y etiquetas hreflang recíprocas cuando existen versiones alternativas. Los fundamentos técnicos incluyen contenido indexable —no cambios de idioma basados únicamente en cookies—, metadatos localizados, mapas del sitio y un uso riguroso de las URL canónicas. La calidad del contenido exige que el contenido principal de cada idioma esté pensado ante todo para las personas; la autoridad proviene de una identidad clara de la organización y de fuentes que corroboren la información, no de la publicidad de herramientas de traducción. En un contexto multilingüe, esto implica que cada URL destinada a un mercado o idioma debe ser autónoma. Mide los resultados con la cobertura de Search Console y la inspección de URLs para cada versión localizada. Lo conocido frente a lo incierto: Google documenta el comportamiento multilingüe y de hreflang, pero no garantiza posiciones en los resultados por utilizar un CMS o un flujo de trabajo de posedición de traducción automática (MTPE).

Guía de plataforma: Bing

Bing descubre e indexa páginas multilingües rastreables con una estructura clara, con requisitos similares a los de Google en cuanto a la claridad de las URL y del contenido. Los fundamentos técnicos incluyen URL accesibles para cada versión regional o de idioma, contenido útil y seguimiento en Bing Webmaster Tools. Prioriza la localización de encabezados, afirmaciones y preguntas frecuentes frente a traducir únicamente los elementos de la interfaz. Las señales de autoridad siguen dependiendo de fuentes fiables y entidades coherentes. Implicación multilingüe: no ocultes los idiomas tras selectores que funcionen únicamente en el lado del cliente. Mide la indexación y las estadísticas de rastreo en Bing Webmaster Tools. Lo conocido y lo incierto: las directrices de Bing hacen hincapié en el contenido útil y rastreable; no inventes factores de posicionamiento exclusivos de Bing para las herramientas de traducción.

Guía de plataforma: ChatGPT

ChatGPT puede citar o resumir páginas de acceso público cuando las versiones lingüísticas están claramente identificadas y el contenido está preparado para responder preguntas. El descubrimiento no sigue el modelo convencional de rastreo y clasificación; la visibilidad consiste en que una página se seleccione como fuente o se mencione en las respuestas. Los fundamentos técnicos siguen partiendo de URL con HTML accesible, no de widgets superpuestos que ocultan el texto. Entre las características del contenido que ayudan están las respuestas directas, las preguntas frecuentes y la terminología coherente basada en glosarios. La autoridad proviene de las pruebas y de la coherencia de las entidades entre las distintas versiones localizadas. En un contexto multilingüe, esto implica que cada página localizada debe poder leerse de forma independiente. La medición es imperfecta: considera las comprobaciones de citas como hipótesis. Lo conocido frente a lo incierto: no existe ninguna garantía documentada de que la posedición de traducción automática (MTPE) o una integración con un CMS genere citas en ChatGPT.

Guía de plataforma: Gemini

Gemini y las experiencias de IA relacionadas de Google se benefician de entidades coherentes, datos estructurados precisos y páginas localizadas indexables. La visibilidad consiste en que el contenido se cite o se reconozca, no en inventar factores de posicionamiento para Gemini. Los fundamentos técnicos coinciden con los de la Búsqueda de Google en cuanto a rastreabilidad y calidad de los metadatos. El contenido debe presentar afirmaciones y definiciones claras en cada idioma. La autoridad depende de la coherencia de la organización y de la corroboración de la información. Implicación multilingüe: los nombres de producto sujetos a un glosario reducen la confusión entre versiones regionales o de idioma. Mide los resultados de forma tradicional con Search Console y analiza cualitativamente una muestra de respuestas de IA. Lo conocido y lo incierto: el comportamiento de Gemini no sustituye las directrices documentadas de la Búsqueda de Google sobre hreflang y las versiones de idioma.

Guía de plataforma: Google AI Overviews

Google AI Overviews puede enlazar a páginas que respalden sus respuestas; los criterios para poder aparecer siguen basándose en contenido indexable y pensado ante todo para las personas. No es un selector de idioma ni sustituye a hreflang. Los fundamentos técnicos siguen siendo el HTML rastreable de las versiones regionales o de idioma y los datos estructurados que reflejen fielmente el contenido. Entre las cualidades del contenido se encuentran las respuestas concisas y los encabezados claros en cada idioma. Las señales de autoridad reflejan los criterios de contenido útil. Implicación multilingüe: ninguna página traducida tiene garantizada su inclusión en AI Overviews. Consulta los informes sobre IA generativa de Search Console cuando estén disponibles y mantén separadas las métricas de indexación tradicionales. Lo conocido y lo incierto: ningún flujo de trabajo de traducción puede prometer la aparición en AI Overviews.

Dónde encaja GlotEO

¿Cuándo deberían los equipos que usan Astro adoptar una plataforma de traducción? Cuando la aplicación del glosario, las colas de revisión por configuración regional y las matrices hreflang superen lo que se puede gestionar manualmente mediante solicitudes de incorporación de archivos JSON y MDX.

El equipo de ingeniería puede implementar un enrutamiento i18n impecable en Astro; aun así, la localización necesita glosarios, colas de revisión y rigor en la publicación. Descubre la localización de sitios web de GlotEO para conectar las instrucciones de proyecto, el flujo de traducción y los controles de calidad con los procesos de contenido de sitios estáticos, de modo que las actualizaciones de MDX y de los diccionarios se mantengan alineadas con las anotaciones hreflang y los metadatos SEO que genera la compilación de Astro.

Compara los precios y planes de GlotEO cuando el volumen de traducción supere lo que puedes gestionar editando JSON manualmente, y utiliza herramientas para el flujo de trabajo de SEO multilingüe para que tanto los desarrolladores como los equipos de contenido tengan a la vista las matrices de configuraciones regionales y los requisitos editoriales.

Complementa este tutorial de Astro con SEO internacional frente a SEO multilingüe si defines la estrategia de idiomas y países antes de pasar a la implementación.

Referencias