「このページを翻訳しますか？」の正体#
Chromeなどのブラウザで日本語のサイトを開いたとき、突然「このページを翻訳しますか？」というポップアップが表示された経験はありませんか？ あるいは、日本語のフォントが妙に中華フォント（漢字の形が微妙に違う）になっていたり、句読点の位置がおかしかったりする現象。
これらはすべて、HTMLの lang 属性 の設定ミスが原因です。
たった数文字の記述ですが、ブラウザ、翻訳ツール、スクリーンリーダー（読み上げソフト）、そしてSEOに対して、**「このページは何語で書かれているか」**を宣言する極めて重要なシグナルです。
1. 正しい設定方法#
日本語サイトの場合
ルートの <html> タグに lang="ja" を設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
...
Next.js での実装
Next.js (App Router) では、src/app/layout.tsx のルートレイアウトで設定します。
// src/app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
)
}
2. lang属性が影響する3つの領域#
① ブラウザの自動翻訳機能
lang="en" のまま日本語のコンテンツを表示すると、ブラウザは「これは英語のページだ」と誤認します。その結果、日本語が含まれていることを検知して「日本語に翻訳しますか？」という余計な提案を出したり、誤った翻訳を実行しようとしたりします。
② フォントのレンダリング（中華フォント問題）
漢字文化圏（日本、中国、台湾、香港など）では、同じUnicodeの文字でも、言語によって字形（グリフ）が異なる場合があります（例：「直」「骨」「返」など）。
lang="ja" が指定されていないと、OSやブラウザによっては中国語のフォントが優先され、違和感のある漢字が表示されることがあります。
③ アクセシビリティ（音声読み上げ）
視覚障がい者が利用するスクリーンリーダーは、lang 属性を見て読み上げのイントネーションや発音を切り替えます。
日本語のテキストを英語モードで読み上げようとすると、意味不明な発音になったり、アルファベット読みされたりして、情報がまったく伝わりません。
3. 部分的な言語の切り替え#
ページ全体は日本語でも、一部に英語の引用などがある場合は、その部分だけ lang 属性を変えることができます。これもアクセシビリティ向上のために有効です。
<p>
Appleのスローガンは
<span lang="en">"Think Different"</span>
です。
</p>
4. 多言語サイト（i18n）の場合#
多言語対応サイトを作る場合は、URLパス（/ja/, /en/）などに応じて動的に lang 属性を切り替える必要があります。Next.js の i18n ルーティング機能や、Middlewareを使用して制御します。
Webの基本中の基本ですが、テンプレートをそのまま使って lang="en" のまま放置されている日本語サイトは意外と多いです。リリース前のチェックリストに必ず入れておきましょう。
VIIO 編集部
VIIOの品質管理チーム。Webパフォーマンスとアクセシビリティの向上に情熱を注いでいます。複雑な技術をわかりやすく伝えることをモットーに記事を執筆中。