【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

1. HTMLの見出しタグとは？

HTMLの見出しタグとは、その名の通り「見出しを作るためのタグ」のことです。見出しタグには、<h1>、<h2>、<h3>…というように合計で6種類あります。以下のように、数字が小さいほど大きな見出しを表します。

◯◯の部分には、見出しの文を書きます。タグにはさまれた部分が見出しとなるわけですね。

1-1. HTMLコードの例

実際にコードを書いてブラウザでの表示を見てみましょう。

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>

この例では見出しタグに対してCSSでデザインなどを一切指定していません。それでもブラウザが気を利かせてh1やh2を大きめに表示してくれるのですね。

1-2. 実際の使用例

ちなみに見出しタグはh1〜h6の6種類しかありません。h7やh8などは存在しないので注意しましょう。

2. h1〜h6タグの使い分け

見出しの使い方にはルールがあります。これを守ることで、読み手が理解しやすく、検索エンジンにも評価されやすい記事を書くことができます。

2-1. h1〜h6を使う順番を守る

基本的にh1見出しから順番に使っていきます。「デザイン的に都合が良いから」といきなりh4見出しを使ったりするのはNGです。

2-2. h1タグの使用は1回だけにする

h1タグは最も大きな見出しで、ウェブページの主題を表すのに一度だけ使うのが理想的です。複数回使用自体がSEO的にマイナス評価になることは無いようなのですが、記事のテーマが読み手にも検索エンジンにも伝わりづらくなります。基本的には1ページ（1記事）につき一度だけ使うようにしましょう。 参考：More than one H1 on a page

h1タグをどこに使う？

ページの主題を表すところに使うので、以下のように使い分けるのが理想的かと思います。

ちなみにLivedoorブログやFC2ブログなどのブログサービスでは、h1タグの使い方がすでに決まっています（基本的に変えることができません）。例えば、はてなブログでは「トップページではブログ名に、記事ページでは記事タイトルにh1タグが使われる」ような設定になっています。そのため、h1タグの使い方をあまり意識することは無いのかもしれませんね。

2-3. h2〜h6は何回使ってもOK

h2以下の見出しタグは何回使ってもOKです。基本的に記事本文ではh2〜h6を使うことになるでしょう。

2-4. 論理的な記事構成にするコツ

見出しタグを使った理想的な記事構成のイメージを図にしてみました。

文章をいくつかのセクション（章）に分けて、その見出しとしてh2〜h6タグを使うと考えると分かりやすいでしょう。

まず、記事の内容をいくつかの大セクションに分けましょう。大セクションの頭には「h2の大見出し」を書きましょう。その大セクションの中で、さらに内容を分けた方が分かりやすいと感じたら、中セクションを作ります。中セクションの先頭には「h3タグではさまれた中見出し」を書きましょう。さらに細かくカタマリを分けたい場合は、必要に応じてh4、h5タグを使いましょう。

記事の構成例

たとえば、「ツイッターについて解説する記事」の構成例を考えてみます。

<h2>ツイッターとは？</h2>
 <p>〜</p>

<h2>機能</h2>
 <p>〜</p>
		<h3>プロフィール関連</h3>
		 <p>〜…</p>
				<h4>ユーザー名</h4>
		 		 <p>〜</p>
				<h4>自己紹介文</h4>
		 		 <p>〜</p>
		<h3>投稿関連</h3>
		 <p>〜…</p>

<h2>利用状況</h2>
 <p>〜</p>

<p>〜</p>は、見出しの下の本文を表しています。実はこれ、ウィキペディアのページを参考に作りました。ウィキペディアは多くの記事が論理的で分かりやすい構成で作られているのでとても勉強になります。

2-5. 見出しタグだけで記事を作らない

見出しタグだけで記事を書かないようにしましょう。h2〜h6タグを使ったらその後にはpタグで本文をきちんと書くのがルールです。なぜなら「見出しだから」ですね。

2-6. 基本的に画像に見出しを使わない

見出しタグ内には基本的に文字を入れます。重要な画像であっても、h2〜h6タグではさむのはNGです。ただし、１つだけ例外もあります。

サイトタイトル画像にh1タグを使う場合

トップページのサイトタイトルにh1見出しを使うとします。もしウェブサイトやブログのタイトルに画像を使われていたらどうすれば良いのでしょうか。そんなとき以下のようにimgタグのalt属性内にサイトタイトルを入れるようにしましょう。

<h1><img src="example.png" alt="サルワカ" /></h1>

2-7. キーワードを無理に詰め込まない

「見出しにキーワードを入れることがSEOに効果的」とははよく言われます。たしかにキーワードと記事内容の関連性を測るためにGoogleが見ていることは間違いなさそうですが、あまりにも多くのウェブサイトで意図的にキーワードを詰め込んでおり、近年Googleもその対策をしてきているように感じられます。いまや見出しにキーワードを詰め込むことで検索順位が上げようとするのはかなり危険な手法です。スパムとは見なされなくとも、「ユーザービリティの低いページ」とみなされてしまう可能性があります。不自然にキーワードを繰り返し使わないようにしましょう。

2-8. デザインの都合で見出しタグを使わない

「この部分の文字を大きくしたいから」「h3タグの見た目にしたいから」という理由で、見出しタグを使えば記事の論理構成が崩れてしまいます。h1〜h6タグは強調のためではなく「見出し」のために使いましょう。

4. まとめ

実際のところ、見出しタグを間違った順序で使っても検索順位に大きく響くことはないと考えられます。Googleも間違った文法だからと言って検索順位を下げるアルゴリズムはないと公言しています（参考：John Mueller氏の発言）。あくまでも記事を分かりやすく筋を通ったものにするために見出しタグを使うのが良いでしょう。

見出しタグの使い方についてより詳しく知りたい方はHTMLの見出しタグの使い方をチェックしてみてください。