h1〜h6見出しタグの正しい使い方とSEO対策【完全ガイド】

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の観点から見ても、見出しは以下のような役割を担っています：

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や読者が迷わない構造を作ることが、最終的には評価や信頼につながります。

ぜひ今後は、見た目ではなく意味で見出しタグを選ぶように意識してみてください。