ドキュメント言語の設定

アクセシビリティとSEOのためのページ言語の宣言

問題

Webページはフランス語で表示されていますが、HTML文書自体にその言語が指定されていません（例: <html lang="en">）。言語を宣言しないと、スクリーンリーダーが英語の音韻規則を使用してフランス語のコンテンツを読み上げようとします。また、ブラウザが自動翻訳を提供できなくなり、検索エンジンのインデックス作成にも影響します。

解決策

ルートレイアウトコンポーネントでURLからlangパラメータを読み取ります。このlangパラメータを<html>要素のlang属性に渡します。これにより、ドキュメント全体の言語がブラウザと支援技術に明示的に宣言されます。

手順

1. ルートレイアウトでlangパラメータにアクセスする

Next.js App Routerでは、動的セグメント（[lang]など）内のlayout.tsxファイルは、そのセグメントの値をparams propとして自動的に受け取ります。

2. <html>要素にlang属性を設定する

app/[lang]/layout.tsxファイルを変更して、params propを受け取り、そのlangプロパティを<html>タグのlang属性に適用します。

// 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>
  );
}

これにより、/fr/aboutへのリクエストは、<html lang="fr">で始まるレンダリングされたページになります。このシンプルな変更により、スクリーンリーダー、検索エンジン、ブラウザに対して、コンテンツがどの言語で書かれているかを正しく通知します。