技術

HTMLのlang属性は実際に何をしているのか

この短い属性一つで、ブラウザや翻訳ツール、検索エンジンがページの言語を正しく認識できるようになります。

概要

lang属性は、ページの一番最初のタグ(英語なら<html lang="en">、日本語なら<html lang="ja">など)に追加する短いコードで、そのページのコンテンツがどの言語で書かれているかを明示的に示します。ページ上の文言を見れば明らかだと思いがちですが、ソフトウェアは人間のように文章を読むわけではありません。文脈から推測させるのではなく、はっきりと宣言しておく必要があります。

ブラウザや翻訳ツール、検索エンジンは、言語に関わる処理を行う前に、実際のテキストを解析するよりも先にこの属性をチェックします。

重要な理由

ブラウザはlang属性を使って、そもそも自動翻訳の提案を出すかどうか、出す場合はどの言語から翻訳するかを判断します。lang属性が欠けていたり間違っていたりすると、すでにその言語で書かれているページなのに翻訳を提案されたり、逆に翻訳してほしい場面で提案されなかったりすることがあります。検索エンジンも、ページを適切な地域や言語向けの検索結果に一致させるための手がかりとしてこの属性を利用します。

これは小さく目に見えない部分ですが、修正はたった1行で済み、デメリットもありません。どんな言語であれ、実際の訪問者に公開されているページでこれを省く理由はありません。

修正方法

  1. ページのコンテンツの主要な言語を確認します。
  2. <html>タグにlang属性を追加または修正します。例えば英語なら<html lang="en">、フランス語なら<html lang="fr">のように、標準的な2文字の言語コードを使います。
  3. サイトに複数言語のページがある場合は、各ページのlang属性がサイト全体の主要言語ではなく、そのページ固有の言語と一致していることを確認してください。
  4. Squarespace、Wix、Webflow、WordPressなど多くのサイトビルダーでは、サイトの言語設定に基づいてこれが自動的に設定されます。これらのプラットフォームを使っている場合は、コードを直接編集するのではなく、サイト全体の言語設定を確認してください。
  5. Launch Readinessのチェックを再実行し、正しい言語コードでこの属性が検出されるようになったか確認しましょう。

あなたのサイトにもこの問題がないか確認しましょう

Launch Readinessは、この問題を含む約50項目を数秒でチェックします — 無料・登録不要。

無料でチェックする