Wie man alternative Sprachversionen in React Router v7 verlinkt

Sprachalternativen für Suchmaschinen verlinken

Problem

Wenn eine Website denselben Inhalt in mehreren Sprachen anbietet, stehen Suchmaschinen vor einer Herausforderung. Ohne explizite Signale behandeln sie jede Sprachversion als separate, nicht zusammenhängende Seite. Ein französischer Nutzer, der auf Französisch sucht, könnte die englische Version höher eingestuft sehen als die französische Version, obwohl beide existieren. Ebenso könnte ein englischer Nutzer auf einer deutschen Seite landen. Dies geschieht, weil Suchmaschinen nicht automatisch erkennen können, dass /en/about und /fr/about Übersetzungen voneinander sind und nicht konkurrierende Seiten mit dupliziertem Inhalt.

Diese Verwirrung teilt die Ranking-Autorität zwischen den Sprachversionen auf und verschlechtert die Benutzererfahrung. Suchmaschinen benötigen explizite Metadaten, um zu verstehen, welche Seiten Sprachalternativen desselben Inhalts sind, damit sie die passende Version basierend auf den Sprachpräferenzen und dem Standort jedes Nutzers anzeigen können.

Lösung

Fügen Sie hreflang-Link-Tags zu jeder Seite hinzu, die alle verfügbaren Sprachversionen dieses Inhalts auflisten. Diese Tags verwenden das Attribut rel="alternate", um zu signalisieren, dass die verlinkten Seiten Übersetzungen und keine Duplikate sind. Jedes Tag gibt einen Sprachcode an und verweist auf die URL für diese Sprachversion.

Indem Sie diese Beziehungen in den Seiten-Metadaten deklarieren, helfen Sie Suchmaschinen, Ihre Seitenstruktur zu verstehen und die korrekte Sprachversion für jeden Nutzer anzuzeigen. Dies verbessert die Relevanz der Suchergebnisse und verhindert Strafen für doppelte Inhalte.

Schritte

Das hreflang-Attribut verwendet ISO 639-1-Sprachcodes, optional gefolgt von ISO 3166-1 Alpha 2-Regionscodes. Erstellen Sie ein Hilfsprogramm, das Link-Deskriptoren für alle Sprachversionen einer Seite generiert.

type HreflangLink = {
  tagName: "link";
  rel: "alternate";
  hrefLang: string;
  href: string;
};

export function buildHreflangLinks(
  pathname: string,
  locales: string[],
  baseUrl: string,
): HreflangLink[] {
  return locales.map((locale) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang: locale,
    href: `${baseUrl}/${locale}${pathname}`,
  }));
}

Diese Funktion nimmt den aktuellen Pfadnamen, eine Liste der unterstützten Locales und die Basis-URL Ihrer Website und gibt ein Array von Link-Deskriptoren zurück, die die Meta-Funktion rendern kann.

Der x-default hreflang-Wert signalisiert eine Standardseite, wenn keine andere Seite besser geeignet ist, und zielt nicht auf eine bestimmte Sprache oder ein bestimmtes Gebietsschema ab. Füge dies hinzu, um Benutzer zu leiten, deren Sprache du nicht unterstützt.

export function buildHreflangLinks(
  pathname: string,
  locales: string[],
  baseUrl: string,
  defaultLocale: string,
): HreflangLink[] {
  const links = locales.map((locale) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang: locale,
    href: `${baseUrl}/${locale}${pathname}`,
  }));

  links.push({
    tagName: "link",
    rel: "alternate",
    hrefLang: "x-default",
    href: `${baseUrl}/${defaultLocale}${pathname}`,
  });

  return links;
}

Der x-default Link verweist typischerweise auf deine primäre Sprachversion und dient als Fallback für Benutzer, deren Sprachpräferenzen mit keiner deiner spezifischen Sprachversionen übereinstimmen.

Die Meta-Funktion kann Link-Tags basierend auf Daten setzen. Verwende sie, um hreflang-Links für jede Route zurückzugeben.

import type { Route } from "./+types/about";
import { buildHreflangLinks } from "~/utils/hreflang";

const SUPPORTED_LOCALES = ["en", "fr", "de", "es"];
const BASE_URL = "https://example.com";
const DEFAULT_LOCALE = "en";

export function meta({ location }: Route.MetaArgs) {
  const hreflangLinks = buildHreflangLinks(
    location.pathname,
    SUPPORTED_LOCALES,
    BASE_URL,
    DEFAULT_LOCALE,
  );

  return [
    { title: "About Us" },
    { name: "description", content: "Learn about our company" },
    ...hreflangLinks,
  ];
}

Die Meta-Funktion gibt ein Array von Deskriptoren zurück, die Objekte mit tagName auf "link" gesetzt enthalten können. React Router rendert diese als Link-Elemente im Dokumentenkopf.

4. Stelle sicher, dass die Meta-Komponente in deinem Root-Layout enthalten ist

Die Meta-Komponente rendert alle Meta-Tags, die durch den meta-Export des Routenmoduls erstellt wurden, und sollte sich im head-Bereich deines Dokuments befinden. Überprüfe, ob dein Root-Layout diese enthält.

import { Links, Meta, Outlet, Scripts } from "react-router";

export default function Root() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Die Meta-Komponente aggregiert und rendert alle Meta-Deskriptoren aus der übereinstimmenden Route, einschließlich der hreflang-Link-Tags, die du in Schritt 3 definiert hast.

5. Passe den Pfadnamen für Locale-präfixierte Routen an

Wenn deine Routen das Locale im Pfad enthalten (wie /en/about), entferne es, bevor du Hreflang-Links erstellst, damit alle Sprachversionen auf dieselbe logische Seite verweisen.

export function meta({ location }: Route.MetaArgs) {
  const pathWithoutLocale = location.pathname.replace(/^\/[a-z]{2}(\/|$)/, "/");

  const hreflangLinks = buildHreflangLinks(
    pathWithoutLocale,
    SUPPORTED_LOCALES,
    BASE_URL,
    DEFAULT_LOCALE,
  );

  return [{ title: "About Us" }, ...hreflangLinks];
}

Dies stellt sicher, dass /en/about, /fr/about und /de/about alle Hreflang-Links generieren, die auf die korrekten sprachspezifischen URLs für denselben zugrundeliegenden Inhalt verweisen.