Festlegen der Dokumentsprache

Problem

Eine Webseite wird auf Französisch angezeigt, aber das HTML-Dokument selbst ist nicht als solches gekennzeichnet (z. B. <html lang="en">). Diese fehlende Sprachdeklaration führt dazu, dass Screenreader versuchen, den französischen Inhalt mit englischer Phonetik auszusprechen. Sie verhindert auch, dass Browser automatische Übersetzungen anbieten, und beeinträchtigt die Indexierung durch Suchmaschinen.

Lösung

Lesen Sie den lang-Parameter aus der URL in der Root-Layout-Komponente. Übergeben Sie diesen lang-Parameter an das lang-Attribut des <html>-Elements. Dies deklariert explizit die Sprache des gesamten Dokuments gegenüber Browsern und assistiven Technologien.

Schritte

1. Zugriff auf den `lang`-Parameter im Root-Layout

Im Next.js App Router erhält die layout.tsx-Datei innerhalb eines dynamischen Segments (wie [lang]) automatisch den Wert dieses Segments als params-Prop.

2. Setzen des `lang`-Attributs am `<html>`-Element

Ändern Sie Ihre app/[lang]/layout.tsx-Datei so, dass sie die params-Prop akzeptiert und deren lang-Eigenschaft auf das lang-Attribut des <html>-Tags anwendet.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Dies stellt sicher, dass eine Anfrage an /fr/about zu einer gerenderten Seite führt, die mit <html lang="fr"> beginnt. Diese einfache Änderung informiert Screenreader, Suchmaschinen und Browser korrekt darüber, in welcher Sprache der Inhalt verfasst ist.