1. はじめに｜見出しタグが「適当」になっていませんか？
Webサイトやブログ記事を作っていると、<h1>〜<h6>の見出しタグを使う場面が必ず出てきます。
しかし、「とりあえずh2で太くしておけばいいかな？」とデザイン目的で使ってしまうと、SEOにもユーザビリティにも悪影響を及ぼしかねません。
この記事では、見出しタグの正しい使い方とSEO対策の基本を、初心者の方にもわかりやすく解説していきます。
2. 見出しタグ（h1〜h6）とは？HTML構造上の役割
見出しは「文書構造を示すラベル」
見出しタグは、HTML文書における「章立て」を示す要素です。<h1>が最上位で、数字が大きくなるにつれて下位の階層を表します。
<h1>記事タイトル</h1>
<h2>セクション1</h2>
<h3>セクション1の詳細</h3>
<h2>セクション2</h2>
このように、見出しは入れ子構造になっており、SEO対策だけでなく、スクリーンリーダーによるアクセシビリティやGoogleのクロールにも影響を与えます。
3. SEOにおける見出しの重要性
h1は「ページの顔」、h2・h3は構造の骨組み
SEOの観点から見ても、見出しは以下のような役割を担っています：
| タグ | SEOでの役割 | 使用目安 |
|---|---|---|
| h1 | ページの主題を示す（1ページ1つ） | 記事タイトルなど |
| h2 | 大見出し、主要セクション | 何度でもOK |
| h3 | 小見出し、補足説明 | 必要に応じて |
| h4〜h6 | 補助的な分類・階層 | あまり多用しない |
Googleは見出し構造を元にページの内容を理解し、検索結果の表示やリッチスニペットにも反映することがあります。
4. 正しい階層構造の作り方｜h2→h3→h2の順番で使う
よくあるミスは以下のようなケース：
<h1>ブログ記事タイトル</h1>
<h3>いきなりh3を使ってしまう</h3>これは「h2がスキップされている」状態で、HTML構造上は論理の飛躍と見なされます。
正しい使い方は以下のように順序を保つこと：
<h1>記事タイトル</h1>
<h2>概要</h2>
<h3>詳細1</h3>
<h3>詳細2</h3>
<h2>まとめ</h2>ポイント：
- h2の下にh3、h3の下にh4 というように段階的に使用
- h1は原則1ページに1つだけ
5. よくあるNG例とその改善方法
❌ デザイン目的でhタグを使う（CSSで対処すべき）
<h4 style="font-size:28px;">目立たせたいからh4</h4>これはNGです。意味と見た目は分離するのがHTML＋CSSの基本です。
✅ 改善例（見た目だけならクラスを使う）
<p class="headline">目立たせたいテキスト</p>そしてCSSで装飾：
.headline {
font-size: 28px;
font-weight: bold;
}❌ 複数のh1を使ってしまう
<h1>サイト名</h1>
<h1>記事タイトル</h1><h1>はそのページで最も重要な見出し。原則1つだけに絞りましょう。
6. WordPressテーマでのhタグ自動出力に注意！
WordPressでは、テーマやプラグインによってタイトル・ウィジェット・パンくずリストなどで<h1>や<h2>が自動出力されることがあります。
✅ チェックポイント
header.phpやsingle.phpでthe_title()が<h1>で囲まれているか？- サイドバーウィジェットが
<h1>になっていないか？ - パンくずリストが
<h1>や<h2>で出力されていないか？
SEOを意識するなら、構造上のh1が「本文のタイトル」だけになっていることを確認しましょう。
7. 見出し構造のチェックツール紹介
見出しの構造が正しいか確認するために、以下のツールが便利です。
🔧 Chrome拡張
- Web Developer
→「情報」→「文書のアウトライン」で確認 - HeadingsMap
→ 見出しタグの構造をツリー形式で表示
8. 見出しタグと構造化データの関係
見出しタグはGoogleの構造化データ（Schema.org）とは直接関係しませんが、構造的な文章の整理がクローラーに有利に働くため、間接的に評価されます。
特に記事ページで Article タイプの構造化データを記述する場合、headlineやdescriptionの内容と<h1>や<h2>が一致していると信頼性が高まります。
9. まとめ｜見出しタグは「文章の骨組み」
見出しタグは、SEOや検索順位を左右する「直接的な武器」ではないかもしれません。
しかし、それは建物における柱や梁（はり）のような存在。
Googleや読者が迷わない構造を作ることが、最終的には評価や信頼につながります。
ぜひ今後は、見た目ではなく意味で見出しタグを選ぶように意識してみてください。
実務Tips（見出しタグ活用のコツ）
1. H1は1ページ1回だけ
- ページの主題を示すタグとして必ず1つだけ設定
- 記事タイトルに自動でH1が割り当てられるケースが多いので、重複しないよう注意
2. H2〜H6で階層構造を作る
- H2：大きなセクションの見出し
- H3：その中の小見出し
- H4以降：必要に応じてさらに細分化
- 「見出し＝目次」と意識して構造を整理するとSEOにもユーザーにも優しい
3. キーワードを自然に入れる
- 不自然に入れすぎず、セクションの内容を端的に表す言葉にする
- Googleは「見出しタグ＝重要なトピック」と認識するため、検索クエリとマッチしやすくなる
4. デザイン目的で乱用しない
- 太字や文字サイズ調整のためにHタグを使うのはNG
- デザイン調整はCSSで行い、Hタグはあくまで構造化のために利用する
5. アクセシビリティも意識
- 読み上げソフト（スクリーンリーダー）はHタグを目次として利用
- 適切にマークアップすることで誰にでも読みやすい記事になる
よくある質問（FAQ）
Q. H1タグは複数あっても問題ない？
A. HTML5では複数のH1が許可されていますが、SEO的には1ページ1つにまとめるのが望ましいです。
Q. H2とH3の順序が逆になっても大丈夫？
A. 推奨されません。見出しは論理的に階層を作ることが重要です。H2の下にはH3を置くようにしてください。
Q. 見出しにキーワードを入れないとSEO効果はない？
A. キーワードは必須ではありませんが、入れた方が検索エンジンにページ内容を伝えやすくなります。自然な範囲で入れるのがおすすめです。
Q. 見出しタグを装飾目的で使ってもいい？
A. NGです。SEOにもユーザビリティにも悪影響が出る可能性があります。見出しは構造化、装飾はCSSで分けて考えましょう。
Q. H6まで必ず使うべき？
A. いいえ。H6まで使う必要はなく、H2〜H3程度で十分整理できます。階層が深すぎると逆に読みにくくなります。