Highlights
foura.ai ahora está disponible en seis idiomas. El sitio, la interfaz del Dashboard y las nueve páginas de marketing se extrajeron, tradujeron y reestructuraron para servir la configuración regional correcta según la URL. Abra el sitemap en un navegador y se renderizará como una tabla con estilo en lugar de XML sin formato.
What's New
El sitio habla seis idiomas
Inglés, búlgaro, alemán, polaco, vietnamita y chino. El enrutamiento por prefijo de URL significa que cada configuración regional vive en su propia ruta: /de/, /pl/, /zh/, etc. La ruta base sirve en inglés, y /en/ redirige a ella para que solo haya una URL canónica por página en inglés. Un globo en la navegación superior permite cambiar de idioma, y su elección persiste entre páginas.
El renderizado del lado del servidor realiza el trabajo pesado para el SEO. Cada página ahora se entrega con un atributo lang correcto, un conjunto completo de hreflang, metadatos Open Graph específicos de la configuración regional y una etiqueta <title> y <meta description> localizadas. El sitemap expone cada URL en todas las configuraciones regionales. Los motores de búsqueda que prefieren una configuración regional sobre otra (Baidu quiere chino, la edición polaca de un motor de búsqueda quiere polaco) ahora obtienen la página correcta en el primer rastreo.
Los plurales ICU funcionan como se espera. "1 API key" se mantiene en singular, "2 API keys" pasa a plural, y la regla cambia según el idioma. El polaco tiene tres formas de plural, el inglés tiene dos, el chino tiene una. El sistema de resolución en tiempo de ejecución utiliza Intl.PluralRules, una API integrada en el navegador, por lo que no se envió nada adicional a su bundle.
Y si lee en inglés, nada cambia visiblemente. Sus URLs se quedan donde estaban.
La interfaz de Playground está localizada
Aproximadamente 80 cadenas en la herramienta Playground (etiquetas, sugerencias, marcadores de posición, tooltips) ahora siguen la configuración regional que haya seleccionado. El contenido técnico se mantiene en inglés a propósito: los nombres de los métodos HTTP, los ejemplos de código, las claves JSON, los nombres de los headers, los códigos de estado y los valores que pegaría en un request se leen igual en todos los idiomas. La interfaz que los rodea habla su idioma; la transmisión de datos permanece en inglés.
Esa separación es importante. Cualquier persona que esté depurando un request en un equipo que no comparta el mismo idioma nativo aún puede copiar el cuerpo del request y compararlo con la documentación sin desviaciones por traducción.
El sitemap se renderiza como una tabla
Abra https://foura.ai/sitemap.xml en una pestaña del navegador y verá una tabla con estilo en el tema oscuro de FourA en lugar de XML sin formato. Añadimos una hoja de estilo XSLT que maneja tanto los sitemaps individuales como el índice de sitemaps.
La razón por la que la necesitábamos: los navegadores dejaron de renderizar los sitemaps localizados como su árbol con estilo integrado una vez que aparecen las entradas de configuración regional alternativa <xhtml:link>. La opción era enviar un sitemap sin alternativas (y perder la señal de SEO que vincula las configuraciones regionales) o renderizar nuestro propio estilo. Así que elegimos la segunda opción. Los rastreadores ignoran la hoja de estilo y analizan el XML como antes, por lo que nada cambia para ellos.
Un sitemap es una página real en un sitio real. Debería verse como tal.
Under the Hood
Las traducciones provienen de un pipeline automatizado. Solo hacemos commit de las cadenas de origen en inglés; al hacer merge a main, el pipeline genera todas las demás configuraciones regionales y hace commit del resultado. Una corrección de estilo se realiza en un solo lugar y se propaga a través de seis idiomas.
Un bug fix que vale la pena destacar. El primer deploy localizado envió brevemente marcadores de posición de traducción sin procesar a producción (se veía home.h1a donde debería estar el título) porque a la etapa de build le faltaba el directorio de locales. Corregimos el problema e hicimos que el build lea el directorio de locales antes de producir el bundle, por lo que esto no puede volver a ocurrir.
Un sitio que se entrega en seis idiomas es, estructuralmente, seis sitios diferentes. Los motores de búsqueda, los lectores de pantalla y un cliente en Varsovia que busca en Google en polaco se benefician cuando la configuración regional correcta llega a la URL correcta con los metadatos correctos. La transmisión de datos sigue siendo la misma; la superficie se adapta a cada lector allí donde esté.