Webサイトを作るとき、HTMLの見出しタグ（h1〜h6）は「文字を大きくするための装飾」ではありません。ページの情報がどういう階層になっているかを、検索エンジンとスクリーンリーダー、そして読んでいる人に伝えるための要素です。

この記事では、見出しタグの基本的なルール、SEOとの本当の関係（Googleが公式に言っていること）、2022年以降に変わったHTMLの仕様、そしてWordPressの記事を書くときにどう使えばいいかまでをまとめます。コード例はそのままコピーして使えます。

CONTENTS目次
  1. 見出しタグとは：情報の「階層」を示す要素
  2. h1タグは1ページに1つが基本
  3. h2〜h6は内容に応じて階層的に使う
  4. 見出しタグとSEOの本当の関係
  5. よくある誤解と間違い
  6. WordPressで記事を書くときの見出しの使い方
  7. SEOとアクセシビリティに強い見出しの実践チェックリスト
  8. まとめ：正しい見出し構造は、読者と検索エンジンの両方にやさしい

見出しタグとは：情報の「階層」を示す要素

HTMLの <h1> から <h6> は、文章の見出しを表すタグです。数字が小さいほど上位の見出しで、h1がページ全体の主題、h2がその中の大きな区切り、h3がh2の中の小さな区切り、という関係になります。

タグ 役割 目安
h1 ページ全体のタイトル 1ページに1つ
h2 大きなセクションの見出し 記事の「章」にあたる
h3 h2の中の小見出し 記事の「節」にあたる
h4〜h6 さらに細かい階層 使う場面は少ない。h4まででほぼ足りる

理想的な構成は、本の目次と同じ形です。

<h1>40歳からのWebデザイン入門</h1>

<h2>HTMLの基礎</h2>
  <h3>タグとは何か</h3>
  <h3>見出しタグの使い方</h3>

<h2>CSSの基礎</h2>
  <h3>セレクタの書き方</h3>
  <h3>レイアウトの考え方</h3>

<h2>まとめ</h2>

この形になっていれば、検索エンジンにも、スクリーンリーダーで「見出しだけを順に読み上げる」人にも、ページの構造がそのまま伝わります。

h1タグは1ページに1つが基本

なぜ1つが望ましいのか

<h1> はそのページの「主題」を表す見出しです。本に表紙のタイトルが1つしかないのと同じで、原則として1ページに1つだけ使います。

h1が複数あると、「このページは何について書かれているのか」が分散します。検索順位に直接響くわけではありませんが（後述）、スクリーンリーダーの利用者がページの主題をつかみにくくなり、何より書いている自分がページの主題を整理できていない状態になりがちです。

2022年以降の変化：「sectionの中なら複数のh1でもよい」は古い知識

少し前までは、「HTML5では <section> や <article> の中であれば、複数の <h1> を使ってよい」と説明されることがありました。入れ子の深さに応じてブラウザが自動的に見出しレベルを判断する「アウトラインアルゴリズム」という仕組みが、HTMLの仕様に書かれていたためです。

しかし、この仕組みを実装したブラウザは1つもないまま、2022年7月にHTMLの仕様（WHATWG HTML Living Standard）から削除されました。現在の仕様では、見出しの階層は単純に h1〜h6 の数字で決まります。

さらに2025年には、ChromeやFirefoxが「<section> の中の <h1> を自動的に小さく表示する」ブラウザ標準のスタイルも廃止・非推奨にしました。Chromeの開発者ツールやLighthouseでは、フォントサイズを指定していない <section> 内の <h1> に警告が出ます。見た目はh2のように小さくなるのに、アクセシビリティ上はh1のまま、という食い違いが問題視されたためです。

結論として、2026年の今は迷わず「h1は1ページに1つ、以降はh2・h3で階層をつける」でよいです。

h2〜h6は内容に応じて階層的に使う

見出しで大切なのは「順番」より「階層」です。h2の下に置く小見出しはh3、その下はh4、と1段ずつ下げます。次のような使い方は避けましょう。

<!-- NG：h2を飛ばしてh3を使っている -->
<h1>Webデザインの始め方</h1>
<h3>必要な道具</h3>
<h3>学習の順番</h3>

<!-- NG：見た目を小さくしたいだけでh4を使っている -->
<h2>必要な道具</h2>
<h4>テキストエディタ</h4>

どちらも、見出しの文字の大きさを調整したくてタグを選んでいます。文字の大きさはCSSで変えられるので、タグは「階層」だけで選びます。

<!-- OK：階層どおりに1段ずつ -->
<h1>Webデザインの始め方</h1>
<h2>必要な道具</h2>
  <h3>テキストエディタ</h3>
  <h3>デザインツール</h3>
<h2>学習の順番</h2>

h3からh2に「戻る」のは問題ありません。新しい章が始まるだけです。避けるべきなのは、h1からh3へ、h2からh4へと「飛ばして下がる」ことです。

見出しタグとSEOの本当の関係

Googleが公式に言っていること

「見出しを正しく使えば検索順位が上がる」と言われることがありますが、Googleの公式ドキュメントはもっと控えめです。検索エンジン最適化（SEO）スターターガイドには、見出しの順序はスクリーンリーダーには有益だが、Google検索の観点では順序どおりでなくても問題ない、ページに置くべき見出しの理想的な数もない、という趣旨のことが書かれています。

つまり、見出しタグは「順位を上げるための裏技」ではありません。それでも正しく使うべき理由は、次の3つの間接的な効果があるからです。

1. ページの主題がはっきり伝わる

見出しは、検索エンジンがページの内容を理解するときの手がかりの1つです。h1とh2に、そのページで扱っているテーマを自然な言葉で含めておくと、「何について書かれたページか」が伝わりやすくなります。無理にキーワードを詰め込む必要はなく、読者が見て内容が分かる見出しにすれば十分です。

<!-- 内容が伝わらない -->
<h2>ポイント1</h2>
<h2>ポイント2</h2>

<!-- 内容が伝わる -->
<h2>h1タグは1ページに1つが基本</h2>
<h2>h2〜h6は内容に応じて階層的に使う</h2>

2. 読みやすさが上がり、最後まで読まれる

多くの読者は、まず見出しだけを拾い読みして「自分に必要な記事か」を判断します。見出しが構造どおりに並んでいると、読みたい場所にすぐたどり着けます。読者がページに留まり、目的を果たして帰ることは、結果的に検索エンジンからの評価にもつながります。

3. アクセシビリティが上がる

スクリーンリーダーには「見出しだけをジャンプして読む」機能があります。見出しの階層が正しければ、目の不自由な人も目次をたどるようにページを移動できます。逆に、見た目だけ見出し風にした <p> や <div> は、この機能にはまったく引っかかりません。

よくある誤解と間違い

文字を大きくしたいからhタグを使う

いちばん多い間違いです。見出しは「意味づけ」、見た目は「CSS」の担当です。強調したい一文を大きく見せたいなら、見出しタグではなくクラスを付けて文字サイズを指定します。

<!-- NG：見出しではないのにh3で大きくしている -->
<h3>お申し込みは今月末まで！</h3>

<!-- OK：段落のままCSSで大きくする -->
<p class="notice">お申し込みは今月末まで！</p>

<style>
.notice {
  font-size: 1.25rem;
  font-weight: 700;
}
</style>

ロゴや画像をh1にする

トップページで、サイトロゴの画像を <h1> で囲んでいるサイトをよく見かけます。間違いではありませんが、画像だけのh1は検索エンジンにもスクリーンリーダーにも「読めない」見出しになります。画像をh1にするなら、alt 属性にサイト名を必ず入れてください。

見出しが多すぎる

2〜3行ごとに見出しが入っている記事は、かえって読みにくくなります。見出しは「ここから話題が変わる」という合図です。1つの見出しの下に、少なくとも数段落の本文がある状態を目安にしてください。

WordPressで記事を書くときの見出しの使い方

WordPressのテーマの多くは、記事タイトルを自動的に <h1> として出力します。このブログも同じです。つまり、本文の中で使う見出しはh2から始めます。

  • 記事タイトル：WordPressが自動でh1にする（自分では書かない）
  • 本文の大きな区切り：h2（エディタの「見出し2」）
  • h2の中の小見出し：h3（「見出し3」）
  • 本文中でh1を使わない。「見出し1」はテーマによってはh1を出力してしまう

見出しの構造は、ブラウザの開発者ツールで確認できます。Chromeなら、ページ上で右クリックして「検証」を開き、「アクセシビリティ」タブでツリーを見ると、見出しのレベルが一覧できます。Lighthouseでページを診断すると、見出しの飛ばしや <section> 内のh1に対する警告も確認できます。

SEOとアクセシビリティに強い見出しの実践チェックリスト

  • h1は1ページに1つ。ページの主題を表す言葉にする
  • h2・h3は1段ずつ下げる。飛ばさない
  • 見出しの文字の大きさを変えたいときは、タグを変えずにCSSで調整する
  • 見出しには、読めば内容が分かる言葉を入れる（「ポイント1」ではなく「h1は1ページに1つ」）
  • 見出しの数は、1つの見出しの下に本文が数段落ある程度に抑える
  • 公開前に開発者ツールのアクセシビリティツリーで、見出しだけを順に読んで意味が通るか確認する

まとめ：正しい見出し構造は、読者と検索エンジンの両方にやさしい

見出しタグは「HTMLの基本」のようでいて、記事の読みやすさとアクセシビリティの根幹を支える要素です。SEOの裏技ではありませんが、正しく使うことで、検索エンジンにも、スクリーンリーダーの利用者にも、流し読みする読者にも、ページの構造がそのまま伝わります。

2022年の仕様変更で「sectionの中なら複数のh1」という考え方は過去のものになりました。h1は1つ、あとはh2・h3で1段ずつ。このシンプルなルールを守るだけで十分です。

前回のタイトルとメタディスクリプションの正しい設定とあわせて見直すと、ページの「骨組み」が整います。次回は、Webデザインで使う画像はどこから取得できるかです。見出しを含めた本文全体の幅の決め方は、コンテンツ幅はどう決める？で解説しています。

連載の全体像は第1回「HTML・CSSはどこで習う？」の末尾にある一覧からたどれます。