Español
English
Català
FrançaisUn web traduït necessita més que un selector d’idioma. Cada pàgina ha de tenir una URL que existeixi, mostrar el contingut corresponent i enllaçar a les seves traduccions. Si canvies al francès des de «Sobre el projecte», arribar a la portada francesa fa perdre el context encara que l’enllaç respongui amb un 200.
Aquest diagnòstic fa servir un exemple original d’Astro estàtic amb dues pàgines en espanyol, anglès, francès i català. L’assaig local comprova l’artefacte abans de triar allotjament; no acredita un lliurament natiu a Hostbrid ni suport SSR. No inclou formularis, comptes, API, traducció o detecció d’idioma automàtiques ni contingut generat durant una petició.
Defineix pàgines equivalents abans de generar URL
El nostre mapa fa servir una identitat de pàgina independent de l’idioma i del slug. La portada té aquestes quatre adreces: /es/, /en/, /fr/ i /ca/. La segona pàgina fa servir /es/sobre/, /en/about/, /fr/a-propos/ i /ca/sobre/.
El canvi d’idioma ha de conservar la identitat de pàgina. Des de /es/sobre/, l’enllaç francès apunta a /fr/a-propos/; no n’hi ha prou amb substituir el prefix i produir /fr/sobre/. Aquesta adreça no forma part del mapa. Tampoc n’hi ha prou que una regla de fallback retorni qualsevol HTML: cal comprovar quina pàgina s’ha rebut.
Una consulta del 17 de gener de 2025 demana conservar la pàgina en canviar de l’anglès al castellà; il·lustra una necessitat de navegació, no un diagnòstic de l’API actual.
En aquest exemple les rutes es generen mitjançant getStaticPaths i un mapa explícit. Això descriu la implementació de l’exemple, no una nova opció de configuració d’Astro ni una necessitat de middleware. Si el teu projecte fa servir una altra estratègia, revisa les rutes generades i el comportament real. Consulta també la documentació oficial d’internacionalització d’Astro per contrastar l’estratègia del teu projecte.
Mantén separats canonical i alternates
El canonical de /fr/a-propos/ ha d’identificar aquesta versió francesa. Els enllaços hreflang descriuen les altres versions equivalents, inclosa la mateixa pàgina. Totes les versions del grup han de retornar el mateix conjunt d’equivalències i enllaçar-se de manera recíproca.
En l’exemple, x-default apunta a la versió anglesa equivalent. És una tria editorial de l’exemple, no una obligació de fer servir l’anglès ni una promesa de posicionament. Pots triar una altra versió o una pàgina de selecció si existeix i encaixa amb el teu web. Consulta la documentació de Google sobre versions localitzades.
L’atribut lang i el contingut visible han de correspondre a l’idioma de la pàgina. Un enllaç etiquetat «Français» no converteix en francesa una pàgina que conserva el text espanyol. Revisa també la navegació, els textos alternatius de les imatges i les pàgines interiors.
Comprova els fitxers que publicaràs
Abans de triar allotjament, identifica si Astro produeix fitxers estàtics o necessita un servidor. Aquest exemple fa servir sortida estàtica: les pàgines es calculen durant la construcció. Això no demostra que un altre projecte amb sessions, API o renderització per petició es pugui publicar de la mateixa manera.
L’assaig local va verificar les vuit pàgines servides per HTTP i 16 renders de Chrome: cada pàgina a 390 i 1280 píxels, amb DPR 2, entrada directa i recàrrega d’un document nou. Es van comprovar el CSS, la imatge, les fonts preparades, els enllaços a l’idioma equivalent i l’absència de desbordament horitzontal.
Per al control negatiu vam modificar únicament l’HTML generat de la pàgina espanyola «Sobre»: el seu alternate català apuntava a /ca/absent/. La destinació va respondre amb un 404 real i el verificador va rebutjar aquesta relació. Després vam restaurar els bytes originals i la comprovació va tornar a passar. El verificador fa servir un contracte d’URL independent del mapa que genera l’aplicació.
L’exemple fixa Astro 7.3.7, Node 22.23.3 i npm 10.9.9. El README explica com executar l’assaig en una còpia neta amb Chrome a macOS. L’origen dels canonical utilitzat durant la prova és https://atlas.example.invalid: és deliberadament fictici. Abans d’una publicació real cal configurar el domini previst i tornar a verificar les destinacions públiques; aquest nom de host no és una demo accessible.
Què demostra l’artefacte local
La prova local comprova els fitxers i les relacions entre versions. No valida el domini final ni una configuració d’allotjament. Quan publiquis el projecte, torna a comprovar les vuit rutes que corresponen al teu mapa, la identitat de cada pàgina, els assets i les respostes 404.
Si el teu web inclou funcions dinàmiques, conserva un inventari separat del servidor i dels serveis externs abans de contractar. Els articles sobre publicar Astro estàtic i triar allotjament ajuden a separar aquestes decisions.
Reprodueix l’exemple revisat
El repositori original amb llicència MIT conté el codi i el verificador. Aquestes ordres fixen la revisió examinada. L’assaig requereix Node 22.23.3, npm 10.9.9 inclòs en la seva distribució i Chrome a macOS; consulta el README abans d’executar-lo. Utilitza un directori nou per conservar les proves.
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