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

Commencez par les URL

Offrir à chaque version linguistique un itinéraire stable

Utilisez une structure de routes telle que /fr/pricing ou /de/products/widget. La page doit être accessible directement, afficher la version dans la langue correspondante sur le serveur et rester valide lorsqu'un robot d'exploration la demande sans cookies de navigateur ni préférence 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

Générer des métadonnées

Créer des relations linguistiques réciproques

Les métadonnées de Next.js prennent en charge un objet `alternates.languages`. Générez le même ensemble complet de langues à partir de chaque page de localisation afin que les versions anglaise, française et allemande pointent toutes entre elles.

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

Afficher le contenu

Faites correspondre la langue de la page à l'URL

Hreflang n'est pas un mécanisme de traduction. La page à l'adresse /fr/products/widget doit afficher le contenu, les métadonnées, la navigation, les données structurées et les valeurs dynamiques pertinentes en français. Déterminez la langue active avant que la réponse n'atteigne le navigateur.

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

Valider le cluster

Vérifiez les deux sens avant le lancement

Les moteurs de recherche peuvent ignorer les groupes de langues incomplets ou contradictoires. Testez chaque page publiée dans une langue, examinez son en-tête rendu et vérifiez que les liens sont réciproques et que chaque page possède une URL canonique.

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