---
title: "見出しタグ（h1〜h6）のSEO的な正しい使い方と階層構造の作り方"
description: "SEOに効果的な見出しタグの使い方を解説します。h1は1ページに1つ・h2〜h3の階層構造・キーワードの入れ方、よくあるHTMLの構造ミスと確認方法をまとめました。"
date: 2026-05-21
tags: [SEO, HTML, Web制作]
related_tools: [h-tag, serp-preview]
draft: false
---

見出しタグ（`<h1>〜<h6>`）はページの構造をブラウザと検索エンジンに伝える重要な要素です。正しい階層で設定することがSEOの基本であり、Googleはページのコンテンツ構造を理解するために見出しタグを参照します。

## 見出しタグの役割

見出しタグには2つの役割があります。

1. **ユーザー向け**: ページをスキャンして読み取りやすくする（視覚的な見出し）
2. **クローラー向け**: ページのトピック・構造をGooglebotに伝える

テキストを大きくしたいだけなら CSS でサイズを変えれば十分です。見出しタグは「このテキストはこのレベルの見出しである」という**意味的なマークアップ**です。

## h1〜h6の使い分け

| タグ | 役割 | 使用頻度の目安 |
|---|---|---|
| h1 | ページのメインタイトル | 1ページに1つだけ |
| h2 | 主要なセクションの見出し | 複数OK |
| h3 | h2配下のサブセクション | 複数OK |
| h4〜h6 | さらに細かい分類 | 必要な場合のみ |

## h1は1ページに1つ

**h1はページ全体のタイトル**です。1ページに複数の h1 を使うと、Googleがページのメインテーマを判断しにくくなります。WordPressではサイト名と記事タイトルの両方が h1 になっているケースがあるため、テーマのテンプレートを確認してください。

```html
<!-- ❌ 悪い例 -->
<h1>会社名</h1>
<h1>サービス紹介ページ</h1>

<!-- ✅ 良い例 -->
<h1>サービス紹介ページ</h1>
<h2>サービスの特徴</h2>
```

## 階層を飛ばさない

h2 の次に h4 を使うなど、階層を飛ばすのは構造上の問題です。アウトラインが崩れてクローラーが誤解する可能性があります。

```html
<!-- ❌ 悪い例：h2からh4に飛ぶ -->
<h2>サービス内容</h2>
<h4>料金プラン</h4>

<!-- ✅ 良い例：h2→h3の順 -->
<h2>サービス内容</h2>
<h3>料金プラン</h3>
```

## 見出しにキーワードを自然に入れる

Googleはh1・h2の内容をページのテーマ判定に活用します。ただし、キーワードの詰め込みは逆効果です。

**推奨**: ユーザーが読んで自然に理解できるタイトルに、検索クエリに近い表現を1〜2語含める  
**非推奨**: 「SEO SEO対策 SEO改善 SEOツール SEOチェック」のような羅列

h1にはページのメインキーワードを含め、h2にはそのページで説明するサブトピックを自然な言葉で書きます。

## よくあるミスと確認方法

### CSSで装飾してh1を隠している

`display: none` や `visibility: hidden` で h1 を非表示にする実装は、スパムと判定される可能性があります。視覚的に見えない h1 は使わないでください。

### 画像だけのh1

見出し内にテキストなしで画像だけ入っているケースがあります。`alt` 属性があれば最低限機能しますが、テキストが入っているほうが確実です。

### Sectionタグと見出しの組み合わせ

HTML5 のアウトラインアルゴリズムでは `<section>` 内の `<h2>` が文書構造上の h2 として扱われますが、Googleはタグの数値（h1〜h6）自体を基準にする傾向があります。`<section>` を使っていても、見出しタグの数値の順序を正しく保つことを優先してください。

## 見出し構造の確認方法

[見出しタグ抽出ツール](/h-tag/)では、URLを入力するだけでH1〜H6の階層構造を一覧表示できます。階層の飛び・h1の複数使用・見出しの欠如を即確認できます。競合ページの見出し構造を調べる用途にも使えます。