Next.js hreflang: implement language alternatives in the App Router

Comience con las URL

Proporcionar a cada versión de idioma una ruta estable

Utilice una estructura de ruta como /fr/pricing o /de/products/widget. La página debe ser accesible directamente, mostrarse en el idioma correspondiente en el servidor y seguir siendo válida cuando un rastreador la solicite sin cookies del navegador ni preferencias de idioma.

• Keep one canonical URL per language version.
• Use stable slugs or a documented localized-slug strategy for dynamic pages.
• Return a real 200 response for every published language route.

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

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

Generar metadatos

Crear relaciones lingüísticas recíprocas

Next.js admite metadatos con un objeto alternates.languages. Genera el mismo conjunto completo de idiomas desde cada página de configuración regional para que las versiones en inglés, francés y alemán se enlacen entre sí.

• Include the current page in its own language map.
• Use fully qualified HTTPS URLs in production.
• Keep language codes consistent with the locale values used by your application.

import { headers } from "next/headers";
import { altified } from "@/lib/altified";

export async function generateMetadata() {
  const locale = (await headers()).get("x-altified-locale") || "en";

  return altified.translatedMetadata({
    locale,
    path: "/pricing",
    origin: "https://example.com",
    locales: ["en", "fr", "de"],
    title: "Pricing",
    description: "Plans for your product.",
  });
}

Renderizar el contenido

Asegúrese de que el idioma de la página coincida con la URL.

Hreflang no es un mecanismo de traducción. La página /fr/products/widget debe mostrar contenido, metadatos, navegación, datos estructurados y valores dinámicos relevantes en francés. Resuelva la configuración regional activa antes de que la respuesta llegue al navegador.

• Translate titles, descriptions, Open Graph fields, and visible headings together.
• Forward the active locale to backend APIs.
• Use source-language fallbacks while a translation is pending.

const response = await altifiedFetch(BACKEND_URL + path);

// The active Altified locale is forwarded to the backend.
const product = await response.json();

Validar el clúster

Compruebe ambas direcciones antes del lanzamiento.

Los motores de búsqueda pueden ignorar grupos de idiomas incompletos o contradictorios. Pruebe cada página publicada en un idioma específico, inspeccione su encabezado y confirme que los enlaces sean recíprocos y que cada página tenga una URL canónica propia.

• English points to French, German, and English.
• French points to English, German, and French.
• Each canonical uses the same language as the page content.
• Unpublished or incomplete locales are not advertised as live alternatives.