本記事で学ぶ内容

・見出し要素の意味が理解できる
・h1要素の使い方が理解できる

SEOを意識したページ作りをする際に、忘れてはいけないのが、見出し要素です。SEOだけでなく、ユーザビリティの面でも正しく使うことが推奨されます。
今回は見出し要素の効果的な使い方について解説します。

見出し要素とは

h01.png
見出し要素とは、HTMLの構造に見出しをつけることができるもので、

から
まで存在しています。数字が小さいものほど重要と理解されます。
見出しタグで囲んだテキストや画像を「見出し」として指定できます。

見出し表示.png
見出しタグで囲まれたテキストは、ページではそうではないテキストに比べて大きく表示されます。

見出し要素の効果

Googleは検索キーワードにマッチするページを表示させたいと考えています。そこで、ページの内容を理解するためにGooglebotを使い、ページの内容を理解しようと試みます。なかでも、見出し要素に書かれている内容を見ることで、ページの中で何を主に伝えたいのかを理解しようとします。これは、見出し要素が、その下に続くコンテンツを要約したもののため、重要であろうと考えるからです。

よって、見出し要素には、その下に続くコンテンツを要約した内容にするのはもちろんのこと、なるべく検索される可能性の多いキーワードを選び配置することが重要です。

見出し要素の意味と効果が理解できたら、次は効果的な使い方を学びましょう。闇雲に使えば良いというわけではなく、ちゃんとしたルールが存在します。

効果的な見出し要素にするための注意点

見出しだけで下に続くコンテンツの内容が分かるようにする

見出しはコンテンツを要約するものなので、その下に続くコンテンツを要約した内容でなければなりません。
必ず、意味の通じるテキストを設定するようにしましょう。

h1要素は1ページに1つ

HTML5では、h1要素は1ページ内に複数使えると勧告されましたが、その後勧告されたHTML5.1ではそれが削除されています。

The use of nested section elements each with an h1 to create an outline.
アウトラインを作成するためにsectionそれぞれの要素にネストされた要素h1を使用する。
引用元:HTML 5.1: Changes

h1要素をルールに基づいていれば複数使って良いとされていましたが、これが撤回されたことにより1ページ内に1つ使うことが推奨されたということになります。

ただ、現在すでにh1要素を複数使ってしまっていて、撤去に工数がかかる場合はそのまま運用するという手もあります。
これは複数使っていても、Googleテキストを適切に解釈してくれるため、工数を割かない方が良いということです。

h1,h2,h3...と順番で使うのが正しい。でも、そうじゃなくても大丈夫。

HTMLの文法上、見出しはh1を頂点にしてh2,h3...と順番に使っていく必要があります。

しかし、そのような使い方をしていない場合でも、Googleはちゃんと理解してくれるようです。
公式放送(英語)で、ユーザーから以下のような質問が届き、

h1要素、h2要素、h3要素の順番は重要ですか?
例えば、h3要素のあとにh1,h2,h3が来ても問題ありませんか?

Googleのジョンミュラー氏は以下のように回答しています。

それは問題ではありません。コンテンツの内容を理解するのに少し使いますが、そのために厳密な順序を守る必要はありません。

Googleは、見出し要素をページの内容を理解するのに使ってはいるものの、それが出来ていないからといって致命的な事態にはならないと言っています。
もちろん、正しい構造で使うにこしたことはないため、リソースと見比べながら対応すると良いでしょう。

なるべく画像に見出し要素を設定しない

基本的に画像に設定しても違反ではありませんので、設定しても問題ありません。しかし、Googlebotは画像の意味することを理解できません。よって、可能であればテキストに対して設定するべきです。しかし、どうしても設定しなければならない場合は、alt属性に画像の意味を記述するようにしましょう。

<img src="画像の置いてある場所の指定" alt="ここに画像の説明を入れる">

見出し要素を無理に多用しない

見出し要素がSEOにとって重要だからといって、無理に多用することは厳禁です。多用することで、そのページで本当に伝えたいことが薄まってしまい、本来の意図とかけ離れてしまいます。目立たせたいのであれば、強調要素( / / )を使うようにしましょう。

まとめ

見出し要素は、Googlebotページを理解するために使われる大切な要素です。大切だからこそ、無理に多用しスパム的な使い方をしないように、正しい使い方を覚えましょう。

ここがポイント

・見出し要素は、Googleがページの内容を理解するために使われる
・見出し要素は、h1要素は1ページ1つにし、なるべく階層構造にする
・見出し要素は、その下に続くコンテンツを要約した内容の見出し要素にし、ひと目で内容が分かるようにする