Webデザインの勉強を始めたばかりの頃、「見出しタグってどう使えばいいの？」と迷ったことはありませんか？
私は最初の頃、h1やh2をなんとなくつけていたのですが、実は、見出しタグはSEOに直結する大切な要素。
Googleも見出しを手がかりにして記事の内容を理解しているんです。もし正しく使えていないと、せっかくの文章も検索エンジンに伝わらず、読者にも読みづらい記事になってしまいます。この記事では、初心者がつまずきやすい「h1・h2・h3」の基本から実践的な使い方、さらによくある失敗例まで、具体的に解説していきます。これを読めば「見出し迷子」から卒業できるはずです！
見出しタグとは？SEOにおける役割
見出しタグの基本構造
見出しタグ（h1〜h6）は、HTMLの中で文章の階層を表すタグです。数字が小さいほど上位の階層を示し、数字が大きいほど下位の階層を表します。
<h1>：記事やページのタイトル（最上位）<h2>：大見出し（章の見出し）<h3>：中見出し（節の見出し）<h4>以下：さらに細かいサブ見出し
例えば、参考書にたとえると：
- h1 → 本のタイトル
- h2 → 各章のタイトル
- h3 → 章の中の節タイトル
- h4以降 → 補足説明
この構造を守ることで、読者も検索エンジンも「この記事が何を伝えたいか」を理解しやすくなるのです。
SEOで見出しが重要な理由
Googleはページをクロール（読み取り）するとき、見出しを手がかりにして「この記事がどんなテーマなのか」を判断します。特にh1〜h3の内容はSEOに強く影響します。
- 読者視点：文章が整理されていて読みやすい
- SEO視点：検索エンジンがコンテンツを正しく分類できる
例えば「h1: 見出しタグの使い方」「h2: h1タグの正しい使い方」とあれば、Googleは「この記事は見出しタグの使い方を解説していて、その中でh1の解説をしている」と理解できます。
h1タグの正しい使い方
h1はページに1つだけ
h1はページの“主題”を示すための見出しです。必ず1ページに1つだけにしましょう。
なぜなら、h1が複数あると「どれが主題なの？」と検索エンジンが迷ってしまうからです。
- ✅ 正しい例：「SEO見出しタグの使い方」
- ❌ 悪い例：「記事タイトル」「ロゴ」「サイドバー見出し」全部にh1
このように乱用するとSEO評価が分散してしまいます。
h1に入れるべきキーワード
h1には検索されたいキーワードを自然に含めましょう。
例えば「SEO 見出しタグ」で上位を狙うなら、h1に「SEOで重要な見出しタグの使い方」と入れる。
ただし、「SEO 見出し h1 h2 h3 使い方 無料 初心者」と詰め込みすぎるのは逆効果です。検索エンジンは“キーワードの自然さ”も見ています。
h2タグの正しい使い方
記事の大見出しとして使う
h2は「記事の章立て」を作るためのタグです。記事を分ける大きな区切りとして利用します。
例えば本記事なら：
- h2: 見出しタグとは？
- h2: h1の正しい使い方
- h2: h2の正しい使い方
といった形です。
読者はまずh2を流し読みして、欲しい情報があるかを判断します。そのため、h2はキャッチコピーではなく要約に寄せるのが正解です。
関連キーワードを自然に入れる
SEOを意識するなら、h2に関連キーワードを含めましょう。
例えばこの記事なら「SEO」「見出しタグ」「h1」「h2」など。
👉 ただし「SEO h2 SEO 見出し SEO タグ」みたいに無理に詰め込むのは逆効果。
h3タグの正しい使い方
h2の補足や細分化で活用
h3は「h2の内容をさらに深掘りする」ための見出しです。
例えば、h2が「h2の正しい使い方」なら、h3で「記事の大見出しとして使う」「関連キーワードを自然に入れる」と分けるのが自然です。
箇条書きや具体例に強い
h3の下には具体例や手順を入れると効果的です。
- 手順を説明する
- メリット・デメリットを比較する
- よくある質問をまとめる
こうすることで、文章が整理されてグッと読みやすくなります。
コードで見る見出し構造の実例
良い例（正しい階層構造）
<main>
<h1>SEOで重要な見出しタグの使い方</h1>
<section>
<h2>h1タグの正しい使い方</h2>
<h3>h1は1ページに1つだけ</h3>
<p>ページの主題を示す見出しです。</p>
</section>
<section>
<h2>h2タグの正しい使い方</h2>
<h3>記事の大見出しとして使う</h3>
<p>章ごとの区切りを示します。</p>
</section>
</main>
悪い例（よくあるNGパターン）
<h1 class="logo">サイト名</h1>
<h1>記事タイトル</h1>
<h1>見出しタグの使い方</h1>
<!-- h1が3つも…！ -->
<h2 style="font-size: 30px;">大きく見せたいからh2</h2>
<!-- 見出しを装飾目的で使うのはNG -->h1が3つも入ってしまっています。。。また、フォントのサイズを大きくしたいからといって、h2で指定するのも間違いです。
初心者がやりがちな見出しのミス
①h1を複数使ってしまう
ロゴや記事タイトルなどでh1を乱用するケース。SEO評価が分散するので要注意です。
②見出しに装飾目的で使う
「文字を大きくしたいからh2にする」は絶対NG。見出しは構造、見た目はCSSでコントロールしましょう。
私は最初、見た目が整えばいいと思っていたので、これよくやってしまっていました。
hタグはあくまで構造の指示なので、デザインは必ずcssで設定する必要があります。
③見出しに中身がない（内容を語っていない）
SEO効果を高める見出し作成のコツ
読者と検索エンジンの両方を意識
- 読者：意味が直感的にわかる
- 検索エンジン：適切なキーワードが含まれている
検索意図に沿ったキーワード配置
「h1 h2 h3 使い方」と検索する人は、正しい階層の作り方を知りたいはず。そのニーズに沿った見出しを設計することが重要です。
見出しだけ読んで要点がわかる構成
記事をスクロールするだけで大筋が理解できるように見出しをつけると、読者満足度が上がります。
チェックリスト：公開前に確認したい7項目
- h1は1つだけになっているか？
- h1にメインキーワードが自然に入っているか？
- h2が章立てとして整理されているか？
- h3が補足説明として正しく使われているか？
- 見出しを装飾目的で使っていないか？
- 見出しだけ読んで内容が理解できるか？
- 目次プラグインやTOCが正しく動作しているか？
9. まとめ
見出しタグ（h1・h2・h3）は、記事の読みやすさとSEO効果を両立させるために欠かせない要素です。
- h1は1ページに1つ。主キーワードを自然に入れる
- h2は章立て。検索意図に合わせて整理する
- h3は補足や具体例を展開する
- 見出しは装飾ではなく構造のためのタグ
- 公開前にチェックリストで最終確認する
👉 まずは今の自分の記事を見直し、「h1が複数になっていないか」「見出しが中身を語っているか」を確認しましょう。それだけでSEOもユーザー体験も大きく改善できます。
コメント