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

Inizia con gli URL

Assegnare a ogni versione linguistica un percorso stabile

Utilizza una struttura di percorso come /fr/pricing o /de/products/widget. La pagina deve essere raggiungibile direttamente, visualizzare la lingua corrispondente sul server e rimanere valida quando un crawler la richiede senza cookie del browser o una preferenza Accept-Language.

• 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

Genera metadati

Creare relazioni linguistiche reciproche

I metadati di Next.js supportano un oggetto alternates.languages. Genera lo stesso set completo di lingue per ogni pagina locale, in modo che le versioni inglese, francese e tedesca rimandino tutte l'una all'altra.

• 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.",
  });
}

Visualizza il contenuto

Fai in modo che la lingua della pagina corrisponda all'URL

Hreflang non è un meccanismo di traduzione. La pagina all'indirizzo /fr/products/widget deve effettivamente visualizzare contenuti, metadati, navigazione, dati strutturati e valori dinamici pertinenti in francese. Risolvere la lingua attiva prima che la risposta raggiunga il browser.

• 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();

Convalida il cluster

Verificare entrambe le direzioni prima del lancio

I motori di ricerca possono ignorare i gruppi di pagine incompleti o contraddittori. Testa ogni pagina pubblicata in una determinata lingua, esamina l'intestazione visualizzata e verifica che i link siano reciproci e che ogni pagina abbia un URL auto-canonico.

• 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.