h2タグとは？h2タグの役割と使う際の注意点について解説

特に意識せずにh2タグを使っている方もいるかと思います。ただ闇雲に使うだけでは、Googleが正しくコンテンツの中身を理解できず、掲載したコンテンツの順位が上がらない可能性があります。
今回は、h2タグの使い方をよく理解できていない人のために、h2タグの役割と使い方について解説していきます。

h2タグとは？

h2タグとは何か解説していきます。

hタグとは

hタグとはheadingの略で、見出しを表し、HTMLの文法上h1からh6まであります。
各見出しの意味は以下となります。

タグ名	意味	使用上の注意点
h1	大見出し	もっとも重要の高い見出しを表します。文法上何個使用しても問題ないが、原則1ページにつき1つが望ましい
h2	中見出し	2番目に重要な見出しを表す。h1と違い何回使っても問題なし
h3	小見出し	直前のh2の小見出しを表すが、単独でも使っても問題ない。
h4	小々見出し	直前の小見出しを表し、さらに細かく説明したい場合に使われる。
h5	小々々見出し
h6	小々々々見出し

 

h1→h2→h3のようにhタグは数値が小さいものから順に使っていくのが基本です。

h2タグとは

h2タグは、hタグの表にもある通り、中見出しを表します。h2は、何回でも使っても問題なく、記事内や目次にも頻繁に使われています。

なお、h1も、文法上、何回使っても問題ないですし、グーグルのジョン・ミューラーも以下の動画で「h1は、1ページの中で好きなだけ使っていいし、上限も下限もない。」と述べています。

つまりSEO上複数あっても問題ないようです。

ただ、複数あるとクローラーが何を言いたいコンテンツなのか迷う可能性があるので、h1は、原則的に1つである方がよさそうです。

 

h2タグで使用できる属性

h2タグで使用できる属性は以下の4つですが、基本的に使われるのはclassとidでしょう。

• class:見た目の調整で使われます
• id：classと同様見た目の調整で使われますが、classとは違い同じid属性はページ内で1つしか使うことができません
• title：要素のタイトル属性で、カーソルを合わせると、定義されたタイトル名が表示されます。
• lang：要素の中で使われる言語です。

ただ、装飾する場合、以下のような形で直接記載するのではなく

<h2 class="">サンプル</h2>

cssなどで定義することが一般的でしょう。
・html

<div>
<h2>サンプル</h2>
</div>

・css

div h2{
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
  margin: 0 auto;
}

h2タグを使うメリット

h2タグを使うメリットは主に2つです。

検索結果に表示される

以下の下図のように、検索結果に検索キーワードに関連した見出しが表示されるようになっています。検索結果に表示されるということは、ユーザーのクリック率に影響するので、見出しを設定したほうがよいコンテンツに対しては、h2タグを設置することをお勧めします。

ユーザーやクローラーに対してページの内容を伝えることができる

見出しごとにどんな内容か記載することで、検索エンジンに対して、ページの内容を正しく伝えることができます。

またユーザーに対しても、見出しがないとどんな内容かわからず、せっかく訪れても、すぐに離脱する可能性があります。

見出しがあることで、ユーザーがどんな内容が記載されているのか伝えることができ、離脱を抑えられる効果が期待できます(ただし、ユーザーが見出しを判断して離脱する可能性はあります)。

なおコラムなど読ませるコンテンツの場合は、ファーストビューなどできるだけ上部に目次を付けることで、よりどんな記事なのか素早く伝えることができます。

目次の設置方法についてはこちらのコラムを参照してください。

 

h2タグの効果をいかすための8つの注意点

h2タグは何回でも使っても良いですが、いくつか設置する際の注意点がありますので見ていきます。

本文の内容とh2タグで設定した見出しが一致している

本文の内容と見出しが一致していない場合、内容に即していないと判断され、途中で離脱される可能性が高いです。

本文の内容と一致させるために、h2タグになる見出しを先に設定しても良いですが、本文を書いているうちに内容が異なることがあるかもしれません。

そのため、本文を書いてから、h2を設定するとより内容と一致しやすくなります。

狙うキーワードを含める

上位化を狙うキーワードを、タイトルタグやh1の他に、h2でも使うとSEO対策としても効果がありますし、記事の内容を効果的に伝えることができます。

ただ全てのh2タグに狙うキーワードを含める必要はありません。むしろ、全てのh2タグに入れると、ユーザーやクローラーにも不自然な印象を与え、結果順位が下がってしまう可能性もあります。

短い文章で内容がわかるようにする

ユーザーは文章をすべて読みませんので、一目で何が書かれているかわかるようにしましょう。また、長文な見出しにすると読み飛ばされる可能性もありますし、検索エンジン最適化（SEO）スターター ガイドにも避けるべき内容として、記載されています。

以下のことは避けましょう。
ページで見出しタグを過度に使用する。
非常に長い見出しを使用する。
構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用する

出典：検索エンジン最適化（SEO）スターター ガイド

そのため、短く内容がわかりやすいものや、数値など具体性や最新性がわかるものにすると、ユーザーにとっても読んでみようかとなるでしょう。

良い見出しの例
・h2タグを使うメリット
・h2タグを効果的に使う8つの注意点

h2タグの文字数は出来るだけ短めに

h2タグの文字数が長い・短いは検索順位に影響はありません。そのため長くても問題はないですが、見出しはユーザーにとって、目的の箇所を見つけるための目印になるため、短めの方が好ましいです。
一つの目安としては、上限を20～30文字程度に収まるようにすると良いでしょう。

画像には基本的には使わない

画像は、基本的にh2タグを使いません。どうしても使用する場合は、alt属性に代替テキストを設定しましょう。
なお画像を使ってh2タグを設置する場合は以下のようにします。

<h2>
<img src="https://pecopla.net/wp-content/uploads/2021/10/h2tag-300x169.jpg" alt="h2タグとは？" width="300" height="169"/>
</h2>

階層構造の順番を守る

例えば、h3の中にh2を入れる、h4の中にh2を入れるのはNGです。
なぜなら、hタグの階層構造は決まっているので、上記なような誤った使い方をすると、検索エンジンが混乱するからです。

そのため、h2→h3→h4となるように意識してください。
正しい順序で使うことは検索エンジン最適化（SEO）スターターガイドにも正しい順序で書くことを推奨しています。

見出しタグを使用して重要なテキストを強調する
わかりやすい見出しを使用して重要なトピックを示すと、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

見た目の調整など不必要な時は使わない

h2など見出しタグを見た目の調整で使うと、構造がバラバラになり、検索エンジンに本来伝えたい内容の構造で伝えられず、結果的に順位に影響するかもしれません。
見た目を調整したい場合は、CSSなどで調整するようにしましょう。

以下のことは避けましょう。
ページの構造を定義する際に、効果的でないテキストを見出しタグで囲む。
や のような他のタグのほうが適している場所で見出しタグを使用する。
見出しタグのサイズを不規則に変える。

出典：検索エンジン最適化（SEO）スターター ガイド

過度に使わない

また、見出しを過度に使うことも、スターターガイドに避けるべき内容として記載されています。

以下のことは避けましょう。
ページで見出しタグを過度に使用する。
非常に長い見出しを使用する。
構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用する

出典：検索エンジン最適化（SEO）スターター ガイド

まとめ

h2タグを使うことで、劇的に検索順位が上がるわけではありませんが、ここで解説した、h2の使い方をマスターして、ユーザーや検索エンジンにわかりやすいコンテンツにしていきましょう。