lang="en" とは
lang="en" はHTMLの要素などで使われる属性で、その要素（およびその子要素）の言語が英語 (English) であることをブラウザや検索エンジン、スクリーンリーダーなどに伝えるものです。
<html lang="en">日本語の場合は「lang="ja"」になります。
<html lang="ja">最近のWebサイトはReactやNext.jsで制作されたものが増えており、その影響でWebサイトが「lang="ja"」ではなく「lang="en"」になっているケースが以前より増えています。
なぜ、ReactやNext.jsで制作すると「lang="en"」のWebサイトが増えるのかというと、ReactやNext.jsでプロジェクトを作成する際には、以下のようなコマンドを使用します。
# React
npm create vite@latest my-react -- --template react-swc-ts
# Next.js
npx create-next-app@latestこれらのコマンドを実行して作成されるプロジェクトでは、lang属性のデフォルト値が「en」になっています。そのため、「lang="en"」を「lang="ja"」に書き換えず、そのままリリースしてしまうケースが増えているのです。
日本語サイトを lang="en" にする問題点
日本語のWebサイトなのに「lang="en"」にしてしまうと3つの問題が発生します。
1. 検索エンジンで正しく表示されなくなる
「lang="en"」が設定されていると、日本語の検索結果に表示されにくくなるというSEO上の問題が発生する可能性があります。
日本語が多く含まれるWebサイトであれば、「lang="en"」でもGoogleは日本語のサイトとして認識することが多いです。
しかし、テキスト量が少ない場合や多言語対応のWebサイトでは、「lang="en"」が設定されていると日本語での検索結果に影響が出る可能性があります。
2. スクリーンリーダーが正しく読み上げない
「lang="en"」が設定されているとスクリーンリーダーによっては読み上げ音声を英語に切り替えてしまうため、アクセシビリティ上の問題が発生する可能性があります。
3. 自動翻訳ツールが起動してしまう
Google翻訳などの翻訳ツールをブラウザにインストールしている場合は、英語のWebサイトだと誤検知して、Google翻訳が起動してしまいます。
また、Microsoft Edgeの場合は翻訳のブラウザ拡張機能がインストールされていなくても、英語のWebサイトだと認識されて、翻訳するかユーザーに通知してくるので注意が必要です。
試しにMicrosoft Edgeで以下の「lang="en"」のサンプルサイトにアクセスしてみてください。
「英語のページを翻訳しますか？」という通知が表示されてしまうことが確認できます。
