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

Routage

Choisissez un modèle de route que les moteurs de recherche peuvent explorer.

Les paramètres régionaux doivent faire partie de l'URL ou de la structure du domaine, et non pas seulement être un cookie ou une préférence du navigateur. Les modèles App Router permettent de partager la structure de la page tout en adaptant le contenu aux paramètres régionaux.

• 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

Rendu

Réglez le problème de la langue avant la réponse.

L'interface statique, le contenu de la base de données, les réponses de l'API et les métadonnées doivent utiliser la langue active. Les composants serveur et les fonctions d'assistance côté serveur rendent cette correspondance explicite et empêchent les informations d'identification d'être accessibles au navigateur.

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

Métadonnées

Veillez à ce que les titres, les descriptions, les URL canoniques et les URL alternatives soient alignés.

Une page en français doit comporter des métadonnées et une URL canonique en français. Générez ses alternatives linguistiques à partir des mêmes données de route utilisées pour afficher la page afin qu'une route renommée ou non publiée ne crée pas de liens obsolètes.

• 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}`,
      },
    },
  };
}

Découverte

Liez et soumettez l'ensemble complet des langues

Les liens internes, le plan du site et un plan du site traduit supplémentaire doivent tous pointer vers des routes réellement publiées. N'utilisez pas un plan du site traduit pour masquer des routes manquantes ou des métadonnées erronées.

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