HTMLでWebページを作るうえで欠かせないのが「見出しタグ（hタグ）」です。
正しく使うことで、ページの構造がわかりやすくなり、SEO（検索エンジン最適化）にも良い影響を与えます。
この記事では、見出しタグの基本的な使い方から、SEOで意識すべきポイントまでを初心者向けに丁寧に解説します。
見出しタグ（hタグ）とは？
HTMLの見出しタグとは、文章のタイトルや項目名を示すタグです。
文章の構造を明確にするために使われ、読みやすさと検索エンジン理解の両方に役立ちます。
<h1>ページ全体のタイトル</h1>
<h2>大きな見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
- h1が最上位の見出し
- 数字が大きくなるほど階層が下がる
というルールで構成されます。
見出しタグの階層構造
HTMLの見出しは「章」「節」「項」のように、文書全体の構造を表します。
以下のように、見出しタグは階層を守って使うのが基本です。
<h1>サイトタイトル</h1>
<h2>第1章：HTMLとは</h2>
<h3>HTMLの基本構造</h3>
<h2>第2章：CSSとは</h2>
<h3>CSSの役割</h3>
このように、見出しがツリー状に整理されている状態が理想的です。
視覚的にも論理的にも分かりやすくなります。
各見出しタグの役割
| タグ | 役割 | 使用頻度 |
|---|---|---|
<h1> |
ページ全体のメインタイトル | 1ページに1回 |
<h2> |
主要なセクションの見出し | 頻出（複数可） |
<h3> |
h2の中の小見出し | 頻出 |
<h4> |
さらに細かい見出し | 必要に応じて |
<h5> |
特殊な小項目など | まれに使用 |
<h6> |
ほぼ使用されない | 使用頻度低い |
h1タグの正しい使い方
h1タグは、ページの主題（テーマ）を表す最も重要な見出しです。
<h1>HTML講座：見出しタグ（h1〜h6）の使い方</h1>
注意点
- h1は1ページに1つだけが基本
- ページ全体の内容を一言で表すタイトルにする
- キーワードを自然に含める（無理な詰め込みはNG）
WordPressでは、通常「投稿タイトル」が自動的にh1になります。
本文中で重複してh1を使う必要はありません。
h2タグの使い方
h2はページ内の「主要な見出し」として使われます。
<h2>HTMLの基礎を理解する</h2>
- 記事を章ごとに区切る
- コンテンツを整理する
- h1の下に並ぶ見出しをまとめる
読者が目次を見たときに、「h2」が章タイトルとして表示されます。
h3タグの使い方
h3は、h2の中をさらに細かく説明するための見出しです。
<h2>HTMLの基礎を理解する</h2>
<h3>HTMLの役割</h3>
<h3>HTMLの構造</h3>
WordPressでは、h2とh3を上手に組み合わせることで「目次が整理された構造」になります。
読者にとっても読みやすく、SEO的にも最適です。
h4〜h6の使い方
より細かい階層を作りたい場合に使います。
しかし、使いすぎると構造が複雑になるため、h4までで十分な場合が多いです。
<h4>注意点</h4>
h5やh6は文書構造よりも装飾目的で使われがちですが、意味としての階層を守ることが大切です。
SEOへの影響
見出しタグは、Googleがページ内容を理解するうえで重要な要素です。
特に、h1・h2・h3の使い方はSEOに直結します。
検索エンジンに伝わること
- ページの主題（h1）
- 主要なトピック（h2）
- 詳細な説明内容（h3）
この階層がしっかり整理されているページほど、検索エンジンが「内容を理解しやすい」と判断します。
SEOに強い見出し構成のコツ
- h1はページのテーマを明確に
- 記事タイトルと一致させるのが自然です。
- h2に関連キーワードを含める
- 検索意図に沿った言葉を含めましょう。
- h3で補足・解説を整理する
- 読者の疑問を掘り下げる構成に。
- 見出しだけを読んでも内容が伝わる構成に
- 目次を見ただけで全体像が理解できると理想的です。
よくある間違いと注意点
| 間違い例 | 問題点 |
|---|---|
| h1を複数使う | ページの主題が分からなくなる |
| h2を飛ばしてh3を使う | 階層構造が崩れる |
| 見た目の大きさ目的で使う | 意味がなくSEO効果も薄い |
| hタグを装飾代わりに使う | CSSでデザインすべき |
見出しは意味で使うものであり、デザイン調整はCSS側で行うのが原則です。
実際の見出し構成例（正しいパターン）
<h1>HTML講座：見出しタグの使い方</h1>
<h2>見出しタグとは？</h2>
<h3>hタグの意味と構造</h3>
<h3>タグの基本ルール</h3>
<h2>SEOへの影響</h2>
<h3>h1タグの重要性</h3>
<h3>h2・h3タグの使い方</h3>
<h2>まとめ</h2>
このように階層が明確だと、読者も検索エンジンも理解しやすくなります。
まとめ
| 項目 | 内容 |
|---|---|
| hタグの目的 | ページ構造を示す |
| h1の使い方 | ページタイトルとして1つだけ |
| h2〜h3 | 内容の章立てに使う |
| h4以降 | 必要に応じて |
| SEOとの関係 | 検索エンジンが内容を理解する手助け |
見出しタグは、読みやすさとSEOの両方を高める要素です。
正しく階層を守るだけで、サイトの評価が安定します。
著者からのひと言
見出しタグを正しく使うと、ページ構造が自然に整理され、読者にも検索エンジンにも伝わりやすくなります。
最初は「階層」や「使い分け」が難しく感じるかもしれませんが、慣れてくると自然に組み立てられるようになります。
次回は「段落タグ（p）と改行タグ（br）の違い」を解説します。
