Webサイト制作において、HTMLの「見出しタグ（h1〜h6）」は単なる装飾ではなく、情報構造を正しく伝えるための大切な要素です。特にSEO（検索エンジン最適化）を意識する上で、見出しタグの正しい使い方は検索順位に少なからず影響を与えます。
本記事では、Webデザイナーやコーダーの方に向けて、見出しタグの基本からSEOとの関連性まで、実践的に解説します。
hタグとは？HTMLにおける情報の「階層」を示す重要な要素
HTMLの<h1>〜<h6>タグは、それぞれ文章の見出しとして使われ、数字が小さいほど重要度が高いことを意味します。
| タグ | 役割 |
|---|---|
| h1 | ページ全体のタイトル |
| h2 | セクションの見出し |
| h3 | h2のサブセクション |
| h4〜h6 | さらに細かい階層の見出し |
例えば、以下のような構成が理想です。
See the Pen
Untitled by Masahiro Kuroiwa (@Monochrome17)
on CodePen.
このように見出しタグを適切に使うことで、検索エンジンにとっても、ユーザーにとっても読みやすいページ構造が実現します。
h1タグは1ページに1つが基本
なぜh1は1つが望ましいのか？
<h1>はそのページの「主題」を表すための見出しです。そのため、原則として1ページに1つだけ使用するのが推奨されています。
複数のh1が存在すると、検索エンジンが「このページは何について書かれているのか」を判断しづらくなる可能性があります。特にGoogleは構造化されたページを好むため、h1の乱用はSEO上マイナスになりかねません。
ただし例外もある
最近のHTML5では、セクショニングコンテンツ（<article>や<section>など）の中では複数の<h1>が許容されています。しかし、CMSやSEOツールの仕様によっては評価が分かれることもあるため、汎用性を考えると「1ページ1つ」が無難です。
h2〜h6は内容に応じて階層的に使う
見出しは「順番」よりも「階層」を意識することが大切です。
たとえば、次のような使い方は避けましょう。
See the Pen
Untitled by Masahiro Kuroiwa (@Monochrome17)
on CodePen.
この場合、本来h2を使うべきところでh3を使っており、構造が不自然です。検索エンジンは文脈からある程度補完しますが、読み取りにくくなるためSEOにはマイナスです。
見出しタグとSEOの関係
見出しタグは、SEOの「ランキング要因」として直接的な影響は小さいとGoogleは公言しています（参考：Google検索セントラル）。
しかし、間接的な効果は大きく、以下の理由があります。
1. キーワードの明示
見出しにキーワードを含めることで、検索エンジンにそのページの主題を伝えやすくなります。特にh1とh2に自然な形でターゲットキーワードを盛り込むのが有効です。
例：
See the Pen
Untitled by Masahiro Kuroiwa (@Monochrome17)
on CodePen.
2. ユーザー体験の向上
正しい見出し構造は、ページ全体の読みやすさ・理解しやすさに繋がり、滞在時間やスクロール率が改善されることがあります。これはGoogleの評価基準「E-E-A-T（経験・専門性・権威性・信頼性）」にも間接的に貢献します。
3. アクセシビリティの向上
見出し構造が整っていると、スクリーンリーダーや音声ブラウザが情報を正しく読み上げることができ、障害を持つユーザーにも配慮されたサイトになります。これはSEOだけでなく、ユーザーの多様性に対応する設計としても重要です。
よくある誤解と間違い
hタグをスタイル目的で使う
「文字を大きくするためにh1を使う」といった使い方は、HTMLとCSSの役割を混同しています。見出しは「意味づけ」、スタイルは「見た目」。スタイルの調整はCSSで行いましょう。
See the Pen
Untitled by Masahiro Kuroiwa (@Monochrome17)
on CodePen.
SEOに強い見出しタグの実践テクニック
-
各見出しに自然な形でキーワードを含める
-
1ページに1つのh1を守る
-
h2〜h6で論理的な階層構造を意識する
-
過度な見出しの連発は避ける（スクロール疲れの原因）
-
見出しを「読ませる」言葉にする（例：「〜とは？」より「〜を解決する5つの方法」）
まとめ：正しい見出し構造は、ユーザーと検索エンジンの両方にやさしい
Webデザイナーにとって、見出しタグは「HTMLの基本」のようでいて、実はSEOやUXの根幹を支える重要な要素です。
構造化された見出しを意識することで、Googleにも、ユーザーにも伝わるページが作れます。装飾ではなく「意味」を伝えるタグとして、今一度その使い方を見直してみましょう。
この記事を書いた人：
フリーランスWebデザイナー | SEOとUI/UX設計を得意とし、企業サイトやブログ制作を中心に活動中。
ご相談・制作依頼はこちらからどうぞ。