So legen Sie die Dokumentsprache in React Router v7 fest

Seitensprache für Browser und Screenreader deklarieren

Problem

Webseiten müssen ihre primäre Sprache gegenüber Browsern und assistiven Technologien deklarieren. Ohne explizite Sprachdeklaration verwenden Screenreader standardmäßig die Systemsprache des Benutzers, was zu falscher Aussprache führen kann, wenn die Inhaltssprache abweicht. Browser können keine präzisen Übersetzungsfunktionen anbieten, da sie die Ausgangssprache erraten müssen. Suchmaschinen haben Schwierigkeiten, Seiten zuverlässig für die korrekte Sprachzielgruppe zu indexieren, was die Auffindbarkeit für Nutzer reduziert, die in dieser Sprache suchen.

Lösung

Setzen Sie das lang-Attribut auf dem Root-<html>-Element, um die primäre Sprache des Dokuments zu deklarieren. Dieses Attribut akzeptiert einen gültigen Sprachcode, der Browsern, Screenreadern und Suchmaschinen mitteilt, welche Sprache der Inhalt verwendet. Wenn die Sprache explizit deklariert ist, können assistive Technologien korrekte Ausspracheregeln anwenden, Browser können passende Übersetzungsoptionen anbieten und Suchmaschinen können die Seite für die richtige Sprachzielgruppe indexieren.

Schritte

1. Aktuelle Locale ermitteln

Die Root-Route in app/root.tsx ist für das Rendern des Root-HTML-Dokuments verantwortlich. Wenn Ihre Anwendung locale-basiertes Routing verwendet (wie /:locale/...-Muster), extrahieren Sie die Locale aus den Route-Parametern. Andernfalls verwenden Sie eine Standard-Locale.

import { useParams } from "react-router";

export default function Root() {
  const params = useParams();
  const locale = params.locale || "en";

  return (
    <html lang={locale}>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>
        <h1>Content</h1>
      </body>
    </html>
  );
}

Dies liest die Locale aus der URL, falls vorhanden, und fällt auf Englisch zurück, wenn kein Locale-Parameter existiert.

2. Locale-Codes auf Language-Tags mappen

Wenn Ihre Anwendung benutzerdefinierte Locale-Identifikatoren verwendet, die von Standard-Language-Tags abweichen, erstellen Sie eine Mapping-Funktion, um diese in gültige BCP-47-Sprachcodes zu konvertieren.

function getLanguageTag(locale: string): string {
  const languageMap: Record<string, string> = {
    en: "en",
    "en-US": "en-US",
    es: "es",
    fr: "fr",
    de: "de",
    ja: "ja",
    "zh-CN": "zh-Hans",
    "zh-TW": "zh-Hant",
  };

  return languageMap[locale] || "en";
}

Dies stellt sicher, dass das lang-Attribut ein gültiges Sprach-Tag erhält, auch wenn Ihr Routing vereinfachte Locale-Codes verwendet.

3. Sprach-Tag auf das HTML-Element anwenden

Verwenden Sie das gemappte Sprach-Tag als Wert für das lang-Attribut auf dem <html>-Element in Ihrer Root-Komponente.

import { useParams } from "react-router";

function getLanguageTag(locale: string): string {
  const languageMap: Record<string, string> = {
    en: "en",
    es: "es",
    fr: "fr",
    de: "de",
  };
  return languageMap[locale] || "en";
}

export default function Root() {
  const params = useParams();
  const locale = params.locale || "en";
  const lang = getLanguageTag(locale);

  return (
    <html lang={lang}>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>
        <h1>Content</h1>
      </body>
    </html>
  );
}

Das lang-Attribut spiegelt nun die aktuelle Locale wider und wird automatisch aktualisiert, wenn Benutzer zwischen sprachspezifischen Routen navigieren.