So legen Sie die Dokumentsprache in TanStack Start v1 fest

Seitensprache für Browser und Screenreader deklarieren

Problem

Webseiten müssen ihre primäre Sprache deklarieren, um in verschiedenen User Agents korrekt zu funktionieren. Ohne explizite Sprachdeklaration am Root-HTML-Element können Browser die Sprache des Inhalts nicht bestimmen und müssen raten. Dies führt dazu, dass Screenreader auf die Systemsprache der Benutzer 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 die entsprechende Sprachzielgruppe zu indexieren, was die Auffindbarkeit für Benutzer reduziert, die in dieser Sprache suchen.

Lösung

Fügen Sie dem html-Tag ein lang-Attribut hinzu, um die Standardsprache Ihrer Seite festzulegen. In TanStack Start wird das HTML-Gerüst 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. Aktuelle Locale identifizieren

Die shellComponent-Eigenschaft der Root-Route definiert das HTML-Gerüst, das alle Route-Inhalte umschließt und immer serverseitig gerendert wird. Bestimmen Sie die aktuelle Locale aus dem Locale-Erkennungsmechanismus Ihrer Anwendung, wie z. B. Route-Parametern, Cookies oder Headern.

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 Gerüststruktur, in der Sie das Sprachattribut hinzufügen werden.

2. Lang-Attribut zum html-Element hinzufügen

Setzen Sie das lang-Attribut auf dem <html>-Element mit dem Locale-Wert. Verwenden Sie einen gültigen BCP 47-Sprach-Tag, der der Sprache Ihres Inhalts entspricht.

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

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

Das lang-Attribut deklariert nun die Dokumentsprache und ermöglicht es Browsern und assistiven Technologien, den Inhalt entsprechend zu verarbeiten.

3. Dynamische Locale-Werte verwenden

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 nun basierend auf der aktiven Locale aktualisiert, wodurch sichergestellt wird, dass das lang-Attribut immer die aktuelle Inhaltssprache widerspiegelt.