Wie man die Dokumentsprache in TanStack Start v1 festlegt

Deklarieren Sie die Seitensprache für Browser und Screenreader

Problem

Webseiten müssen ihre primäre Sprache deklarieren, um über verschiedene User-Agents hinweg korrekt zu funktionieren. Ohne eine explizite Sprachdeklaration im Root-HTML-Element müssen Browser die Sprache des Inhalts erraten. Dies führt dazu, dass Screenreader auf die Systemsprache des Benutzers zurückgreifen, was zu falscher Aussprache führt, wenn die Inhaltssprache abweicht. Browser können keine präzisen Übersetzungsfunktionen anbieten, da ihnen Informationen zur Ausgangssprache fehlen. Suchmaschinen haben Schwierigkeiten, Inhalte zuverlässig für das entsprechende Sprachpublikum zu indexieren, was die Auffindbarkeit für Benutzer, die in dieser Sprache suchen, reduziert.

Lösung

Fügen Sie dem html-Tag ein lang-Attribut hinzu, um die Standardsprache Ihrer Seite festzulegen. In TanStack Start wird die HTML-Shell in der shellComponent der Root-Route definiert, die die Dokumentstruktur einschließlich des <html>-Elements rendert. Durch Hinzufügen des lang-Attributs mit dem entsprechenden Sprachcode zu diesem Element informieren Sie Browser, assistive Technologien und Suchmaschinen über die Sprache des Inhalts, sodass diese ihn korrekt verarbeiten und darstellen können.

Schritte

1. Identifizieren Sie das aktuelle Gebietsschema

Die shellComponent-Eigenschaft der Root-Route definiert die HTML-Shell, die alle Routeninhalte umschließt und immer serverseitig gerendert wird. Ermitteln Sie das aktuelle Gebietsschema aus dem Lokalisierungsmechanismus Ihrer Anwendung, wie Routenparameter, Cookies oder Header.

import type { ReactNode } from "react";
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";

export const Route = createRootRoute({
  shellComponent: RootDocument,
  component: RootComponent,
});

function RootComponent() {
  return <Outlet />;
}

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Dies etabliert die Shell-Struktur, in der Sie das Sprachattribut hinzufügen werden.

2. Fügen Sie das lang-Attribut zum html-Element hinzu

Setzen Sie das lang-Attribut auf dem <html>-Element mit dem Locale-Wert. Verwenden Sie ein gültiges BCP 47-Sprach-Tag, das zu Ihrer Inhaltssprache passt.

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Das lang-Attribut deklariert jetzt die Dokumentsprache, wodurch Browser und assistive Technologien den Inhalt angemessen verarbeiten können.

3. Verwenden Sie dynamische Locale-Werte

Wenn Ihre Anwendung mehrere Locales unterstützt, rufen Sie die aktuelle Locale aus Ihrem Routing- oder State-Management-System ab und übergeben Sie sie an die Shell-Komponente.

function RootDocument({ children }: { children: ReactNode }) {
  const locale = getCurrentLocale();

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function getCurrentLocale(): string {
  return "en";
}

Die Dokumentsprache wird jetzt basierend auf der aktiven Locale aktualisiert, wodurch sichergestellt wird, dass das lang-Attribut immer die aktuelle Inhaltssprache widerspiegelt.