h2タグとh3タグは、ページの内容をセクションごとに区切り、細かく整理するための見出しタグです。h1タグで示したページの主題をh2タグで大きく分け、h3タグで具体的に掘り下げることで、訪問者にも検索エンジンにも内容が伝わりやすいページになります。
この記事では、h2タグとh3タグの意味と違い、書き方、SEO効果を解説したうえで、ホームページ制作や運用の中で実際にどのように使うかを紹介します。h3タグは必要なときだけ使うといった注意点もまとめていますので、自社サイトの見出しを見直す際にお役立てください。
h2タグ・h3タグとは
h2タグとh3タグは、どちらもh1タグの下に置いてページの内容を整理する見出しタグです。まずはそれぞれのタグの意味と役割を解説します。
h2タグとは
h2タグは、Webページ内のセクションを区切るために使われる見出しタグの一つです。
見出しタグにはh1からh6まで種類がありますが、その中でもh2タグは、ページ全体の大見出しにあたるh1の次に重要な階層として位置づけられています。たとえばブログ記事やサービスページでページの大見出しをh1に設定した場合、その下に続く各セクションの見出しにh2を使うことで、ページ全体の構造が論理的に整理されます。
訪問者はページ全体の流れをつかみやすくなり、必要な情報へすばやくたどり着けるようになります。また検索エンジンにとっても、h2はページの内容を理解するための重要な手がかりとなり、どの部分にどのようなテーマが書かれているかを的確に把握できます。
h3タグとは
h3タグは、h2タグで区切ったセクションの中を、さらに細かく分けるために使われる見出しタグです。
見出しタグの階層ではh2の次に位置し、h2で示したテーマを具体的な項目に分けて説明するときに使います。たとえばサービスページでh2を料金案内とした場合、その中のプランごとの説明にh3を使うことで、同じセクションの中の情報が整理されます。
訪問者はセクションの中から自分に関係のある項目を見つけやすくなり、比較・検討がしやすくなります。検索エンジンにとっても、h3はセクションの中にどのような内容が含まれているかを把握するための手がかりとなります。
h2タグとh3タグの違い
h2タグとh3タグの違いは、見出しとしての階層にあります。h2タグはh1タグで示したページの主題をいくつかの話題に分けるための見出しで、h3タグはh2タグで分けた話題の中を、さらに具体的な項目に分けるための見出しです。
たとえば採用ページであれば、募集要項や選考の流れ、社員の声といった、それぞれが1つのまとまりとして成り立つ話題がh2になります。そのうえで、募集要項のh2の中で営業職や事務職といった職種ごとの説明を分ける場合に、h3を使います。
訪問者はまずh2を目で追って、そのページに求める情報があるかを判断し、必要な話題を見つけたらh3を見て、知りたい内容がどこに書かれているかを探します。h2はページを読み進めるかどうかを決める見出しで、h3はセクションの中で読む場所を決める見出しといえます。
h2にするかh3にするか迷ったときは、その内容だけで1つの話として成り立つかどうかで判断します。たとえば採用ページの福利厚生は、休暇制度や手当、研修制度など紹介する内容が多ければ、それだけで1つの話として成り立つためh2にします。一方で、紹介する内容が少なく募集要項の一部として伝えれば十分であれば、募集要項のh2の中にh3として入れます。
h2タグとh3タグの書き方
h2タグとh3タグは、HTMLで直接記述する方法と、WordPressの編集画面で設定する方法があります。
HTMLでの書き方
h2タグとh3タグは、HTMLで下記のように記述します。
<h2>見出しのタイトル</h2>
<h3>見出しのタイトル</h3>h2タグやh3タグでテキストを囲むことで、そのセクションのタイトルとして表示され、検索エンジンにもここが見出しであると伝わります。
h3タグは、必ずh2タグの後ろに記述します。たとえば採用ページで募集要項の中に職種ごとの説明を入れる場合は、下記のようにh2タグの下にh3タグを並べます。
<h2>募集要項</h2>
<h3>営業職</h3>
<h3>事務職</h3>このようにh2タグの下にh3タグを記述することで、見た目だけでなくHTML上でも見出しの階層が正しく伝わるようになります。
WordPressでの書き方
WordPressを使っている場合は、コードを直接書く必要はありません。
記事編集画面で見出しのスタイルから見出し2を選択するだけで、自動的にh2タグが挿入されます。h3タグを設定したい場合は、同じように見出し3を選択します。テーマやエディタによってH2や見出し2など表記は多少異なりますが、操作方法は基本的に同じです。
なお、太字や文字サイズの変更を行うだけでは、見た目は大きくなってもHTML上はh2タグやh3タグとして認識されません。編集画面で見出し2や見出し3を選択して、初めてh2タグやh3タグとして設定されます。
h2タグ・h3タグのSEO効果
h2タグ・h3タグとSEOの関係性を考えるうえで押さえておきたいのは、h2タグやh3タグ自体が検索順位を直接左右する要因ではないという点です。ただし、以下の2つの仕組みを通じて、SEO評価に間接的な影響を与えています。
検索エンジンがページ構造を理解しやすくなる
検索エンジンは、Webページの内容を理解する際にHTMLの構造を手がかりにしています。
h2タグは、h1に次ぐ優先度の高い要素として扱われ、各セクションが何をテーマにしているかを検索エンジンに伝える役割を持ちます。さらにh3タグでセクションの中を分けることで、そのテーマについてどのような項目を扱っているかまで伝わります。
h2タグとh3タグを適切に使うことで、ページ内のどこにどのような情報が書かれているかをクローラーが把握しやすくなり、対象のキーワードとの関連性が高まります。その結果、検索エンジンにページの内容が正しく評価され、上位表示されやすくなります。
特に情報量の多いページでは、h2タグとh3タグによって内容の区切りが明確になり、検索エンジンがページ全体のテーマを俯瞰しやすくなるというメリットがあります。
ただし、h2タグやh3タグにキーワードを詰め込みすぎると不自然な文章になり、かえって評価を下げる可能性があるため、文脈に沿った自然な言葉選びが大切です。
ユーザーの読みやすさが間接的にSEO評価につながる
h2タグとh3タグは、ページの構造を視覚的に整理し、ユーザーがコンテンツをスムーズに読み進められるようにする役割も持っています。
h2タグとh3タグが適切に設置されていると、ユーザーはページ全体の内容をつかみやすくなり、自分に必要な情報へすばやくたどり着けます。特にスマホで閲覧するユーザーは画面が小さく情報を探しにくいため、h2タグとh3タグによる見出しの整理が果たす役割はより大きくなります。
Googleの独占禁止法裁判の資料では、検索結果でのクリックや、Chromeの閲覧データをもとにしたホームページの人気度など、ユーザーの行動に関するデータが検索順位の評価に使われていることが明らかになっています。
見出しで内容が伝わり、訪れた人が求める情報にたどり着けることは、こうしたユーザー行動を通じて評価に反映されると考えられ、h2タグとh3タグの設置がSEOに間接的な良い影響を与える一因となります。
ホームページ制作・運用でのh2タグ・h3タグの使い方
ここからは、ホームページを制作するときや、公開後に運用するときに、h2タグとh3タグを実際にどのように使うかを解説します。
h2・h3の数に決まりはない
h2タグやh3タグは、1ページに何個まで使えるという決まりはありません。h1タグは1ページに1つが基本ですが、h2とh3は内容に合わせて必要な数だけ使えます。
たとえばサービスページのように紹介する内容が多いページでは、h2が10個以上になることもあります。反対に、内容が少ないページであれば、h2が2つか3つでも問題ありません。h3も同じで、h2の中に分けるべき項目がいくつあるかで数が決まります。
大切なのは数の多さではなく、それぞれの見出しがh1の内容を過不足なく回収し、意味のある区切りになっているかどうかです。
h1の内容をh2で回収してh3で具体的に分ける
h2タグを設計する際は、h1で示した内容を、複数のh2に過不足なく振り分けることが重要です。
たとえばカフェのホームページで、h1をモーニングメニューの内容と提供時間を紹介するページとした場合、メニューの内容を説明するh2と、提供時間を説明するh2の両方が必要になります。どちらか一方が欠けていると、h1への答えが不完全になります。
一方で、h1に含まれていない話題でも、モーニングの提供が終わった後のランチへの切り替え時間のように、テーマとつながりがあれば補足のh2として加えて問題ありません。避けたいのは、ランチメニューの紹介のように、モーニングメニューとは関係なく独立した話題を扱うh2で、ページ全体のテーマがぼやけてしまいます。
h2に振り分けた内容の中にさらに複数の項目がある場合は、h3で具体的に分けます。先ほどの例では、メニューの内容のh2の中で、ドリンクやフードといったメニューの種類ごとにh3を使うと、訪問者は目当てのメニューを見つけやすくなります。
このとき、h2を置かずにh1の下へいきなりドリンクやフードのh3を並べると、階層が不自然になるため、h1の下にh2、h2の下にh3という順番は崩さないようにします。
こうした見出しは、本文を書き始める前にすべて決めておくのがおすすめです。まずh1で訪問者に約束する情報を洗い出し、次にそれをどのh2で回収するかを決め、最後にどこをh3で分けるかを整理します。見出しを先に固めてから執筆に入ると、話の順番や抜け漏れを確認しやすくなり、見出しの階層が崩れることも防げます。
h2にはメインキーワードを自然に含める
h2タグには、ページ全体で狙っているメインキーワードを自然な形で含めることが基本です。
見出しに含まれる言葉から、検索エンジンはそのセクションの内容を判断するため、メインキーワードがあるとページ全体のテーマとの関連性が伝わりやすくなります。
ただし、すべてのh2に同じキーワードをそのまま繰り返すのではなく、たとえば美容室のホームページでメインキーワードがヘアカラーであれば、ヘアカラーの料金やヘアカラーを長持ちさせるお手入れ方法のように、メインキーワードにセクション固有の言葉を組み合わせましょう。
h3には無理にメインキーワードを入れる必要はなく、h2の中のどの項目を扱っているかが具体的に伝わる言葉を優先します。
h2・h3と本文の内容を一致させる
h2タグやh3タグと本文の内容が一致しているかどうかは、検索エンジンがそのセクションの関連性を判断する材料になります。
見出しで提示した内容以上のことを本文で語りすぎたり、逆に見出しで匂わせた内容に本文が答えきれていなかったりすると、見出し通りの内容ではないと判断されやすくなります。
たとえばペットショップのホームページでh2をトリミング料金としているのに、本文でペットフードの選び方の話ばかりが続いてしまうと、訪問者も検索エンジンも見出しと中身のズレを感じてしまいます。h3でも同じで、小型犬の料金としたh3の下で大型犬の料金まで説明すると、訪問者は探している情報がどこにあるのか分からなくなります。
h2やh3を書いた時点で、その下にどこまでの内容を書くかを決めておくと、本文執筆時のブレを防げます。
h2・h3は長くなりすぎないようにする
h2タグは、15〜30文字程度を目安に簡潔にまとめることが望ましいとされています。h3タグには決まった目安はなく、具体的な項目を示す見出しなのでh2より長くなることもありますが、その項目で何を説明しているかがすぐに伝わる長さにまとめると読みやすくなります。
h2タグやh3タグが長くなると、スマートフォンでは見出しだけで何行にもわたって表示されるようになり、訪問者が見出しから内容をつかみにくくなります。検索エンジンにとっても、見出しが長いと重要なキーワードがどこにあるのか判断しにくくなる可能性があります。
伝えたいことが多い場合は、h2タグでは要点だけを示し、詳しい説明はh3タグや本文に任せます。h3タグも同じで、何の項目かを示すことに絞り、説明は本文で行うようにすると、簡潔な見出しを保ちやすくなります。
リライト時はh2・h3の構成から見直す
公開後にページをリライトするときは、本文だけでなく、h2とh3はそのままでよいかを判断します。
判断の基準は、ここまで紹介した使い方と同じです。h1の内容をh2で過不足なく回収できているか、メインキーワードが自然に含まれているか、見出しと本文の内容が一致しているか、見出しが長くなりすぎていないかを確認します。
キーワードについては、Googleサーチコンソールでそのページが実際に表示されている検索キーワードを確認すると、今の見出しが検索ニーズに合っているかを判断しやすくなります。
問題がなければ見出しはそのまま残し、本文だけを修正します。一方で、訪問者が求めている情報が足りない場合はh2やh3を追加し、h1の内容とずれている見出しは差し替えます。見出しの構成から見直すことで、リライトを重ねてもページ全体のまとまりを保てます。
h2タグ・h3タグを使うときの注意点
h2タグとh3タグは、使い方を誤ると訪問者にも検索エンジンにも内容が伝わりにくくなります。ここでは、設置する際に気をつけたいポイントを解説します。
h3は必要なときだけ使う
h2やh3の数に決まりはないとはいえ、見出しを増やせばよいわけではありません。h3タグは、h2の中に複数の項目があり、分けたほうが訪問者にとって読みやすくなるときに使います。
h2の内容が短い場合や、1つの話で完結している場合は、無理にh3で分ける必要はありません。また、h2の中にh3が1つしかない場合は分ける意味が薄いため、h3を使わずにh2の本文として書いたほうが自然です。
この記事のh2タグとh3タグの違いの項も、内容が1つの話で完結しているため、h3を使わずに書いています。
h2だけでページの内容がわかるようにする
ページを訪れた訪問者の多くは、本文をすべて読む前に、まずh2だけを目で追ってそのページにどんな情報があるかを判断します。そのため、ページ内のh2を並べて読んだだけで、そのページ全体でどのような内容を扱っているかがひと通り把握できることが理想です。
たとえば美味しいパンの作り方をテーマにしたページで、h2が材料の選び方、生地のこね方、発酵のコツ、焼き方のように並んでいれば、ページを開いた時点でどんな手順が書かれているかがわかります。逆にポイント1、ポイント2、ポイント3のような抽象的なh2が並んでいると、実際に何が書いてあるのかは本文を読むまでわかりません。
h2を見ただけで各セクションの中身が具体的にイメージできる言葉を選ぶことで、訪問者はh2だけを見た段階で必要な情報があるかを判断でき、読み進めてもらいやすくなります。
h2・h3のデザインは階層がわかる強弱にする
h2タグとh3タグの見た目はCSSで決まるため、ホームページのデザインによっては、h2は文字だけなのにh3には背景色が付いているなど、h3のほうが目立って見える作りになっていることがあります。見た目の強弱が階層と逆になっていると、訪問者はどれが大きな区切りなのかを判断できなくなります。
h2は文字を大きくしたり、背景色や線を付けたりしてはっきり目立たせ、h3はh2より控えめな装飾にすることで、見た目からも階層が伝わるようになります。
ホームページを制作する際は、h2やh3のデザインをあらかじめCSSで決めておくことが大切です。決めておかないと、公開後にページや記事を追加するたびに担当者が文字の色や大きさを個別に変えることになり、ページごとに見出しの見た目が違ってしまいます。
あらかじめ決めておけば、見出し2や見出し3を選ぶだけで同じデザインで表示されるため、誰が更新しても見た目がそろいます。
なお、h2タグとh3タグはあくまで文書構造を示す要素であり、見た目を大きくしたり目立たせたりするためのタグではありません。デザイン目的でh2タグやh3タグを使ってしまうと、本来見出しではない文章までページの目次に表示されてしまったり、検索エンジンがどこまでを本当の見出しとして扱えばよいのか判断しにくくなったりします。
見出しではない文章を強調したい場合は、CSSで文字サイズや色、太さを調整すれば十分です。
ブログ記事の目次にh3まで表示するかは役割で決める
ブログ記事に目次を設置する場合は、目次にh2だけを表示するか、h3まで表示するかを決める必要があります。
h2だけを表示すると目次が短くまとまり、記事全体の流れをつかみやすくなります。一方でh3まで表示すると、目次から具体的な項目へ直接移動できるようになりますが、項目の多い記事では目次が長くなり、かえって見づらくなることもあります。
どちらにするかは、ブログの役割で決めます。たとえば、サービスへの問い合わせにつなげるための記事が中心であれば、全体の流れをつかんでもらえるようh2だけを表示し、用語の解説など訪問者が特定の項目を探しに来る記事が中心であれば、h3まで表示するといった判断です。
目次の表示範囲はブログ全体で統一しておくと、記事ごとに見え方が変わらず読みやすくなります。
画像をh2・h3に使う場合はalt属性を設定する
h2タグやh3タグに画像を使うケースもありますが、その場合は画像の内容を説明するalt属性を必ず設定しましょう。
検索エンジンは画像そのものを完全に理解できるわけではないため、alt属性がないとその見出しが何を意味しているのか伝わりにくくなります。また、視覚に障がいのある訪問者がスクリーンリーダーを使う際にも、alt属性がなければ見出しの内容が読み上げられません。
そもそも見出しには画像よりテキストのh2タグやh3タグを使う方が、訪問者と検索エンジンに伝わりやすくなります。
キーワードを詰め込むとスパムと判断される
1つのh2タグやh3タグに同じキーワードを何度も入れたり、関係のないキーワードを詰め込んだりすると、Googleからスパムと判断されるおそれがあります。
キーワードの詰め込みは、Googleのスパムに関するポリシーで違反行為として挙げられており、該当すると検索順位が下がったり、検索結果に表示されなくなったりすることがあります。
見出しにキーワードを入れるのは、そのセクションの内容を伝えるためです。訪問者が読んで不自然に感じる見出しになっていないかを基準に、キーワードは必要な分だけ含めるようにしてください。
まとめ
h2タグはh1で示したページの主題をいくつかの話題に分けるための見出しで、h3タグはh2で分けた話題の中を、さらに具体的な項目に分けるための見出しです。
h2タグやh3タグ自体が検索順位を直接左右するわけではありませんが、検索エンジンがページの構造を理解しやすくなることと、訪問者が必要な情報にたどり着きやすくなることを通じて、SEOに間接的な良い影響を与えます。
ホームページ制作や運用では、本文を書く前にh1の内容をh2で過不足なく回収し、必要に応じてh3で具体的に分ける構成を決めておくことが基本です。そのうえで、h2にはメインキーワードを自然に含め、見出しと本文の内容を一致させ、長くなりすぎないようにまとめます。
公開後のリライトでも、本文だけでなく見出しの構成から見直すことで、ページ全体のまとまりを保てます。
h3は必要なときだけ使い、デザインでもh2とh3の強弱がわかるようにしておくと、訪問者にも検索エンジンにも伝わりやすいページになります。見出しの役割を理解したうえで、自社サイトのh2タグとh3タグを見直してみてください。
