Wie man alternative Sprachversionen in Next.js (Pages Router) v16 verlinkt

Sprachalternativen für Suchmaschinen verlinken

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 einer 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 behandelt werden, anstatt als koordinierte Alternativen. Ohne explizite Signale, die diese Sprachversionen verbinden, können Suchmaschinen nicht zuverlässig die am besten geeignete Version für Nutzer basierend auf deren Sprachpräferenzen bereitstellen, was zu fragmentierter Ranking-Autorität und schlechter Benutzererfahrung 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 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 modifizieren. 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 die verfügbaren Locales aus dem Router und generiert dynamisch Link-Elemente für alle Seiten.

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

Binde 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 erfüllt damit die Anforderung, dass alle Varianten aufeinander verweisen.

Jede Seite muss ein selbstreferenzierendes hreflang-Tag enthalten, das ihre eigene Sprache angibt. Die Komponente erledigt dies bereits, indem sie durch alle Gebietsschemas iteriert, einschließlich des aktuellen.

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 jetzt hreflang-Tags, die auf sich selbst verweisen, zusammen mit Tags für andere Versionen.

Füge einen x-default Link hinzu, um anzugeben, welche Version Benutzer sehen sollten, 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, zum Standard-Gebietsschema weiter.