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

あなたは完璧なWordPressページを作成するために何時間も費やしました。コンテンツは充実しており、キーワードも配置され、SEOプラグインには緑色のチェックマークが表示されています。

But open your browser’s developer tools and inspect the heading structure, and you’ll see something that can quietly kill your organic traffic: a broken heading hierarchy. Two H1s. A site title wrapped in `＜h1＞`. Sections jumping from H2 straight to H4. Or worse — no H1 at all.

This isn’t a 初心者のミス. It’s a 構造的な問題 baked into how WordPress, themes, page builders, and the Gutenberg editor interact — and most site owners never know it’s happening.

This guide exists to fix that. Whether you’re a WordPress site owner managing your own content, or an agency building sites for dozens of clients, you’ll leave here knowing exactly how to 監査、診断、そして恒久的に解決 する方法を正確に理解できるでしょう。

---

H1タグとは何か、なぜWordPressで重要なのか？

An H1 tag (＜h1>) is the top-level HTML heading element. In semantic HTML, it signals to browsers, search engines, and assistive technologies: “This is the primary topic of this page.”

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

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

Skip a level — jumping from H2 to H4 — and you break the outline. Use two H1s and you create structural ambiguity. Use H3 tags for visual styling and you introduce ghost headings that confuse crawlers.

In WordPress specifically, this gets complicated fast. Unlike a static HTML page where you write every tag manually, WordPress generates heading markup from at least four different sources simultaneously: the theme’s header template, the post title, the editor content, and any widgets or page builder modules you’ve added.

GoogleはH1タグについて実際に何を言っているのか

Let’s settle the ランキングに関する議論 を片付けましょう。

In July 2026, Google’s Gary Illyes addressed this directly during the SEO Office Hours podcast: arranging headings in semantic order is genuinely helpful for accessibility (especially screen reader users), but it doesn’t significantly impact Google’s ranking algorithms. John Mueller has also stated that multiple H1 tags on a page don’t confuse crawlers and have zero direct SEO impact.

では、これは重要ではないのでしょうか？

Yes — but not for the reason most SEO guides say.

WordPressで見出し構造を気にするべき本当の理由は以下の通りです。

1. アクセシビリティへの準拠 — WCAG 2.1 success criterion 1.3.1 requires information and relationships to be programmatically determinable. Broken heading hierarchies fail this.
2. クロール可能性とコンテンツのシグナル — While Google can parse messy markup, a clean H1 gives the clearest possible signal about page topic, which matters in ambiguous cases.
3. ユーザーエクスペリエンスと滞在時間 — Readers scan headings. A logical hierarchy helps them navigate and stay longer — both indirect ranking signals.
4. テクニカル監査のクリーンさ — For agencies, heading issues surface in every audit tool (Screaming Frog, Ahrefs, SEMrush, Rank Math, Yoast). Client-facing reports look bad even if the direct ranking impact is debated.

---

WordPressは見出しタグをどのように生成するか：競合の4つの発生源

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

Source 1: The Theme’s Header Template

Most WordPress themes output the site title in the header area. Older and poorly coded themes wrap this in an ＜h1> tag — on every single page. This means every page on your site starts with the same H1: your brand name.

その後、ページや投稿のタイトルがレンダリングされる際（本来は H1であるべき もの）、それが2つ目のH1になるか、H2に格下げされてしまいます。

Here’s what this looks like in a broken theme’s 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＞

This is one of the most common WordPress H1 issues and it’s entirely invisible unless you inspect the page source. You can have an SEO plugin, a green readability score, and 完璧なコンテンツ — and still be outputting duplicate H1s on every page.

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

The WordPress block editor introduced deliberate changes to H1 behavior. By default, Gutenberg de-emphasizes the H1 option in the Heading block — the assumption is that the post title is already rendering as H1, so content-area headings should start at H2.

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

問題A： 一部のテーマは ローカルにダウンロードされていません output the post title as H1. If your theme renders the title in a ＜div> or ＜h2> for stylistic reasons, and Gutenberg has hidden H1 from the heading block options, you end up with zero H1 tags on the page.

This is exactly the situation flagged in a long-running GitHub issue in the Gutenberg repository — users requesting the ability to remove the H1 option entirely for enterprise and agency setups where the H1 is controlled at the template level. The issue highlights real confusion: the editor’s default behavior and the theme’s template need to be explicitly coordinated, but WordPress provides no automated check for this.

問題B： Content editors can still select H1 in the block editor by changing the heading level. If your theme already outputs the post title as H1, an editor adding another H1 block inside the content area creates a duplicate — and no warning appears.

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

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

Here’s why: page builders give you granular visual control. You can drag a text element anywhere, style it any way, and assign any heading level. This is powerful for design. It’s disastrous for structure.

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

• ヒーローセクション：H1（正しい）✓
• Feature section title: H3 (skipped H2, chosen because it “looks better”) ✗
• ウィジェットエリアのタイトル：H2（セクション見出しのように見えるが、単なるサイドバーウィジェットのタイトル）✗
• お客様の声の見出し：H4（上にH3がない）✗
• CTA見出し：H2（より高いレベルに戻り、アウトラインが完全に非線形になっている）✗

The result is a heading structure that’s visually coherent but semantically meaningless. Screen readers and crawlers parsing this get a content outline that jumps around like a broken table of contents.

InspectWP’s documentation identifies this pattern explicitly: authors and page builder users choose heading levels based on how they 見た目 rather than their logical meaning — if H3 is the right visual size, they select H3, even with no H2 above it.

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

WordPress widget areas — sidebars, footers, header modules — often output their own headings. A “Recent Posts” widget might render as H2. A promotional banner built into the theme might use H3. None of these are part of the content outline, but they appear in the page’s heading structure.

This creates heading “noise” that inflates the apparent complexity of the outline and can push content headings out of their correct hierarchical position.

---

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

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

それは次のようになります: Every page on your site has two H1s — your site name and your post title.

影響を受ける人: Sites using older themes, poorly built premium themes, or any theme where the developer used ＜h1> for the site branding.

それを検出する方法: Right-click any page → Inspect → search for ＜h1 in the Elements panel. If you see your site name wrapped in H1 in the ＜header> section, you have this problem.

修正方法：

オプション 1: 子テーマの編集 (開発者アプローチ) In your child theme’s header.php, find the site title output and change it from ＜h1> to ＜p> or ＜span> with appropriate classes:

php

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

オプション 2: CSS + aria-label (コードなしの回避策) If you can’t edit theme files, use CSS to reset the H1 styling on the site title:

css

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

注: これにより、 ビジュアル H1 problem but doesn’t fix the structural issue. The H1 tag remains in the markup.

オプション 3: 適切に構造化されたテーマに切り替える Themes following WordPress coding standards (Twenty Twenty-Four, Kadence, GeneratePress, Astra) handle this correctly out of the box. If your current theme has this issue and you’re not a developer, switching is often the most reliable fix.

---

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

それは次のようになります: Your homepage has zero H1 tags. SEO plugins report “No H1 found.”

影響を受ける人: Sites that use a logo image for branding (hiding the site title), sites using a static front page with no title visible, or sites where the theme’s homepage template doesn’t call the_title().

This is a real and recurring issue in the WordPress support forums. The cause is typically this sequence: the site title is set to display in the header, but the user hides it (or replaces it with a logo), removing the only H1 from the page. Since the homepage often doesn’t have a “post title” in the way a blog post does, there’s no automatic H1 generated.

修正方法：

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

• A visible heading (“Your Business Name | Service Category”) that also functions as the H1
• CSS 経由で追加された、視覚的に隠された H1 (position: absolute; clip: rect(0 0 0 0);) 視覚的なデザインを損なうことなくセマンティック マーカーを提供します

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

---

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

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

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

なぜそれが重要なのか: As InspectWP notes, skipping heading levels happens when authors choose levels based on appearance — the H3 looks right, so they use H3, regardless of whether an H2 precedes it.

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

修正方法：

1. 公開前にドキュメント アウトラインを使用して見出し構造を監査する
2. Set a content style guide for your team: H2 for major sections, H3 for subsections, H4 for sub-subsections — never skip levels
3. Use Yoast SEO or Rank Math’s content analysis — both flag heading structure issues

---

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

それは次のようになります: A page built with Elementor or Divi has three or four H1 tags because each major section has its own hero-style “H1” headline.

修正方法：

In Elementor: Edit each heading widget → check the HTML Tag setting → set only the primary page title to H1, and change all others to H2 or H3 as appropriate.

In Divi: Edit heading modules → under Advanced → HTML Tag → change to the correct semantic level.

In Beaver Builder: Each heading module has a “Heading Tag” setting in the Style tab. Audit each one.

---

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

それは次のようになります: Your theme doesn’t output the post title as H1, and Gutenberg has hidden the H1 option in the Heading block. Your pages have no H1.

修正方法：

For developers managing a site where the H1 must be placed inside the content area, you can restore the H1 option using a filter in your theme’s functions.php:

php

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

Alternatively, switch to the “Edit as HTML” view for the Heading block and manually set ＜h1> in the markup.

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

---

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

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

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

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

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

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

It’ll Show you all issue with your headline tags.

---

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

If you’re building or maintaining WordPress sites for clients, heading structure needs to be part of your pre-launch and ongoing audit process. Here’s a repeatable checklist:

テーマレベル:

• Site title in header is NOT wrapped in ＜h1> (use ＜p>, ＜span>, or ＜div>)
• Post/page title renders as ＜h1> in ＜article> or ＜main> on all post types
• Homepage has exactly one ＜h1> — either from the site title or the hero section
• Archive pages (category, tag, author) have a descriptive ＜h1>
• 404 page has an ＜h1>

コンテンツレベル:

• Each page has exactly one ＜h1> in the content area (or zero if the theme handles it via the title)
• Major sections use ＜h2>
• Subsections use ＜h3> nested within ＜h2> sections
• 見出しレベルはスキップされません
• 見出しは視覚的なスタイルを設定するためだけに使用されるわけではありません

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

• Elementor/Divi/Beaver Builder の見出し要素に正しい HTML タグ設定がある
• Widget areas don’t output accidental H1 or H2 tags
• SEO プラグイン H1 警告がすべての主要ページで解決されました

---

The Correct WordPress Heading Hierarchy — By Page Type

One pattern doesn’t fit every WordPress page type. Here’s the correct structure for each:

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

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: 見出しタグを使用してテキストのスタイルを設定する If you want large bold text that isn’t a section heading, don’t use H2. Add a CSS class to a ＜p> or ＜div> and style it visually. Using heading tags for aesthetics pollutes your structural outline.

間違い 2: 編集者に目で見て見出しレベルを選択させる コンテンツ スタイル ガイドがなければ、編集者は自然と、次のような見出しレベルに引き寄せられてしまいます。 見た目 right. A brief internal guide — “H2 for sections, H3 for subsections, never use H1 in content” — prevents most issues.

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

間違い 4: SEO プラグインですべてがカバーされると思い込む Yoast and Rank Math check the post you’re editing. They don’t catch heading issues introduced by your theme’s header template, footer widgets, or archive page templates. A manual audit or Screaming Frog crawl is still necessary.

間違い 5: HTML 構造ではなく見た目を修正する The most common “fix” for the site title H1 problem is adding CSS to make it look smaller. That hides the problem visually but leaves the broken markup in place. Fix the HTML tag, not just the style.