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

Routing

Wählen Sie ein Routenmodell, das von Suchmaschinen durchsucht werden kann.

Die Gebietsschema-Einstellung sollte Teil der URL- oder Domainstruktur sein und nicht nur ein Cookie oder eine Browsereinstellung. App Router-Layouts ermöglichen es Ihnen, die Seitenstruktur beizubehalten und gleichzeitig Inhalte für [Gebietsschema] aufzulösen.

• 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

Rendering

Sprachliche Inhalte vor der Antwort auflösen

Statische Schnittstellentexte, Datenbankinhalte, API-Antworten und Metadaten sollten auf das aktive Gebietsschema übereinstimmen. Serverkomponenten und serverseitige Hilfsfunktionen stellen diese Beziehung explizit her und verhindern, dass Anmeldeinformationen an den Browser gelangen.

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

Metadaten

Halten Sie Titel, Beschreibungen, kanonische Versionen und Alternativversionen einheitlich.

Eine französische Seite sollte französische Metadaten und eine französische kanonische URL besitzen. Die Sprachalternativen sollten aus denselben Routendaten generiert werden, die zum Rendern der Seite verwendet werden, damit bei einer Umbenennung oder Deaktivierung der Route keine veralteten Links entstehen.

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

Entdeckung

Verlinken und übermitteln Sie den vollständigen Sprachsatz

Interne Links, die Sitemap der Website und eine ergänzende übersetzte Sitemap sollten alle auf tatsächlich veröffentlichte Routen verweisen. Verwenden Sie keine Übersetzungs-Sitemap, um fehlende Anwendungsrouten oder fehlerhafte Metadaten zu verbergen.

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