SEOで最低限知っておきたい見出しタグの使い方

SEOで最低限知っておきたい見出しタグの使い方

今回は見出しタグを使用する上で、最低限知っておきたい見出しタグの使い方についてご紹介していきます。

見出しタグ(h要素)とは

見出しタグとは、HTMLタグの一種で、文法中の見出しを表現するタグです。見出しタグには重要度に応じて<h1>〜<h6>までの段階存在しており、<h1>が重要度の中で最上位の見出しの意味としてあります。
そのため、ページの中で最も重要な見出し要素をh1で囲みましょう。なお、WEB業界では、見出しタグの事をh要素という場面も多いです。

見出しタグ(h要素)の使い方

実際に見出しタグのコードの書き方について見ていきましょう。

見出しタグの書き方
<h1>h1タグ、最も重要な見出しタグ</h1>
<h2>h2タグ、2番目に重要な見出しタグ</h2>
<h3>h3タグ、3番目に重要な見出しタグ</h3>
<h4>h4タグ、4番目に重要な見出しタグ</h4>
<h5>h5タグ、5番目に重要な見出しタグ</h5>
<h6>h6タグ、6番目に重要な見出しタグ</h6>

実際の見出しタグの見え方

見出しタグh1からh6
重要度に応じて見出しタグによって、文字の大きさが異なります。なお、文字の大きさについてはCSSで調整できます。

見出しの重要性について

見出しタグがある文章とない文章について、まずご覧ください。

見出しタグのない例

見出しタグのない読みづらい文章
上述のような、見出しタグが存在しないテキストでは余白が少なく読みづらい印象をユーザーに与えてしまいがち。文章でも内容が2点3点と移り変わりおり、記事の概略すら掴みづらくなってしまいます。

見出しタグのある例

見出しタグのある文章
見出しタグが挿入されることで、後に続く文章の要約を自然と示しており、文章にまとまりが生まれました。そのため、可読性が高くなり、見出しレベルに合わせてフォントサイズが変わっているため、コンテンツの階層構造を視覚的にユーザーに伝えることができます。結果として、ユーザーは見出しを読むだけで文章のだいたいの概要を掴むことができるのです

検索エンジンにとっての影響

見出しタグの役割はユーザーの可読性を高めるだけでなく、検索エンジンにとっても見出しがあることによって、より重要ワードを汲み取ることができ、Googleがコンテンツを理解する手助けになります。Google Web Masterで名を馳せているジョン・ミューラー氏が手掛ける、「Google Webmasters」でも、ユーザーにとっても検索エンジンにとっても、より良いと言及されています。
そして、見出しタグに続く文章の要約を<p>タグ(段落を意味するタグ)で囲むことで、文章のまとまりを作り出すことができるので、覚えておくと良いです。

見出しタグと段落タグを使用した例
<h1>SEOとは?</h1>
<p>検索エンジンの最適化(SEO)は、検索エンジンのオーガニック検索結果を通じて、あなたのウェブサイトへのトラフィックの量と質を高める施策の事を指します。</p>

<h2>SEOの仕組みについて</h2>
<p>使用している検索エンジン(Google、Yahoo、Bingなど)の検索ボックスに質問を入力(または発言)すると、WEBページのリンクリストを返し、あなたの質問に答える機能を持っています。</p>

<h3>検索エンジンが持っているクローラを知ろう!</h3>
<p>Google(または使用している検索エンジン)には、クローラがあり、インターネット上で見つかるすべてのコンテンツに関する情報が収集されています。
クローラは、たどったページを検索エンジンに戻してインデックスを作成します。</p>

h要素の注意点

ここでは、見出しタグの様々なケースの注意点について解説していきます。

h1タグは基本的に1ページに1つ

基本的に<h1>タグは1ページに1つとしましょう。h1タグの要素はそのページの見出しの中で最も重要な要素となります。
その重要な要素がページに複数存在してしまわないよう、h1タグは1ページに1つとW3C(Web技術標準化を行う非営利団体)でも提唱されています。

当サイトでのh1の使い方をご紹介

例えばOUTSWANでも、「Sango」というWordpressテーマを使用していますが、基本的にはh1は1ページ1つしか使用されていません。
sectionタグとarticleタグ内のh1タグに関しては、後述で説明いたします。

階層構造(順番)を守る

見出しタグには順番が存在します。前述でもお伝えしましたが、h1タグに関しては1ページに1つ記述をし、h1以降に<h2>タグや<h3>タグを記述していくのが適切です。
階層構造が守られていない一例として、<u>h2タグが記述されていないのにもかかわらずh3タグが記述されている</u>ような、記述はしないようにしましょう。

階層構造が守られていない例
<h3>この冬おすすめのメンズ コート</h3>
<p>冬にこれから到来する中、おすすめのメンズコートを今回ラインナップ…</p>

<h2>誰もが合わせられるおすすめトレンチコート</h2>
<p>コートの中でもトレンチコートは少しカジュアルに…</p>

<h4>コートにも合う、冬用シューズについて</h4>
<p>コートにも合うメンズシューズもここでご紹介します…</p>

<h6>冬、雪道でも安心できるメンズブーツのご紹介!</h6>
<p>雪道でもすべらなメンズブーツ!そして今年のトレンドに合わせた…</p>

h要素を必要以上に多用しない

見出し要素を必要以上に多用することは避けましょう。必要以上に見出しを使用してしまうと、見出しが持つ要約が薄まり、ユーザー側にとってもコンテンツの階層構造見づらくなってしまいます。
Googleも過度なh要素の多用は避けるべきと明言されていますので、見出しと段落を1セットにした構造を意識して見出し付けをしていきましょう。

見出しタグが過度に使われている例
<h1>この冬おすすめのメンズ コート</h1>
<h2>冬にこれから到来する中、おすすめのメンズコートを今回ラインナップ…</h2>
<h3>誰もが合わせられるおすすめトレンチコート</h3>
<h4>コートの中でもトレンチコートは少しカジュアルに…</h4>
<h3>コートにも合う、冬用シューズについて</h3>
<h4>コートにも合うメンズシューズもここでご紹介します…</h4>
<h5>冬、雪道でも安心できるメンズブーツのご紹介!</h5>
<h6>雪道でもすべらなメンズブーツ!そして今年のトレンドに合わせた…</h6>

h1テキストはページ毎でユニークに設定

見出しタグはページ毎にユニーク設定をする解説画像
1ページにh1タグは1つと前述でもお伝えしましたが、そのh1の内容をサイトロゴなどに設定をし、h1タグの内容がページ毎に同じ内容になっているページをよく見かけます。
ですが、それは間違っております。サイトのトップページでは、ロゴにh1タグを囲んでいても問題ありません。ですが各々の下層ページに全く同じ内容のh1タグを使うのは避けましょう。

Googleは各ページ1つ1つどんな内容のコンテンツかをクローラが判別しており、各ページ共通の内容をもったh1を指定してしまうと、見出しタグの最重要要素がすべて同じ内容になってしまい、コンテンツの評価も下がってしまいます。そのため、各ページのh1要素はユニーク(すべて別々)の内容を設定しましょう。

OUTSWANでの例

OUTSWANでの例
記事ページでのh1使用例

当サイトは、TOPページのOUTSWANのロゴに関してはh1で設定していますが、各記事ページに関しては記事タイトルをh1設定しています。
そして、OUTSWANのロゴの部分はpタグで囲んでいます。

スタイルを整えるためだけに使わない

見出しタグはあくまで文書の階層構造を表しているタグなため、見た目を整える目的だけで、見出しタグ(h要素)を使用することは避けましょう。
見た目の部分を整えたい場合は、CSSを用いて文字の装飾をするようにしましょう。文字の色や大きさを変える<font<タグや太字にする<b>タグといったタグもHTMLの初心者の方が使いがちになってしまいますが、それは古いバージョンHTMLの考え方です。現在はHTML5にのバージョンで、今まで以上に文書構造を表すタグが増えており、装飾部分に関しては完全にCSSで定義するようになっています。

見出しの長さは短く設定

ページをながら見しているユーザーも少なくありません。そのため、見出しは簡潔で短く設定すると、よりユーザーの目に止まりやすいとされています。

文章型とそうでない例
  1. SEOを理解するために覚えておくべき書籍をご紹介します。
  2. おすすめのSEO書籍
上述のように、1つ目が文章型で、2つ目が見出し型で記載してみました。
2つ目のほうがより、文章も短かいため、ユーザーに伝わりやすい文体となります。すべては、ユーザーにより読みやすくあることを意識しながら、考えて見出し設計をしましょう。
※ただし、概略が伝えられないほどの短すぎる内容もNGです。そのため、簡潔に伝えるという点を意識しましょう。

Googleでも、見出しの長さについて触れており、非常に長い見出しは避けるべき対応方法だと明言されています。
参考 検索エンジン最適化(SEO)スターター ガイドSearch Console ヘルプ

キーワードを無理に詰め込みすぎない

SEOに重要だからといって、キーワードを無理に詰め込みすぎるのはよくありません。

キーワードを詰め込みすぎ見出し例
メンズファッション冬におすすめのメンズシューズ&コートをご紹介
上述のようにメンズファッション、シューズ、コートといった別々の見出しでかけばいいものの、無理にキーワードを並べてしまい、見出しが長く可読性がわるくなるため、無理にキーワードを詰め込みすぎず、読ませたい内容を切り分けて、キーワードの使用をするのがおすすめです。

上述のように、1つ目が文章型で、2つ目が見出し型で記載してみました。
2つ目のほうがより、文章も短かいため、ユーザーに伝わりやすい文体となります。すべては、ユーザーにより読みやすくあることを意識しながら、考えて見出し設計をしましょう。

基本的に画像は使用しない

見出しタグ内には、基本的に画像は使用しないようにしましょう。ですがTOPページ等のロゴ画像にあたる部分をどうしてもh1に使用したい場合は、img画像内のalt属性を使用し補うこともできます。

ロゴ画像に使用するようなケース
<h1><img src="/img/logo.jpg" alt="サイト名"></h1>

section要素内h1の使い方(上級)

HTML5で追加された、sectionタグ内でのh1使用について解説します。sectionタグによって1ページ内に複数のh1を定義しても問題ないという認識を持っているWEB担当者の方も少なくありません。
ですがWHATTWGというW3Cと共同でHTML5を標準化している団体と、W3Cとの間で意見が異なるようです。W3Cでは<h1>タグは1ページに1つとしており、WHATWGではsectionタグ毎にh1タグを記述でき、1ページに複数のh1タグを記述できると主張していました。
WHATWGの意見ではSectionタグ直後にh1タグを毎回入れるといった主張です。ですが、ぼくの意見としては文章中にh1が多用されていると、階層構造が崩れユーザー目線から立っても見づらくなってしまうという疑問が生じています。

そして、2016年HTML5.1がリリースされた段階で、その意見はW3CとWHATWGによって、完全に対照的となっています。
WHATWG section使用例
W3C section使用例

参考 W3c HTML5.1 Section使用例W3C 参考 WHATWG HTML5.1 Section使用例WHATWG

上記の画像のように、sectionタグ直後にWHATWCはh1を定義していますが、W3Cでは、複数存在しても問題ないh3タグを使用されています。
複数のh1タグを使用したからといって、順位に悪影響というのはなく、Googleも間違ったHTML文法だからといって順位を下落するようなアルゴリズムはないと公言されているようです。

個人的な見解としては、記事内のh1タグの複数使用については、可読性が悪くなると個人的には思っています。
そのため、OUTSWANでは、1ページh1タグを1つとして使用しています。

まとめ

今回お伝えした見出しタグについて、正しく見出しタグを使ったからといって、検索ランキングが大幅にあがるといった効果は期待しないようにしましょう。
あくまで、SEOでは何か1つを意識していれば検索順位は大きく上がるといった単純な考え方ではありません。Googleのアルゴリズムは、タイトル、見出し、コンテンツの内容、読込スピード、コンテンツの質、ユーザビリティやアクセシビリティやそのほかにもたくさんの様々な要因を見て、検索のランク付けをしています。だからといって、見出しをないがしろにしないよう、正しく階層構造を意識し、ページ毎にユニーク設定し、ユーザー目線で伝えやすいコンテンツを作っていくと、おのずと成果に繋がっていきます。