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

Beginnen wir mit URLs

Jeder Sprachversion einen stabilen Weg geben

Verwenden Sie eine Routenstruktur wie /fr/pricing oder /de/products/widget. Die Seite sollte direkt erreichbar sein, die entsprechende Sprache serverseitig darstellen und auch dann gültig bleiben, wenn ein Crawler sie ohne Browser-Cookies oder eine Accept-Language-Einstellung anfordert.

• 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

Metadaten generieren

Gegenseitige Sprachbeziehungen schaffen

Next.js-Metadaten unterstützen ein `alternatives.languages`-Objekt. Generieren Sie für jede Gebietsschemaseite denselben vollständigen Sprachsatz, sodass die englische, französische und deutsche Version alle aufeinander verweisen.

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

Inhalt rendern

Stellen Sie sicher, dass die Seitensprache mit der URL übereinstimmt.

Hreflang ist kein Übersetzungsmechanismus. Die Seite unter /fr/products/widget muss französische Inhalte, Metadaten, Navigation, strukturierte Daten und relevante dynamische Werte darstellen. Die aktive Sprache muss ermittelt werden, bevor die Antwort den Browser erreicht.

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

Cluster validieren

Vor dem Start beide Richtungen prüfen.

Suchmaschinen können unvollständige oder widersprüchliche Sprachcluster ignorieren. Testen Sie jede veröffentlichte Sprachseite, überprüfen Sie den gerenderten Head-Bereich und stellen Sie sicher, dass die Links reziprok sind und jede Seite eine selbstkanonische URL besitzt.

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