記事を書くたびに何となくh2タグを使ってはいるものの、「本当にSEO効果があるのか」「1記事に何個まで使ってよいのか」「h1やh3とどう使い分ければよいのか」がはっきり分からない——そんなモヤモヤを抱えたまま更新を続けているWeb担当者は少なくありません。
h2タグは、HTMLの見出し要素の中でも実務でもっとも登場回数が多いタグです。検索エンジンがページの構造を理解する手がかりになり、ユーザーが本文を読むかどうかを判断する材料にもなります。一方で、「見出しにキーワードを詰め込めば順位が上がる」といった古い認識のまま運用されているケースも多く見られます。
この記事では、h2タグの基本的な意味からh1・h3との違い、SEOとの関係性、階層構造のルール、効果的な作り方と注意点までを、MDN Web DocsやGoogleの公式見解を踏まえて整理します。
h2タグ(hタグ)とは
h2タグとは、HTMLで文書の見出しを表す要素のひとつで、「Heading(ヘディング)2」の略です。読み方は「エイチツータグ」。Webページの中では、大きなテーマを区切る「中見出し」として使われます。
hタグの基本|h1〜h6の6種類がある
HTMLの見出し要素は、MDN Web Docsによればh1からh6までの6段階が定義されています。h1がもっとも上位のセクションレベルで、h6がもっとも下位です。数字が小さいほど重要度・階層の上位を表し、数字が大きくなるほど細かい区分になります。
| タグ | 役割 | 1ページでの一般的な使い方 |
|---|---|---|
| h1 | 大見出し(ページ全体のテーマ) | 記事タイトルとして1つが原則 |
| h2 | 中見出し(章の区切り) | 複数回使用してよい |
| h3 | 小見出し(h2の内訳) | h2の下に複数配置 |
| h4 | h3をさらに細分化 | 必要な場合のみ |
| h5 | h4をさらに細分化 | 使用頻度は低い |
| h6 | 最小の見出し | ほとんど使われない |
見出しタグの役割は、大きく2つあります。ひとつは、検索エンジンのクローラーに対して「このセクションは何について書かれているか」を伝えること。もうひとつは、ユーザーが本文を読む前に全体の構造を把握できるようにすることです。MDN Web Docsでは、見出しの情報はユーザーエージェントが文書の目次を自動生成する際にも利用されると説明されています。実際、WordPressの目次生成プラグインの多くは、h2やh3を拾って目次を組み立てる仕組みになっています。
なお、見出しタグは文字を大きく太く表示するためのタグではありません。ブラウザの初期設定でh1が大きく、h6が小さく表示されるのは、あくまで文書構造を視覚的に反映した結果です。装飾はCSSで行うのが正しい考え方です。
h1タグとの違い
h1タグとh2タグの違いは、担当する範囲の広さにあります。h1はページ全体のテーマを示す大見出しで、記事タイトルに相当します。対してh2は、そのテーマを構成する各章の中見出しです。
| 比較項目 | h1タグ | h2タグ |
|---|---|---|
| 位置づけ | ページ全体の主題 | 章・セクションの主題 |
| 使用回数 | 1ページに1つが原則 | 複数回使ってよい |
| 内容の粒度 | 記事全体を要約 | 1つの章を要約 |
| 対応するもの | 書籍の「書名」 | 書籍の「章タイトル」 |
「h1は1ページに1つ」というのは、HTMLの文法上の絶対的な禁止事項ではなく、推奨事項です。MDN Web Docsでも1ページにつきh1は1つだけ使うことが推奨されています。またGoogleのジョン・ミューラー氏は、複数のh1がページ上にあってもGoogleのシステムは問題なく処理できると述べており、h1が0個でも5個でもページは問題なくランキングされるという趣旨の発言をしています。
ただし「問題なく処理できる」ことと「そうすべき」ことは別です。h1が複数あると、ページの主題がどれなのかが読み手にとって曖昧になります。アクセシビリティの観点でも、すべてのセクションにh1を使うと、支援技術を利用するユーザーにはすべてが最上位の見出しとして認識され、コンテンツ内の移動が難しくなるとMDNは指摘しています。特別な理由がない限り、h1は1つに絞るのが無難です。
また、titleタグとh1タグも混同されがちですが、titleは検索結果やブラウザのタブに表示されるメタ情報、h1はページ本文に表示される大見出しという違いがあります。両者は同じ内容でも構いませんが、役割は異なります。
h2タグとh3タグの使い分け
h2とh3の使い分けは、「その内容がひとつの独立した論点か、それとも前の見出しの内訳か」で判断します。
たとえば「BtoBマーケティングの手法」という記事であれば、次のような整理になります。
- h2:オンライン施策
- h3:SEO対策
- h3:Web広告運用
- h3:メルマガ配信
- h2:オフライン施策
- h3:展示会出展
- h3:セミナー開催
h3は必ずh2の配下に置き、h2で提示したテーマを分解する形で使います。逆にいえば、h3が1つしかない場合は、そもそも分解する必要がなかった可能性があります。目安として、h3を置くならh2あたり2つ以上に分けられるかを確認するとよいでしょう。
h2タグとSEOの関係性
h2タグとSEOの関係は、「間接的に効く」と理解するのが実態に近い整理です。ここは誤解が多いポイントなので、仕組みと限界の両方を押さえておきましょう。
検索エンジンがページ構造を理解する助けになる
Googleのジョン・ミューラー氏は、見出しはページ上のコンテンツをより良く理解する助けになると説明しています。見出しはキーワードを集めた場所としてではなく、その周辺にある本文が何について書かれているかを示す「文脈のシグナル」として使われるという考え方です。
Googleが公開している検索エンジン最適化(SEO)スターターガイドでも、重要なトピックを示す明確な見出しを使うことで内容の階層構造がつくられ、ユーザーが文書内を移動しやすくなると案内されています。つまり、見出しの整備はまずユーザーの理解を助けるための施策であり、その結果として検索エンジンにもページの構造が正しく伝わる、という順序です。
ユーザー側のメリットも見逃せません。Webページを読む多くの人は、最初から一字一句読むのではなく、見出しを拾い読みして自分に必要な情報があるかを判断します。h2が具体的で分かりやすければ、離脱を防ぎ、必要な箇所まで読み進めてもらいやすくなります。目次を自動生成するツールもh2を基準にすることが多く、記事全体の可読性向上に直結します。
h2タグの設定だけでは順位は上がらない
一方で、押さえておくべき現実もあります。ミューラー氏は、見出しタグにキーワードを入れることはもはや検索順位の決定要因ではなく、それが有効だったのは2000年代初頭のことだという趣旨の説明をしています。また、見出しはページ上にある唯一の評価対象ではなく、Googleはコンテンツそのものも評価しているとも述べています。
さらに、「h1のほうがh2より重要で、h2のほうがh3より重要」という重み付けの発想も、現在では正確ではないと整理されています。h2タグを整えることは、あくまでコンテンツの質を正しく伝えるための下準備であり、それ単体で順位を押し上げる施策ではありません。
したがってh2タグの改善は、次のような位置づけで取り組むのが妥当です。
| 期待できること | 期待できないこと |
|---|---|
| ページ構造がクローラーに正確に伝わる | 見出しを直したから順位が上がる |
| ユーザーが必要な情報にたどり着きやすくなる | キーワードを詰めた分だけ評価される |
| 目次生成やスニペット表示の材料になる | 中身の薄い記事が上位表示される |
h2タグを使う際の階層構造のルール
h2タグを正しく使ううえで、もっとも基本的かつ間違えやすいのが階層構造のルールです。
数字の若い順に使い、階層を飛ばさない
見出しタグは、h1→h2→h3→h4というように、数字の若い順に使うのが原則です。MDN Web Docsでも、見出しレベルを飛ばさずに入れ子にすることが推奨されています。
h2の次にいきなりh4を置くと、文書構造上は「h3という中間階層が抜けている」状態になり、クローラーにも支援技術にも構造が正しく伝わりません。見た目の文字サイズを調整したいという理由で階層を飛ばすのは、典型的なNGパターンです。
なお、かつてHTML5にはsectionなどの要素で見出しレベルを自動的に解釈する「アウトラインアルゴリズム」という仕組みが提案されていましたが、どのブラウザも実装しなかったため、2022年に仕様から削除されています。現在は、h1〜h6の数字そのものが文書の階層を表すと考えて問題ありません。
正しい階層構造とNGな階層構造の例
具体例で比較してみましょう。
正しい例
h1 リードジェネレーションとは
h2 リードジェネレーションの手法
h3 オンライン施策
h3 オフライン施策
h2 リードジェネレーションのKPI
h3 リード獲得数
h3 リード獲得単価
NGな例
h1 リードジェネレーションとは
h3 リードジェネレーションの手法 ← h2を飛ばしている
h2 オンライン施策 ← 階層が逆転している
h4 リードジェネレーションのKPI ← 階層が飛んでいる
| よくある誤り | なぜ問題か | 正しい対応 |
|---|---|---|
| h2を飛ばしてh3から始める | 文書の最上位の区切りが不明確になる | 章の区切りは必ずh2から |
| h3の下にh2を置く | 階層が逆転し構造が破綻する | 下位ほど数字を大きくする |
| 文字を小さくしたいのでh4にする | 見た目の都合で構造を歪めている | サイズはCSSで調整する |
WordPressのブロックエディタを使っている場合、見出しブロックのツールバーから「H2」「H3」といったレベルを選択できます。段落ブロックで「##」と半角スペースを入力するとh2に、「###」と半角スペースでh3に変換されるマークダウン記法のショートカットも使えるため、執筆スピードを落とさずに階層を整えられます。HTMLで直接記述する場合は、<h2>見出しテキスト</h2>のように開始タグと終了タグで囲むだけです。
効果的なh2タグの作り方・コツ
構造を守ったうえで、次に考えるべきは中身の作り方です。実務で押さえたいポイントは3つあります。
対策キーワードを自然に含める
h2には、そのセクションで扱うテーマに関わるキーワードを自然な形で含めます。前述のとおりキーワードの詰め込みが直接評価されるわけではありませんが、キーワードが入っていない抽象的な見出しでは、そのセクションが何について書かれているのかが読み手にも検索エンジンにも伝わりません。
重要なのは「含める」ことであって「並べる」ことではない点です。日本語として自然に読める範囲で、テーマを表す語を1つ入れれば十分です。
見ただけで内容が伝わるよう簡潔にする
h2は、見出しだけを拾い読みしても記事の流れが分かる状態が理想です。文字数に技術的な制限はありませんが、実務では20〜30文字程度を目安にすると、スマートフォンでの表示でも折り返しが少なく読みやすくなります。
| 良い見出しの例 | 改善が必要な例 |
|---|---|
| h2タグとSEOの関係性 | 関係性について |
| インサイドセールスの立ち上げ手順 | 弊社が考える、これからのインサイドセールス組織のあり方とその立ち上げにおける諸手順について |
| 導入コストの比較 | まとめると |
「まとめると」「その他」「ポイント」といった見出しは、それ単体では何の情報も持ちません。見出しだけを並べたときに目次として成立するかを、公開前にチェックするとよいでしょう。
検索意図を反映した見出しにする
h2の並びは、そのまま記事の設計図です。読者が知りたい順番になっているかを意識して構成しましょう。
たとえば「h2タグ」という検索の背景には、「意味を知りたい」「h1との違いを知りたい」「SEO効果があるのか知りたい」「何個まで使えるのか知りたい」といった複数の疑問が含まれています。関連キーワードやよくある質問を調べたうえで、需要の大きい順にh2を配置すると、ユーザーの理解の流れに沿った構成になります。
同じような見出しが並んでしまう場合は、「〜とは」「〜の方法」「〜の注意点」のように切り口を変えて書き分けると、内容の重複も避けられます。
h2タグを使う際の注意点・NG例
最後に、実務で起きやすい失敗パターンを整理します。
デザイン目的(文字サイズ調整)で使わない
もっとも多い誤用が、「ここだけ文字を大きく目立たせたい」という理由で見出しタグを使うケースです。見出しタグは文書構造を示す要素であり、装飾のためのタグではありません。文字サイズや色を変えたいだけなら、CSSで指定するのが正しい対応です。
逆に、構造上は見出しであるにもかかわらず、太字(strongタグ)や文字サイズの変更だけで見出しらしく見せているケースも問題です。この場合、検索エンジンにはただの本文としてしか認識されません。
見出しを文章形式にしない・長文にしない
h2は見出しであって本文ではありません。「〜だと思いませんか?」「〜については、以下で詳しく解説していきます。」といった文章形式の見出しは、要点がぼやけるうえに長くなりがちです。体言止めや簡潔な問いかけの形で、要点を先に置く書き方を意識しましょう。
キーワードを詰め込みすぎない
「h2タグ SEO 使い方 注意点 メリット」のように、対策キーワードを羅列した見出しは典型的なNG例です。ユーザーにとって読みにくいだけでなく、そのセクションの主題が何なのかを不明瞭にします。1つの見出しで扱うテーマは1つに絞る「一文一義」の考え方が有効です。
画像だけを見出しに使う場合はalt属性を設定する
デザイン上の理由で見出しを画像にする場合、画像の中の文字はテキストとして認識されません。この場合は<h2><img src="..." alt="見出しのテキスト"></h2>のように、alt属性に見出しの内容を記述する必要があります。alt属性が空のままだと、検索エンジンにも支援技術にも見出しの内容が伝わらず、構造上の情報が失われます。可能であれば、画像ではなくテキストで見出しを作り、CSSで装飾するほうが確実です。
| NG例 | 何が問題か | 改善策 |
|---|---|---|
| 文字を大きくするためh2を使う | 構造と装飾が混同されている | CSSでフォントサイズを指定 |
| 見出しが2行以上の文章になっている | 要点が伝わらない | 20〜30文字程度に要約 |
| キーワードを並べただけの見出し | 主題が不明瞭で読みにくい | 1見出し1テーマに絞る |
| 画像見出しでalt属性が空 | 内容が一切伝わらない | altに見出しテキストを記述 |
h2タグに関するよくある質問
h2タグは何個まで使える?
HTMLの仕様上、h2タグの使用回数に制限はありません。1記事に何個使っても文法的な問題は生じず、内容に応じて必要なだけ配置して構いません。
ただし、多ければよいというものでもありません。h2が多すぎると1つのセクションが細切れになり、かえって読みにくくなります。目安としては、5,000字程度の記事であればh2は5〜8個程度、1つのh2あたり600〜1,000字前後の本文がぶら下がるイメージが扱いやすい構成です。逆にh2が2個しかない長文記事は、途中で読者が現在地を見失いやすくなります。
なお、h1についても仕様上は複数使用が可能ですが、前述のとおりページの主題を明確にするため1つに絞るのが実務上の推奨です。
h2タグの文字数の目安は?
こちらも技術的な制限はありません。1文字でも100文字でもエラーにはなりません。
実務上は、20〜30文字程度に収めると読みやすさとキーワードの盛り込みやすさのバランスが取れます。スマートフォンでの表示では1行あたり20文字前後で折り返されるため、それ以上長くなると視認性が落ちます。目次に表示されたときに一覧性が保たれるかどうかを基準に判断するとよいでしょう。
短すぎる場合も注意が必要です。「メリット」だけでは何のメリットか分からないため、「導入のメリット」「h2タグを設定するメリット」のように、対象を補って具体化します。
まとめ
h2タグは、HTMLの見出し要素h1〜h6のうち、章の区切りを示す中見出しにあたるタグです。この記事の要点を整理します。
- h2は中見出しで、1ページに複数回使ってよい。h1は記事タイトルにあたる大見出しで、1つに絞るのが推奨される
- 見出しは数字の若い順に使い、階層を飛ばさない。h3はh2を分解する形で配置する
- Googleは見出しをページの文脈を理解する手がかりとして使うが、見出しにキーワードを入れること自体は現在の順位決定要因ではないと説明されている
- h2タグの整備は、ユーザーの理解を助け、構造を正しく伝えるための下準備であり、単体で順位を上げる施策ではない
- 効果的なh2は、キーワードを自然に含み、20〜30文字程度で内容が伝わり、検索意図の順に並んでいる
- 文字サイズ調整などデザイン目的での使用、文章形式の長い見出し、キーワードの詰め込み、alt属性のない画像見出しは避ける
- h2タグの使用回数・文字数に技術的な制限はないが、5,000字程度の記事ならh2は5〜8個が扱いやすい
見出しの設計は、記事を書き始める前の構成づくりの段階でほぼ決まります。本文を書き終えてから見出しを整えるのではなく、h2の並びで記事全体の流れをつくり、その骨組みに沿って本文を書く。この順序を守るだけで、読みやすさも構造の正確さも大きく改善します。
