文書言語の設定

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

問題

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

解決策

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

手順

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

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

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

app/[lang]/layout.tsxファイルを修正して、paramsプロップを受け取り、その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">で始まるページをレンダリングすることが保証されます。この簡単な変更により、スクリーンリーダー、検索エンジン、ブラウザにコンテンツがどの言語で書かれているかを正しく伝えることができます。