Español
English
Català
FrançaisUna web traducida necesita algo más que un selector de idioma. Cada página debe tener una URL que exista, mostrar el contenido correspondiente y enlazar a sus traducciones. Si cambias al francés desde «Sobre el proyecto», llegar a la portada francesa pierde el contexto aunque el enlace responda con un 200.
Este diagnóstico utiliza un ejemplo original de Astro estático con dos páginas en español, inglés, francés y catalán. El ensayo local comprueba el artefacto antes de elegir alojamiento; no acredita una entrega nativa en Hostbrid ni soporte SSR. No incluye formularios, cuentas, API, traducción o detección de idioma automáticas ni contenido generado durante una petición.
Define páginas equivalentes antes de generar URLs
Nuestro mapa usa una identidad de página independiente del idioma y del slug. La portada tiene estas cuatro direcciones: /es/, /en/, /fr/ y /ca/. La segunda página utiliza /es/sobre/, /en/about/, /fr/a-propos/ y /ca/sobre/.
El cambio de idioma debe conservar la identidad de página. Desde /es/sobre/, el enlace francés apunta a /fr/a-propos/; no basta con sustituir el prefijo y producir /fr/sobre/. Esa dirección no forma parte del mapa. Tampoco basta con que una regla de fallback devuelva cualquier HTML: hay que comprobar qué página se recibió.
Una consulta del 17 de enero de 2025 pide conservar la página al cambiar de inglés a español; ilustra una necesidad de navegación, no un diagnóstico de la API actual.
En este ejemplo las rutas se generan mediante getStaticPaths y un mapa explícito. Esto describe la implementación del ejemplo, no una nueva opción de configuración de Astro ni una necesidad de middleware. Si tu proyecto emplea otra estrategia, revisa sus rutas generadas y su comportamiento real. Consulta también la documentación oficial de internacionalización de Astro para contrastar la estrategia de tu proyecto.
Mantén separados canonical y alternates
El canonical de /fr/a-propos/ debe identificar esa versión francesa. Los enlaces hreflang describen las otras versiones equivalentes, incluyendo la propia. Todas las versiones del grupo deben devolver el mismo conjunto de equivalencias y enlazarse de forma recíproca.
En el ejemplo, x-default apunta a la versión inglesa equivalente. Es una elección editorial del ejemplo, no una obligación de usar inglés ni una promesa de clasificación. Puedes elegir otra versión o una página de selección si existe y encaja con tu web. Consulta la documentación de Google sobre versiones localizadas.
El atributo lang y el contenido visible deben corresponder al idioma de la página. Un enlace etiquetado «Français» no convierte en francesa una página que conserva el texto español. Revisa también navegación, textos alternativos de imágenes y las páginas interiores.
Comprueba los archivos que publicarás
Antes de elegir alojamiento, identifica si Astro produce archivos estáticos o necesita un servidor. Este ejemplo usa salida estática: las páginas se calculan durante la construcción. Eso no demuestra que otro proyecto con sesiones, API o renderizado por petición pueda publicarse de la misma forma.
El ensayo local verificó las ocho páginas servidas por HTTP y 16 renders de Chrome: cada página a 390 y 1280 píxeles, con DPR 2, entrada directa y recarga de un documento nuevo. Se comprobaron CSS, imagen, fuentes listas, enlaces al idioma equivalente y ausencia de desbordamiento horizontal.
Para el control negativo modificamos únicamente el HTML generado de la página española «Sobre»: su alternate catalán apuntaba a /ca/absent/. El destino respondió con un 404 real y el verificador rechazó esa relación. Después restauramos los bytes originales y la comprobación volvió a pasar. El verificador usa un contrato de URLs independiente del mapa que genera la aplicación.
El ejemplo fija Astro 7.3.7, Node 22.23.3 y npm 10.9.9. Su README explica cómo ejecutar el ensayo en una copia limpia con Chrome en macOS. El origen de canonical usado durante la prueba es https://atlas.example.invalid: es deliberadamente ficticio. Antes de una publicación real hay que configurar el dominio previsto y volver a verificar los destinos públicos; ese hostname no es una demo accesible.
Qué demuestra el artefacto local
La prueba local comprueba los archivos y las relaciones entre versiones. No valida el dominio final ni una configuración de alojamiento. Cuando publiques tu proyecto, comprueba de nuevo las ocho rutas que correspondan a tu mapa, la identidad de cada página, sus assets y las respuestas 404.
Si tu web incluye funciones dinámicas, conserva un inventario separado del servidor y de los servicios externos antes de contratar. Los artículos sobre publicar Astro estático y elegir alojamiento ayudan a separar esas decisiones.
Reproduce el ejemplo revisado
El repositorio original con licencia MIT contiene el código y el verificador. Estos comandos fijan la revisión examinada. El ensayo requiere Node 22.23.3, npm 10.9.9 incluido en su distribución y Chrome en macOS; consulta el README antes de ejecutarlo. Utiliza un directorio nuevo para conservar la evidencia.
git clone https://github.com/ocentelles/hostbrid-example-astro-i18n.git
cd hostbrid-example-astro-i18n
git checkout 8c6ad19b60fcd67318b4c312ddfac852f146863d
node --version
node scripts/run-essay.mjs /tmp/my-astro-i18n-evidence