So verlinken Sie alternative Sprachversionen in Next.js (Pages Router) v16

Verlinken Sie Sprachalternativen für Suchmaschinen

Problem

Wenn eine Website denselben Inhalt in mehreren Sprachen bereitstellt, stoßen Suchmaschinen auf separate URLs für jede Version, ohne deren Beziehung zu verstehen. Ein französischer Nutzer könnte bei der Suche die englische Version höher eingestuft sehen als die französische, obwohl beide existieren. Ebenso könnten eine englische Seite und ihre französische Übersetzung als konkurrierende Duplikate statt als koordinierte Alternativen behandelt werden. Ohne explizite Signale, die diese Sprachversionen verbinden, können Suchmaschinen den Nutzern nicht zuverlässig die passendste Version basierend auf ihren Sprachpräferenzen bereitstellen, was zu fragmentierter Ranking-Autorität und schlechter Nutzererfahrung führt.

Lösung

Fügen Sie link-Elemente mit hreflang-Attributen zum head-Bereich jeder Seite hinzu, die alle Sprachversionen einschließlich der Seite selbst auflisten. Jede Seitenvariante muss einen identischen Satz von Links enthalten, die auf jede verfügbare Sprachversion verweisen. Diese bidirektionale Verlinkung stellt sicher, dass Suchmaschinen die Seiten als Übersetzungen und nicht als Duplikate erkennen, sodass sie den Nutzern die korrekte Sprachversion basierend auf Browser-Präferenzen und Suchkontext bereitstellen können.

Schritte

Importieren Sie die Head-Komponente aus next/head, um Seiten-Metadaten zu ändern. Greifen Sie über den useRouter-Hook auf Locale-Informationen zu, um Links für alle verfügbaren Sprachversionen zu erstellen.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Die Komponente iteriert über verfügbare Locales aus dem Router und generiert dynamisch link-Elemente für alle Seiten.

2. Fügen Sie die Komponente zu Seiten hinzu, die Übersetzungen haben

Binden Sie die AlternateLinks-Komponente in jede Seitenkomponente ein, die in mehreren Sprachen existiert.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

Die Komponente stellt sicher, dass jede Seite den vollständigen Satz alternativer Links enthält und damit die Anforderung erfüllt, dass alle Varianten aufeinander verweisen.

Jede Seite muss ein selbstreferenzierendes hreflang-Tag enthalten, das ihre eigene Sprache angibt. Die Komponente behandelt dies bereits, indem sie alle Locales einschließlich der aktuellen durchläuft.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Jede Seite enthält nun hreflang-Tags, die auf sich selbst verweisen, zusammen mit Tags für andere Versionen.

Fügen Sie einen x-default-Link hinzu, um festzulegen, welche Version Benutzer sehen sollen, wenn ihre Sprache nicht verfügbar ist.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

Der x-default-Link leitet Benutzer, deren Sprachpräferenzen nicht übereinstimmen, zur Standard-Locale weiter.