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">). Dieses Versäumnis, die Sprache zu deklarieren, führt dazu, dass Screenreader versuchen, den französischen Inhalt mit englischer Phonetik auszusprechen. Es 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 die Sprache des gesamten Dokuments explizit für Browser und assistive 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 auf dem `<html>`-Element

Modifizieren Sie Ihre app/[lang]/layout.tsx-Datei, um den params-Prop zu akzeptieren und dessen lang-Eigenschaft auf das lang-Attribut des <html>-Tags anzuwenden.

// 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 dazu führt, dass die gerenderte Seite mit <html lang="fr"> beginnt. Diese einfache Änderung informiert Screenreader, Suchmaschinen und Browser korrekt darüber, in welcher Sprache der Inhalt verfasst ist.