LINEで現役エンジニアに直接質問してみよう!登録無料

HTML h1、h2〜h6で見出しタグの書き方と使い分け!h1は一回しか使っちゃダメ?

書籍や論文など、色々な文章には「見出し」があります。見出しは読み手に「これから〇〇について書きますよ!」と伝え、理解を簡単にする重要な役割を持っています。

  • HTMLで見出しはどうやって作るの?
  • 見出しを作る時の注意点ってある?
  • 見出しを間違えちゃうとどのようになるの?

このような疑問に答える初心者向けの内容です。

HTMLのh1、h2〜h6タグとは?見出しタグとは?

HTMLで見出しを作るには、「見出しタグ」と呼ばれるタグを使います。見出しタグは、<h1><h2><h3>など合計で6種類あります。

  • <h1>: 1番目の見出しタグ
  • <h2>: 2番目の見出しタグ
  • <h3>: 3番目の見出しタグ
  • <h4>: 4番目の見出しタグ
  • <h5>: 5番目の見出しタグ
  • <h6>: 6番目の見出しタグ

このタグで囲ったテキストがHTML上の見出しになります。数字の小さい<h1>が最大の大見出しになり、<h6>が最小の小見出しになります。

見出しタグは書籍などの各章のこと

見出しタグは、書籍にある本の目次の各章の事だと思えばOKです。

例えば、Ruby on Rails 5アプリケーションプログラミングという書籍の目次構造を参考にしてみます。

この画像のように、上から順番に大見出し、中見出し、小見出しとなっているので、HTMLで見出しを表現するとh1 h2 h3という対応になります。

このサイトの見出しはこのようになっている

書籍の見出しと一緒というのは理解できたとおもいます。ではWebページのHTML上ではどのように使われているのでしょうか?このサイトを例にして見出しタグの位置を見てみます。

このサイトのページでは、このように見出しタグを設定しています。

  • h1(大見出し) … 記事タイトル
  • h2(中見出し) … 記事の中見出し
  • h3(小見出し) … 記事の少見出し

「記事の中見出しをh2に設定しているのか?h1じゃだめなのか?」などの疑問がでてくるかもしれません。

理由としては、h1を各Webページ上の1つだけにした方が検索エンジン上良い結果になるからです。

見出しタグの使い方

見出しタグは、下記のように<h1></h1>の2タグでテキストを囲みます。囲んだ部分が見出しテキストになります。

例えば、<h1>を使って見出しを書くと次のようになります。

<h1>1番目の見出しタグ</h1>

見出しタグの大きさやデザインはCSSで指定する

見出しタグを作ると使うと、文字の大きさやフォントが変わったりします。ですので、「見出しタグ = 大きな文字」という認識を持ちがちです。Office のExcelやWordのように、見出し設定をすると文字が大きくなるだけですが、HTMLの場合は違います。

HTMLの場合は、絶対的に<h1>が一番大きな見出しで、<h6>が一番小さな見出しです。

たとえ、下記のように、<h6>が一番文字が大きくて立派でも、<h1>で囲まれた方が大見出しです。

なんでこんな決まりがあるかというと、「HTMLで作られたWebサイトはGoogleのようなBotが見に来るから」です。

Botは文字の大きさから見出しの大きさを判断できません。もしかしたら、Webサイトによっては、サイドナビの為にフォントサイズが逆転しているのかもしれません。ユーザーによりわかりやすいのようにしているのかも。設定ミスかも。。。いろんな理由があるにせよ、Bot側からはそのような事情はわからないわけです。

そのため、h1が大見出し、h6が小見出しだと、HTMLの仕様で決まっています。

見出しタグを実際にブラウザから確認してみよう

私達が普段見ているWebサイトはCSSによってデザインされています。もともと、ブラウザで設定されている見出しタグはこんな見た目をしています。

このように、ブラウザ側が予め気を聞かせてh1やh2の文字サイズを大きめにして、h6を小さめに表示してくれます。

見出しタグの使い方ポイント4つ

見出しタグの使い方には4つのポイントがあるので紹介します。

  1. h1、h2~h6タグを使う順番は守る
  2. h1は1つのページで使うのは1回だけにする
  3. h2〜h6は何回でも使ってOK
  4. 見た目を変えるためだけの見出しタグを使い分けるのはNG

h1、h2〜h6タグを使う順番は守る

見出しタグは<h1>から順番に使っていくようにしましょう。もし、<h2>を使いたくなった場合は、サイト上のどこかに<h1>があることを確認して、使うようにします。

なぜかと言うと、検索エンジンが書かれている内容(主題)について正確に判断してもらうためです。

より具体的には、

h1 → h2h4 → h3
h2 → h3h5 → h2

みたいに、1つの記事内で順番をバラバラにさせて書くことはいけません。

正しい順番は、

h1 → h2 → h3 → h4h2

です。一見先程と同じようにバラバラしているように見えますが、これは正しい順番です。

なぜなら、この場合は<h4>で書くことが終わったので、新しい章として<h2>に移動したからです。

まとめると、見出しタグは「h1 → h2 → h3…」と順番にカウントアップしていかなくていけませんが、「h6 → h5 → h4…」は守る必要は無いということです。

h1は1つのページで使うのは1回だけにする

h1を使うのは使うのは1回だけにしましょう。h1はその記事の内容を表す一番重要な要素なので、複数回<h1>を使うと、検索エンジンや読み手に何について書いているページなのか意味が伝わりづらくなります。

h1の中身は、そのページの主題(最も伝えたいこと)を書くようにしましょう。

明らかに主題と異なる内容の場合は、別ページをつかって複数に分けるようにします。

MEMO

HTML5で追加された<section>を使えば、h1を複数回使っても検索エンジンに意図を伝えられるようになりました。しかし、基本的に<h1>は1つだけで問題ありません。

h1はWebページのどこに使う?

Webページ内にh1は1つだけしか使ってはいけないことを解説しましたが、どこに<h1>を設置するのが一番良いのでしょうか?

理想的には、下記にしたがって設置すると間違いありません。

  • Webサイトのトップページ: Webサイト名
  • 記事ページ: 各記事のタイトル(Webサイト名にはh1を付けない)

具体的には、下記のようにします。

このようにすると、「このページは何なのか?」を検索エンジンにつたえやすくなります。

MEMO

画像を見出しに使う時は、必ずalt属性をつけるようにしましょう。alt属性とは、その画像にどんな内容や情報が書かれてあるのかをテキストで記述する部分です。

画像はどんな内容が書いてあるのか機械に判別できません。画像の内容がわからなければ、どんな見出しなのかもわからず、検索エンジンから良い評価をもらえません。

例えば、このサイトのTOPページでは、

<h1>
  <a href="https://hackable.jp">
    <img src="logo.png" alt="ハッカブルプログラミング">
  </a>
</h1>

のようにかかれてあります。

h2〜h6は何回でも使ってOK

h1は1回しか使わないほうがいいですが、h2h6は何回でも使ってOKです。

ですが、基本的に<h6>まで使うことまめったにありません。<h2> <h3> <h4>ぐらいまでで文章構成ができるようにしたほうがいいです。

<h6>まで使っている場合は、各章が細かすぎるかもしれません。かえって読みづらくなってしまうので注意しましょう。

見た目を変えるためだけの見出しタグを使い分けるのはNG

「デザインがいいから」などの理由でいきなりh3とか使い出すのはダメ。ということです。

h1h6では、小見出しになるほど文字サイズが小さくなるなど、種類ごとに見た目がわかります。それを利用して、「<h2>のほうが文字が大きいから」「<h3>の方がデザインにあっているから」などデザインを調節するために見出しタグを使い分けるのはNGだと言うことです。

なぜなら、それでは文章構成が論理的におかしくなってしまうからです。

また、人間がWebページを見る場合は、文字の大きさで正しい見出しを認識することが出来ますが、検索エンジンはHTMLを見ているので、正しい見出しを認識することができなくなります。

見出しタグの見た目はすべてCSSで操作可能なので、これを使って調節するようにしましょう。

見出しタグの下には文書を入れよう!

見出しタグだけで記事を作るのはいけません。見出しタグの下には文章を設置し、見出しの詳細の内容を書くようにしましょう。

実際に見出しタグと文章を使って記事を作ってみました。構造として、このようなものを作るようにします。

また、目次を作るために見出しタグを使うことはできません。目次を作る場合は<ul> <li>などで作るようにしましょう。

見出しタグの誤用には気をつけよう!

HTMLを書き始めた初心者にやりがちな事ですが、h1などの見出しタグのデザインを利用して、<p>内部で使ったりする人がたまにいます

例えばこんな感じです。

間違った用法の例

<p>サンゴ礁は<h1>海中のお花畑</h1>と言われています</p>

これは大きな間違いです。見出しタグは本で言うタイトルや目次のような役割ですから、文章中に使うことはできません。

もし、文字の大きさなどを目的に変えている場合は、<b>タグ <strong>タグなどを使うようにしましょう!

見出しタグのWebサイトでの使用例

実際にWebサイトでどのように使われているのか、紹介します。自分でWebサイトを作り、見出しタグを使う際の参考にしてみてください。

見出しタグの使い方のうまいサイトWebサイトの種類別に分類してみました。

ブログ系

ブログ系では、TOPページと記事ページで見出しタグの使い方が異なります。

TOPページの場合、Webサイトタイトルに<h1>、各記事へのリンク部分のタイトルの<h2>を設定します。

各記事ページの場合は記事タイトルの<h1>、記事の中見出しや小見出しに<h2> <h3>を使います。

口コミ系

口コミ系でも、TOPページと記事ページで見出しタグの使い方が異なります。

ブログ系と同様に、TOPページにはWebサイトタイトルに<h1>に設定。そして、検索手段のテキストを<h2>で囲みます。

各記事の詳細ページや検索ページでは、Webページごとに異なるテキストになるように左上のテキストを変えてそれに<h1>を設定しています。

Webサービス系

最後にWebサービス系です。このタイプではページのサービス名に<h1>を設定、そのページ下部で特徴や口コミなどで<h2>を使っています。

見出しタグを間違って設定するとどんな影響が出るの?SEOとの関係

結論から言うと、見出しタグの使い方が間違っていもそこまで致命的ではありません

検索エンジン開発者側のGoogleが、見出しタグを間違った場合の影響についていくつか解答しているので見ていきましょう!

複数のh1タグをWebサイトに入れたら評価はどうなる?

質問内容

複数のh1を1つのWebページに入れたらどうなりますか?なにか影響を与えますか?

解答

実際には無いだろう。

複数のh1タグがあった場合にどうなるかというと、どれが本当に主となる見出しなのか私たちにはわからなくなる。ある意味、主見出しの価値が薄まってしまう。
だが、何か間違ったことをやっていると私たちが判断するような事態ではない。完全に無視する。

4、5語の見出しを2段落くらいの長さの見出しに拡大するようなものだ。長くした見出し内にあるコンテンツをすべてを、短い見出しと同じように扱うことは当然できない。

引用: https://www.suzukikenichi.com/blog/currently-correct-usage-of-h-tags/

見出しタグできちんとした階層にしなかったらどうなる?

https://youtu.be/-qKxgI8ScKE?t=2090

質問内容

h2タグの見出しの下にコンテンツを書いています。
そのなかには小見出しもあります。

小見出しにはh3タグを使うべきでしょうか?
それともh2タグのなかにすべて置いたままにしておいたほうがいいでしょうか?

解答

見出しタグはコンテンツの文脈を理解するのに少しだけ手助けになる。
だが特効薬となるようなものではない。

なので、見出しを正しく使っていないからといって、「これは問題だ。アルゴリズムで順位を下げよう」と私たちは判断したりはしない。

見出しタグは、構造を理解する役に立つが、決定的に重要だと言えるものでもない。

そういった観点からすると、意味的な視点から見てh2の下にh3を置くことに意味があると考えるなら、そのようにコンテンツを構成すればいい。もちろん、そうすればいい。

でももしサイト全体のデザインをやり直ししなければならないなら、おそらくもっと力を注ぐべき重要なことがほかにあるだろう。

引用: https://www.suzukikenichi.com/blog/currently-correct-usage-of-h-tags/

MEMO

見出しタグはSEO上、必ず入れるタグであるとされてきました。SEOとは、検索エンジンに対して検索上位を目指すために行われる対策の事です。
そのSEO対策の中で、Webページでは、見出しタグの順番は必ず守らなくてはいけない1ページにつき<h1>は一個が絶対!という風に言われてきました。

ただ、この内容って検索エンジンの開発者側が言っていたことではなくて、検索エンジンを利用して検索上位に上げてきた人が言っている言葉なんです。

コンテンツをクロールしてもらい、正しい評価を手助けするために見出しタグを設定するのは、やらないよりはやるほうがいいぐらいの思っていた方がいいかもしれませんね。

まとめ

見出しタグの使い方とそのポイントをまとめます!

  • 見出しタグは書籍のタイトルや各章の目次に対応するもの
  • 見出しタグは<h1> ~ <h6>の6種類あり、数字が大きいほど重要度が高い
  • h1を使うのは1ページにつき1回だけにします
  • 見出しタグの順番は守るようにしましょう
  • 見出しタグの内容を画像にする時は、画像にalt属性を付けましょう
  • 見出しタグの下にはコンテンツを配置するようにしましょう
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。