Astro con subdominios de idioma

En el modo de servicio Subdominio, Universally sirve cada idioma en su propio subdominio, como fr.example.com, obteniendo la página de tu dominio principal y traduciéndola. Tu aplicación Astro solo renderiza el idioma de origen. La integración se ejecuta en modo proxy, donde añade los enlaces hreflang y el selector de idioma a tus páginas y nada más.

Antes de empezar

• El proyecto está en el modo de servicio Subdominio. Selecciona Subdominio en ¿Cómo se servirán las páginas traducidas? cuando lo crees. Un proyecto en modo JavaScript puede moverse aquí con Mover a subdominios de idioma en su página de Configuración. Mover un proyecto de Subdominio de vuelta al SDK no está disponible todavía.
• Acceso al DNS de tu dominio.
• El rol de Propietario o Administrador para crear el proyecto, y Propietario, Administrador o Editor para añadir nombres de host y hacer clic en Volver a comprobar ahora.

Instalar en modo proxy

1. Instala el paquete y añade UNIVERSALLY_API_KEY a .env, como en Instalar la integración de Astro.
2. Registra la integración con mode: 'proxy':

import universally from '@universally-sdk/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  integrations: [universally({ mode: 'proxy' })]
});

3. Añade la etiqueta head una vez en tu layout, dentro de <head>:

---
import { UniversallyHead } from '@universally-sdk/astro/components';
---

<head>
  <UniversallyHead />
</head>

Establecer UNIVERSALLY_MODE=proxy en el entorno hace lo mismo que la opción mode.

Añadir un subdominio de idioma

El lado del panel de control es el mismo para cada tipo de proyecto y se cubre en su totalidad en Subdominios de idioma.

1. Abre Todos los idiomas. En la tarjeta Idiomas, haz clic en Añadir subdominio para idioma.
2. En Añadir idioma de destino, selecciona Idioma y Región, luego elige el formato de Subdominio: Código de región, Código de idioma o Personalizado. El segmento se convierte en el subdominio, por lo que Francés con Código de idioma en example.com se convierte en fr.example.com. Se elimina un www inicial de tu dominio. El nombre de host se crea para ti.
3. Añade los tres registros DNS mostrados con su Nombre y Valor, en cualquier orden:

Los registros no deben ser proxy. En Cloudflare, establece Estado del proxy a Solo DNS: un registro con proxy se resuelve como un registro A, que no se puede validar.

4. Espera las comprobaciones. Se ejecutan cada 5 minutos, y la verificación y el certificado tardan unos minutos. Haz clic en Volver a comprobar ahora para comprobar de inmediato.
5. Reinicia o reconstruye tu sitio Astro una vez que el subdominio muestre En vivo. Los nombres de host se leen cuando se ejecuta tu configuración.

La etiqueta de estado dice Agregar registros DNS, Verificando, En vivo, DNS movido o Fallido. La línea de tiempo avanza por DNS agregado, Dominio verificado, SSL emitido y En vivo. Un nombre de host está activo una vez que Cloudflare informa que tanto el nombre de host como su certificado están activos. Para la configuración de idiomas en general, consulte Agregar idiomas.

Qué modo proxy renderiza

En https://example.com/about, <UniversallyHead /> renderiza los enlaces de origen y x-default en tu site, y cada destino en su nombre de host con la misma ruta:

<link rel="alternate" hreflang="en-us" href="https://example.com/about" />
<link rel="alternate" hreflang="fr" href="https://fr.example.com/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />

Estos enlaces deben estar en tu HTML de origen, porque el proxy nunca sirve tu dominio principal. Consulta etiquetas hreflang. El script selector continúa a menos que se establezca switcher: false.

El modo proxy omite todo lo demás:

• Sin rutas /fr/. Una ruta de idioma en tu propio servidor permanece como 404, lo cual es correcto.
• Sin catálogo, informes ni sondeos. Tu servidor habla con Universally una vez, cuando se ejecuta la configuración.
• /_universally/revalidate responde 404.
• t() y href() devuelven su argumento, por lo que un diseño escrito para el modo SDK sigue funcionando.

Verificar que funcionó

• https://fr.example.com/about carga tu página en francés.
• El origen de https://example.com/about tiene un enlace a https://fr.example.com/about.

Si no funciona

• Falta un idioma en los enlaces: aún no tiene un nombre de host activo. El registro dice "...no tiene un nombre de host activo en Universally, por lo que se omitió de los enlaces hreflang". Finaliza sus registros DNS, espera a En vivo y luego reconstruye.
• Los registros no se pueden validar: un registro está en proxy. En Cloudflare, cámbialo a Solo DNS.
• Los enlaces no cambian después de que un subdominio entra en vivo: los nombres de host se leen cuando se ejecuta la configuración. Reinicia o reconstruye.

Hay más casos en Solución de problemas de integración de Astro.