Next.js i18n SEO: routing, metadata, hreflang, and sitemaps

Enrutamiento

Elija un modelo de ruta que los motores de búsqueda puedan rastrear.

La configuración regional debe formar parte de la URL o la estructura del dominio, no solo ser una cookie o una preferencia del navegador. Los diseños de App Router permiten compartir la estructura de la página al tiempo que se resuelve el contenido para la configuración regional.

• Use /fr/page, fr.example.com/page, or a documented country-domain model.
• Avoid serving multiple languages from one URL based only on detection.
• Keep route and locale validation in one boundary.

app/
  [locale]/
    products/
      [slug]/
        page.js
        opengraph-image.js
    layout.js
    sitemap.js

// /fr/products/widget
// /de/products/widget

Representación

Resuelva el contenido del idioma antes de la respuesta.

La copia estática de la interfaz, el contenido de la base de datos, las respuestas de la API y los metadatos deben coincidir con la configuración regional activa. Los componentes del servidor y las herramientas auxiliares del servidor explicitan esta relación y mantienen las credenciales alejadas del navegador.

• Use stable translation keys for runtime values.
• Forward the locale from Next.js to separate APIs.
• Return source-language content when a translation is not ready.

const copy = await altified.resolve(locale, [
  { key: `product.${product.id}.name`, defaultValue: product.name },
  { key: `product.${product.id}.description`, defaultValue: product.description },
]);

Metadatos

Mantén alineados los títulos, las descripciones, los textos canónicos y los alternativos.

Una página en francés debe tener metadatos en francés y una URL canónica en francés. Genere sus alternativas de idioma a partir de los mismos datos de ruta utilizados para renderizar la página, de modo que una ruta renombrada o no publicada no cree enlaces obsoletos.

• Translate title and description fields.
• Add a self-canonical URL for every locale page.
• Add reciprocal alternates for the complete published language set.

export async function generateMetadata({ params }) {
  const { locale, slug } = await params;
  const product = await getProduct(slug);
  const path = `/products/${product.slug}`;

  return {
    title: product.seoTitle[locale],
    description: product.seoDescription[locale],
    alternates: {
      canonical: `https://example.com/${locale}${path}`,
      languages: {
        en: `https://example.com/en${path}`,
        fr: `https://example.com/fr${path}`,
        de: `https://example.com/de${path}`,
      },
    },
  };
}

Descubrimiento

Enlace y envíe el conjunto completo de idiomas.

Los enlaces internos, el mapa del sitio y un mapa del sitio traducido complementario deben apuntar a las rutas publicadas reales. No utilice un mapa del sitio traducido para ocultar rutas de aplicación faltantes o metadatos dañados.

• Link language versions from navigation or a language switcher.
• Include dynamic pages in the site-owned sitemap.
• Submit the relevant sitemap URLs in Search Console.