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

見出しタグの使い方

記事内に商品プロモーションが含まれる場合があります

今回はHTMLの見出しタグの使い方について解説します。Webデザイナーだけでなく、Webライターやブロガーは必ずおさえておくべきでしょう。

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

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

見出しタグ一覧

  • <h1>◯◯</h1>:1番大きな見出し
  • <h2>◯◯</h2>:2番目に大きな見出し
  • <h3>◯◯</h3>:3番目に大きな見出し
  • <h4>◯◯</h4>:4番目に大きな見出し
  • <h5>◯◯</h5>:5番目に大きな見出し
  • <h6>◯◯</h6>:6番目に大きな見出し

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

1-1. HTMLコードの例

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

HTMLコード
<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は1番小さい見出し</h6>
ブラウザ表示

見出しの使い方例

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

1-2. 実際の使用例

見出しタグの例

例えばサルワカの場合、記事のタイトルはh1タグで書かれています。

h2タグの例

記事本文の大見出しはh2タグで書かれています。HTMLコードを見ると<h2>図表を華やかに…</h2>となっているわけですね。

h3タグの使用例

中見出しはh3タグで書かれています。見出しタグを正しく使えば、記事の構成がグッと分かりやすく明確になります。

サルワカくんの顔(通常)
サルワカくん

ちなみに見出しタグは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タグをどこに使う?

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

  • トップページ:ウェブサイトのタイトルにh1を使う
  • 各記事ページ:記事タイトルにh1を使う

h1の使用例画像

サルワカでもトップページだけはサイトタイトルに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です。ただし、1つだけ例外もあります。

サイトタイトル画像に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の見出しタグの使い方をチェックしてみてください。

サルワカ