WordPressで記事を書いていると、気づかないうちにh2の次にh4を使ったり、h1が複数存在したりと、見出しの階層が崩れることがあります。崩れた構造はクローラーの読み取りを妨げ、スクリーンリーダーの利用者にも影響します。本記事では、無料のブラウザ拡張「HeadingsMap」を使ってhタグ構造を可視化し、修正する手順をまとめます。インストールは無料で、アカウント登録も不要です。
hタグの構造が崩れると何が問題なのか
見出しタグ（h1〜h6）は、文書のアウトラインを定義する要素です。検索エンジンのクローラーはこの階層を手がかりにページのトピック構造を把握すると説明されています。また、スクリーンリーダーを使うユーザーは、見出しをナビゲーションの手がかりにしています。
- SEOへの影響：h1が複数あると、ページのメインテーマが読み取りにくくなります。h2〜h4の抜けは、関連トピックの構造を分かりにくくします。
- 読みやすさへの影響：階層が飛んだ見出しは目次プラグインの出力を崩し、読者が記事構造を把握しにくくなります。
- アクセシビリティへの影響：WAI-ARIAなどのガイドラインでは、見出し階層を論理的な順序で並べることが推奨されています。
ブログの始め方を調べている段階であれば、最初から正しい見出し設計を意識しておくと、後の修正の手間を抑えやすくなります。
WordPressで見出し構造が崩れやすいパターン
WordPressの投稿でよく見られる崩れのパターンを整理します。
| 崩れのパターン | 典型的な原因 |
|---|---|
| h1が2つ以上ある | テーマが出力する投稿タイトルのh1と、本文に追加したh1が重複している |
| h2の次にh4が来る | デザイン目的でh3を飛ばし、フォントサイズだけを調整した |
| h3が本文の途中に突然現れる | コピペ元の書式をそのまま貼り付けた |
| 目次プラグインの出力が乱れる | h2とh3が混在し、階層が読み取れない |
HeadingsMapとは何か
HeadingsMapは、Chrome・Firefox・Edgeに対応した無料のブラウザ拡張機能です。開発者はJorge Rumoroso氏です。表示中のページのh1〜h6をツリー状に一覧表示し、階層の抜けや重複を視覚的に示してくれます。アクセシビリティ監査やSEOチェックの補助ツールとして広く使われています。最新の評価や対応状況は、各ブラウザの公式ストアで確認してください。
HeadingsMapのインストール手順
- Chromeを開き、Chrome Web Storeで「HeadingsMap」と検索します。
- 「Chromeに追加」をクリックし、拡張機能をインストールします。
- ツールバーにHeadingsMapのアイコンが表示されれば完了です。
Firefoxの場合はFirefox Add-onsで、Edgeの場合はEdge Add-onsまたはChrome Web Storeから同名の拡張を検索してインストールできます。表示や入手方法はブラウザのバージョンによって異なる場合があるため、詳細は各公式ストアで確認してください。
WordPressの記事でhタグ構造をチェックする手順
- チェックしたいWordPress記事をブラウザで開きます（プレビューでも公開ページでも構いません）。
- ツールバーのHeadingsMapアイコンをクリックします。
- サイドパネルにh1〜h6のツリーが表示されます。
- 階層が飛んでいる箇所は、警告の表示で示されます（表示方法はバージョンによって異なるため公式ページで確認してください）。
- 見出しをクリックすると、ページ上の該当箇所へスクロールします。
チェックと同時にWordPressの投稿編集画面も開いておくと、HeadingsMapで問題箇所を特定し、そのままブロックエディタで修正しやすくなります。
チェック結果の読み方と修正の考え方
h1は1ページに1つだけにする
多くのWordPressテーマは、投稿タイトルをh1として自動出力します。そのため本文エディタでh1を追加すると重複します。本文ではh2から始めるのが原則です。
階層は1段ずつ下げる
h2の下にはh3、h3の下にはh4という順序を守ります。h2の直下にh4を置くのは構造の飛びにあたり、修正が必要です。デザイン上のフォントサイズを調整したい場合はCSSで対応し、hタグの番号は論理的な階層に合わせます。
ブロックエディタでの修正方法
ブロックエディタ（Gutenberg）では、見出しブロックを選択するとツールバーに見出しレベル（H2・H3・H4など）を切り替えるボタンが表示されます。レベルを変更するだけで修正できます。クラシックエディタの場合は、段落のプルダウンから見出しレベルを選びます。
WordPressの初期設定を済ませている段階であれば、テーマがh1をどこで出力しているかをあらかじめ確認しておくと、チェック作業がスムーズになります。
目次プラグインと組み合わせると崩れに気づきやすい
Table of Contents PlusやRich Table of Contentsなどの目次プラグインを導入している場合、hタグ構造が崩れると目次の階層も乱れます。HeadingsMapで可視化したツリーと目次の出力を並べて見ると、どの見出しが問題を起こしているかを見つけやすくなります。目次プラグインの選択肢についてはWordPressおすすめプラグインの記事で比較しています。
より快適に運用するなら：編集環境も整える
hタグ構造を正しく保つには、記事をストレスなく編集・プレビューできる環境があると作業が進めやすくなります。表示速度が遅いサーバーでは、編集のたびにプレビュー確認に時間がかかり、修正の手が止まりやすくなります。
国内サーバーを検討している場合、ConoHa WINGは表示速度と管理画面の操作性を理由に選ばれることがあります。料金やスペックは変更されることがあるため、詳細は公式で確認してください。
ConoHa WING公式サイトで料金・スペックを確認する
まとめ：無料ツールで構造の乱れを把握できる
- HeadingsMapはインストール無料・アカウント不要で、hタグ構造をツリー表示できます。
- h1の重複、h2→h4の飛び、コピペ由来の乱れが主な崩れのパターンです。
- 修正はブロックエディタの見出しレベル変更で対応できます。
- 料金や仕様、拡張の最新情報は公式ページで確認してください。
見出し構造の確認を記事公開前のチェック項目に加えておくと、後から繰り返し修正する手間を抑えやすくなります。
【PR】 本記事はアフィリエイトプログラムを通じた広告リンクを含みます。