WordPress H1 タグ: 見出し階層の問題を修正

完璧な WordPress ページを作成するのに何時間も費やしました。内容はしっかりしています。キーワードが配置されています。 SEO プラグインには緑色のチェックマークが表示されます。

しかし、ブラウザの開発者ツールを開いて見出し構造を調べてみると、オーガニックトラフィックを静かに破壊する可能性があるもの、つまり見出し階層が壊れていることがわかります。 H1が2台。サイトタイトルを「＜h1＞」で囲みます。 H2 から H4 に直接ジャンプするセクション。さらに悪いことに、H1 がまったくありません。

これはそうではありません初心者の間違い. It’s a structural problem baked into how WordPress, themes, page builders, and the Gutenberg editor interact — and most site owners never know it’s happening.

このガイドはそれを修正するために存在します。あなたが独自のコンテンツを管理する WordPress サイト所有者であっても、数十のクライアント向けにサイトを構築する代理店であっても、どのようにすればよいかを正確に知ってここを離れることになります。監査、診断、そして永久的な解決 WordPressの見出し順序の問題。

H1 タグとは何ですか? WordPress で H1 タグが重要なのはなぜですか?

H1 タグ () は、HTML の最上位の見出し要素です。セマンティック HTML では、ブラウザ、検索エンジン、支援技術に次の信号を送ります。 「これがこのページの主要なトピックです。」

見出しタグをドキュメントのアウトラインとして考えてください。

H1 – Main page title (only one per page)
 ├── H2 – First major section
 │    ├── H3 – Subsection
 │    └── H3 – Another subsection
 ├── H2 – Second major section
 │    ├── H3 – Subsection
 │    │    └── H4 – Detail within subsection
 └── H2 – Third major section

レベルを 1 つスキップすると (H2 から H4 にジャンプします)、アウトラインが壊れます。 H1 を 2 つ使用すると、構造的に曖昧さが生じます。視覚的なスタイル設定に H3 タグを使用すると、クローラーを混乱させるゴースト見出しが発生します。

特に WordPress では、これは急速に複雑になります。すべてのタグを手動で記述する静的 HTML ページとは異なり、WordPress はテーマのヘッダーテンプレート、投稿タイトル、エディターのコンテンツ、追加したウィジェットまたはページビルダーモジュールという少なくとも 4 つの異なるソースから見出しマークアップを同時に生成します。

Google が H1 タグについて実際に述べていること

解決しましょうランキング討論早い。

2024 年 7 月、Google の Gary Illyes 氏が SEO オフィスアワーポッドキャストでこの点について直接言及しました。見出しを意味順に並べることは、アクセシビリティ (特にスクリーンリーダーユーザー) にとって非常に役立ちますが、Google のランキングアルゴリズムには大きな影響を与えません。 John Mueller 氏はまた、ページ上の複数の H1 タグはクローラーを混乱させず、SEO への直接的な影響はゼロであると述べています。

それで、これは何か重要ですか？

はい、しかし、ほとんどの SEO ガイドが言うような理由ではありません。

WordPress で見出しの構造に注意する本当の理由は次のとおりです。

アクセシビリティのコンプライアンス — WCAG 2.1 達成基準 1.3.1 では、情報と関係がプログラムで決定可能であることが求められています。見出し階層が壊れていると、これが失敗します。
クロール可能性とコンテンツシグナル — Google は乱雑なマークアップを解析できますが、クリーンな H1 はページのトピックに関する可能な限り明確な信号を提供します。これは曖昧な場合に重要です。
ユーザーエクスペリエンスと滞在時間 — 読者は見出しに目を通します。論理的な階層は、ユーザーがナビゲートし、より長く滞在するのに役立ちます。これは両方とも間接的なランキングシグナルです。
技術監査のクリーンさ — 代理店の場合、見出しの問題はあらゆる監査ツール (Screaming Frog、Ahrefs、SEMrush、Rank Math、Yoast) で表面化します。ランキングへの直接的な影響が議論されているとしても、クライアント向けレポートは見栄えが悪いです。

WordPress が見出しタグを生成する方法: 競合の 4 つの原因

理解なぜ WordPress の見出し構造が壊れるには、見出しが生成される 4 つの場所を理解する必要があります。

ソース 1: テーマのヘッダーテンプレート

ほとんどの WordPress テーマでは、ヘッダー領域にサイトのタイトルが出力されます。古くてコーディングが不十分なテーマでは、すべてのページでこれをタグで囲みます。これは、サイト上のすべてのページが同じ H1、つまりブランド名で始まることを意味します。

次に、ページまたは投稿のタイトルがレンダリングされると ( すべき H1 である場合)、2 番目の H1 になるか、H2 に降格されます。

壊れたテーマでは次のようになります。 header.php:

php

// Broken — site title as H1 on every page
＜h1＞＜?php bloginfo('name'); ?＞＜/h1＞
＜h2＞＜?php the_title(); ?＞＜/h2＞  // Post title wrongly demoted

それは次のようになります:

php

// Correct — site title is a link or span, post title is H1
＜p class="site-title"＞＜a href="＜?php echo home_url(); ?＞"＞＜?php bloginfo('name'); ?＞＜/a＞＜/p＞
＜h1＞＜?php the_title(); ?＞＜/h1＞

これは WordPress H1 で最も一般的な問題の 1 つであり、ページのソースを検査しない限りまったくわかりません。 SEO プラグイン、緑色の可読性スコア、および完璧なコンテンツ — そして依然として各ページに重複した H1 が出力されています。

ソース 2: Gutenberg ブロックエディター

WordPress ブロックエディターでは、H1 の動作に意図的な変更が導入されました。デフォルトでは、Gutenberg は見出しブロックの H1 オプションを強調しません。投稿タイトルがすでに H1 としてレンダリングされていることが前提となっているため、コンテンツ領域の見出しは H2 から始まる必要があります。

実際には、これにより次の 2 つの問題が生じます。

問題A: 一部のテーマではそうなりますない投稿タイトルを H1 として出力します。テーマがスタイル上の理由からタイトルをまたはでレンダリングし、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-Four、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 でそれを検出する方法: ブロックエディタの上部ツールバーにある情報アイコン (ⓘ) をクリックします。 [ドキュメントアウトライン] パネルには、すべての見出しが順番に表示され、スキップされたレベルには警告が表示されます。

修正方法:

公開前にドキュメントアウトラインを使用して見出し構造を監査する
チームのコンテンツスタイルガイドを設定します。主要セクションには H2、サブセクションには H3、サブサブセクションには H4 を使用します。レベルをスキップしないでください。
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 タグも修正してください。