や

でレンダリングし、Gutenbergが見出しブロックのオプションからH1を隠している場合、ページ上にH1タグが一つも存在しないことになります。

これはまさにGutenbergリポジトリの長期にわたるGitHubイシューで指摘されている状況です。ユーザーは、H1がテンプレートレベルで制御されるエンタープライズやエージェンシーのセットアップ向けに、H1オプションを完全に削除する機能を求めています。このイシューは真の混乱を浮き彫りにしています。エディターのデフォルトの挙動とテーマのテンプレートは明示的に調整される必要がありますが、WordPressにはこれに対する自動チェック機能が提供されていません。

問題B： コンテンツ編集者は、見出しレベルを変更することでブロックエディター内でH1を選択できてしまいます。もしテーマがすでに投稿タイトルをH1として出力している場合、編集者がコンテンツエリア内に別のH1ブロックを追加すると重複が発生しますが、警告は表示されません。

ソース3：ページビルダー（Elementor、Divi、Beaver Builder）

ページビルダーは、WordPressにおける見出し階層の混乱の最大の原因です。

その理由は、ページビルダーが詳細な視覚的制御を可能にするからです。テキスト要素をどこにでもドラッグし、好きなようにスタイルを設定し、任意のレベルの見出しを割り当てることができます。これはデザインには強力ですが、構造には壊滅的です。

典型的なページビルダーの見出し問題は以下のようになります：

• ヒーローセクション：H1（正しい）✓
• 機能セクションのタイトル：H3（H2をスキップ、「見た目が良い」という理由で選択）✗
• ウィジェットエリアのタイトル：H2（セクション見出しのように見えるが、単なるサイドバーウィジェットのタイトル）✗
• お客様の声の見出し：H4（上にH3がない）✗
• CTA見出し：H2（より高いレベルに戻り、アウトラインが完全に非線形になっている）✗

その結果、視覚的には一貫しているが、意味論的には無意味な見出し構造になります。これを解析するスクリーンリーダーやクローラーは、壊れた目次のように飛び回るコンテンツアウトラインを受け取ることになります。

InspectWPのドキュメントでは、このパターンが明示的に特定されています。著者やページビルダーのユーザーは、論理的な意味ではなく、 見た目 に基づいて見出しレベルを選択します。H3が適切な視覚的サイズであれば、上にH2がなくてもH3を選択してしまうのです。

ソース4：ウィジェットとテーマコンポーネント

WordPressのウィジェットエリア（サイドバー、フッター、ヘッダーモジュール）は、独自のヘッダーを出力することがよくあります。「最近の投稿」ウィジェットがH2としてレンダリングされるかもしれません。テーマに組み込まれたプロモーションバナーがH3を使用するかもしれません。これらはどれもコンテンツアウトラインの一部ではありませんが、ページの見出し構造に現れてしまいます。

これにより、見出しの「ノイズ」が発生し、アウトラインの見かけの複雑さが強調され、コンテンツの見出しが正しい階層位置から押し出される可能性があります。

---

WordPress H1 と見出し階層に関する最も一般的な 5 つの問題

問題 1: サイトのタイトルがすべてのページで H1 で囲まれている

それは次のようになります: サイトのすべてのページには、サイト名と投稿タイトルという 2 つの H1 があります。

影響を受ける人: 古いテーマ、不十分に構築されたプレミアム テーマ、または開発者がサイトのブランディングに を使用したテーマを使用しているサイト。

それを検出する方法: 任意のページを右クリック→「検査」→「要素」パネルで＜h1を検索します。 セクションでサイト名が H1 で囲まれている場合は、この問題が発生しています。

修正方法：

オプション 1: 子テーマの編集 (開発者アプローチ) 子テーマの中で header.php、サイト タイトルの出力を見つけて、適切なクラスを使用してそれを から または に変更します。

php

＜p class="site-title"＞
  ＜a href="＜?php echo esc_url(home_url('/')); ?＞" rel="home"＞
    ＜?php bloginfo('name'); ?＞
  ＜/a＞
＜/p＞

オプション 2: CSS + aria-label (コードなしの回避策) テーマ ファイルを編集できない場合は、CSS を使用してサイト タイトルの H1 スタイルをリセットします。

css

.site-header h1.site-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

注: これにより、 ビジュアル H1 の問題はありますが、構造的な問題は解決されていません。 H1 タグはマークアップ内に残ります。

オプション 3: 適切に構造化されたテーマに切り替える WordPress コーディング標準 (Twenty Twenty-F​​our、Kadence、GeneratePress、Astra) に準拠したテーマは、そのままの状態でこれを正しく処理します。現在のテーマにこの問題があり、あなたが開発者ではない場合は、多くの場合、切り替えが最も信頼できる解決策です。

---

問題 2: ホームページに H1 がありません

それは次のようになります: あなたのホームページには H1 タグがありません。 SEO プラグインは「H1 が見つかりません」と報告します。

影響を受ける人: ブランド化にロゴ画像を使用しているサイト (サイト タイトルを非表示にしている)、タイトルが表示されていない静的なフロント ページを使用しているサイト、またはテーマのホームページ テンプレートが呼び出さないサイト the_title().

これは、WordPress サポート フォーラムで繰り返し発生する実際の問題です。通常、原因は次のシーケンスです。サイト タイトルがヘッダーに表示されるように設定されているが、ユーザーがそれを非表示にし (またはロゴに置き換えて)、ページから H1 のみを削除します。多くの場合、ホームページにはブログ投稿のような「投稿タイトル」がないため、H1 は自動的に生成されません。

修正方法：

ホームページの場合、具体的には次のようになります。 H1 をヒーロー セクションまたはページ テンプレートに追加します。これは次のとおりです。

• H1 としても機能する表示可能な見出し (「貴社のビジネス名 | サービス カテゴリ」)
• CSS 経由で追加された、視覚的に隠された H1 (position: absolute; clip: rect(0 0 0 0);) 視覚的なデザインを損なうことなくセマンティック マーカーを提供します

グーテンベルクでは: ホームページ コンテンツの上部に見出しブロックを追加し、H1 に設定して、ヒーロー メッセージの一部にします。

---

問題 3: コンテンツ内の見出しレベルがスキップされる

それは次のようになります: コンテンツ構造は、H2 から H4 に直接ジャンプするか、H1 から H3 に直接ジャンプします。

影響を受ける人: 意味構造ではなく視覚的なスタイルを目的として見出しを使用する、長い形式のコンテンツを作成する人。

なぜそれが重要なのか: InspectWP が指摘しているように、見出しレベルのスキップは、作成者が外観に基づいてレベルを選択した場合に発生します。H3 が適切に見えるため、H2 がその前にあるかどうかに関係なく、H3 が使用されます。

Gutenberg でそれを検出する方法: ブロック エディタの上部ツールバーにある情報アイコン (ⓘ) をクリックします。 [ドキュメント アウトライン] パネルには、すべての見出しが順番に表示され、スキップされたレベルには警告が表示されます。

修正方法：

1. 公開前にドキュメント アウトラインを使用して見出し構造を監査する
2. チームのコンテンツ スタイル ガイドを設定します。主要セクションには H2、サブセクションには H3、サブサブセクションには H4 を使用します。レベルをスキップしないでください。
3. Yoast SEO または Rank Math のコンテンツ分析を使用する - どちらも見出し構造の問題を示します

---

問題 4: ページ ビルダーからの複数の H1 タグ

それは次のようになります: Elementor または Divi で作成されたページには 3 つまたは 4 つの H1 タグがあります。これは、各主要セクションに独自のヒーロー スタイルの「H1」見出しがあるためです。

修正方法：

Elementor で: 各見出しウィジェットを編集 → HTML タグ設定を確認 → プライマリ ページ タイトルのみを H1 に設定し、その他すべてを必要に応じて H2 または H3 に変更します。

Divi の場合: 見出しモジュールを編集 → [詳細設定] → [HTML タグ] → 正しいセマンティック レベルに変更します。

Beaver Builder の場合: 各見出しモジュールには、[スタイル] タブに「見出しタグ」設定があります。それぞれを監査します。

---

問題 5: Gutenberg H1 の可視性の問題

それは次のようになります: テーマでは投稿タイトルが H1 として出力されず、Gutenberg は見出しブロックの H1 オプションを非表示にしました。ページには H1 がありません。

修正方法：

H1 をコンテンツ領域内に配置する必要があるサイトを管理している開発者は、テーマのフィルターを使用して H1 オプションを復元できます。 functions.php:

php

// Allow H1 in the Heading block
add_filter( 'allowed_block_types_all', function( $allowed_blocks ) {
    return $allowed_blocks;
});

あるいは、見出しブロックの「HTML として編集」ビューに切り替えて、マークアップに を手動で設定します。

代理店の設定を希望する場合 防ぐ 編集者が H1 を追加できないようにするには (テンプレートによって制御されるため)、 block_editor_settings_all エディターの見出しレベルを制限するフィルター。

---

WordPress の見出し構造を監査する方法 (ステップバイステップ)

方法 1: SkySEOManager 無料プラグイン

使用 SkySEOManager プラグイン SEO Analyzer を組み込み、Headline 関連の問題をすべて見つけます。

完全なガイドを読んでください: すべての SEO 問題に対して SkySEOManager を使用して Wordpress サイトを監査する方法

方法 2: Siteskyline の無料 SEO Analzyer を使用する

訪問 無料のSEOアナライザー URL を入力して、今すぐ「anazye」をクリックしてください。

見出しタグに関するすべての問題が表示されます。

---

WordPress H1 階層: 代理店チェックリスト

クライアント向けに WordPress サイトを構築または保守している場合、見出しの構造は、立ち上げ前および進行中の監査プロセスの一部である必要があります。繰り返し可能なチェックリストは次のとおりです。

テーマレベル:

• ヘッダーのサイト タイトルは で囲まれていません (、、または を使用してください)
• すべての投稿タイプで、投稿/ページのタイトルが または で としてレンダリングされます。
• ホームページには、サイト タイトルまたはヒーロー セクションのいずれかに、 が 1 つだけあります。
• アーカイブ ページ (カテゴリ、タグ、作成者) には説明的な が付いています。
• 404 ページには があります。

コンテンツレベル:

• 各ページのコンテンツ領域には、 が 1 つだけあります (テーマがタイトルによって処理する場合は 0 つです)。
• 主要なセクションでは を使用します
• サブセクションは、 セクション内でネストされた を使用します。
• 見出しレベルはスキップされません
• 見出しは視覚的なスタイルを設定するためだけに使用されるわけではありません

プラグイン/ビルダーレベル:

• Elementor/Divi/Beaver Builder の見出し要素に正しい HTML タグ設定がある
• ウィジェット領域は偶発的な H1 または H2 タグを出力しません
• SEO プラグイン H1 警告がすべての主要ページで解決されました

---

正しい WordPress 見出し階層 — ページタイプ別

1 つのパターンがすべての WordPress ページタイプに適合するわけではありません。それぞれの正しい構造は次のとおりです。

ブログ投稿/単一投稿ページ

H1: Post Title (output by theme automatically)
  H2: First major section
    H3: Subsection
    H3: Another subsection
  H2: Second major section
    H3: Subsection
      H4: Detail
  H2: Third major section

ホームページ (静的フロントページ)

H1: Primary value proposition or page headline
  H2: Service category or feature group
    H3: Individual service or feature
  H2: Testimonials or social proof section
  H2: Call to action section

WooCommerce 製品ページ

H1: Product name (output by WooCommerce template)
  H2: Product description heading
  H2: Reviews
  H2: Related products

カテゴリー/アーカイブページ

H1: Category name (e.g., "WordPress SEO Articles")
  H2: Post title within loop (if posts are displayed with headings)

---

WordPress H1 構造を壊すよくある間違い

間違い 1: 見出しタグを使用してテキストのスタイルを設定する セクション見出しではない大きな太字テキストが必要な場合は、H2 を使用しないでください。 CSS クラスを または に追加し、視覚的にスタイルを設定します。美観のために見出しタグを使用すると、構造的なアウトラインが損なわれます。

間違い 2: 編集者に目で見て見出しレベルを選択させる コンテンツ スタイル ガイドがなければ、編集者は自然と、次のような見出しレベルに引き寄せられてしまいます。 見た目 右。 「セクションには H2、サブセクションには H3、コンテンツでは H1 を決して使用しない」という簡単な内部ガイドにより、ほとんどの問題を防ぐことができます。

間違い 3: 見出しの構造を確認せずに WordPress テーマをインストールする すべてのプレミアム WordPress テーマが正しい見出しマークアップを出力するわけではありません。テーマにコミットする前に、デモ投稿を調べてください。投稿タイトルは H1 として表示されますか?サイトのタイトルは内部ページで H1 になることを避けていますか?

間違い 4: SEO プラグインですべてがカバーされると思い込む Yoast と Rank Math は編集中の投稿をチェックします。テーマのヘッダー テンプレート、フッター ウィジェット、またはアーカイブ ページ テンプレートによって引き起こされる見出しの問題は検出されません。手動監査または Screaming Frog クロールは依然として必要です。

間違い 5: HTML 構造ではなく見た目を修正する サイトタイトル H1 の問題の最も一般的な「修正」は、CSS を追加して小さく見えるようにすることです。これにより、問題は視覚的に隠れますが、壊れたマークアップはそのまま残ります。スタイルだけでなく、HTML タグも修正してください。