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

タグ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.phpsingle.phpthe_title()<h1>で囲まれているか?
  • サイドバーウィジェットが<h1>になっていないか?
  • パンくずリストが<h1><h2>で出力されていないか?

SEOを意識するなら、構造上のh1が「本文のタイトル」だけになっていることを確認しましょう。


7. 見出し構造のチェックツール紹介

見出しの構造が正しいか確認するために、以下のツールが便利です。

🔧 Chrome拡張

  • Web Developer
    →「情報」→「文書のアウトライン」で確認
  • HeadingsMap
    → 見出しタグの構造をツリー形式で表示

8. 見出しタグと構造化データの関係

見出しタグはGoogleの構造化データ(Schema.org)とは直接関係しませんが、構造的な文章の整理がクローラーに有利に働くため、間接的に評価されます。

特に記事ページで Article タイプの構造化データを記述する場合、headlinedescriptionの内容と<h1><h2>が一致していると信頼性が高まります。


9. まとめ|見出しタグは「文章の骨組み」

見出しタグは、SEOや検索順位を左右する「直接的な武器」ではないかもしれません。
しかし、それは建物における柱や梁(はり)のような存在。

Googleや読者が迷わない構造を作ることが、最終的には評価や信頼につながります。

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

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。