How to Fix the Heading Hierarchy in WordPress

Headings give your page content a clear, logical structure. They are not just visual elements for making text look bigger. Screen readers use them to let users navigate through sections, and search engines use them to understand the topic hierarchy of your content. A broken heading structure confuses both humans and machines, so getting it right pays off for accessibility, SEO, and overall readability.

What a Correct Heading Hierarchy Looks Like

Think of your headings as an outline or table of contents. Each level represents a nesting depth, and you should never skip a level going down. Here is what a proper structure looks like:

H1: Page Title (only one per page)
  H2: First Main Section
    H3: Subsection of the First Main Section
    H3: Another Subsection
      H4: Detail within the Subsection
  H2: Second Main Section
    H3: Subsection of the Second Main Section
  H2: Third Main Section

Notice how each heading level is contained within the level above it. You would not jump from H2 directly to H4, just like you would not create a sub-sub-section without a sub-section first. Going back up is fine: after an H4, you can go back to an H2 for a new main section.

Common WordPress Heading Mistakes

Most heading hierarchy issues in WordPress come from a few recurring patterns:

• Theme uses wrong tags for the page title: Some themes output the post or page title as an H2 instead of an H1, or they use the site name as an H1 on every page. This means your actual content title is demoted, and many pages may not have a proper H1 at all.
• Multiple H1 tags on a single page: This usually happens when the theme outputs the site title as H1 in the header, and the page title is also an H1. Every page should have exactly one H1. On inner pages, the site name should be a <p>, <span>, or styled <div>, not an H1.
• Skipping heading levels: Jumping from H2 to H4 or from H1 to H3 happens when authors choose heading levels based on how they look visually rather than their logical meaning. If the H3 looks like the right size, they pick H3, even if no H2 exists above it.
• Using headings for visual styling: Authors sometimes use an H2 or H3 just because they want bold, large text for a call-to-action or a sidebar widget title. These are not actual content headings and should be styled with CSS classes instead.
• Page builder and widget headings: Page builders like Elementor and widget areas often insert headings at unexpected levels. A sidebar widget might use an H3 while the content area has no H2, creating a skipped level in the overall page hierarchy.

How to Check Your Heading Hierarchy

Before fixing anything, you need to see what your current heading structure looks like. Here are several ways to do that:

• InspectWP: Run a scan and look at the content section. InspectWP displays the complete heading hierarchy of your page, making it easy to spot missing H1 tags, duplicate H1s, skipped levels, and other issues.
• HeadingsMap browser extension: Available for Chrome and Firefox, this extension shows a tree view of all headings on the current page. It highlights structural errors like skipped levels with warning icons.
• WAVE accessibility tool: The WAVE browser extension (wave.webaim.org) evaluates your page for accessibility issues, including heading structure problems. It overlays icons directly on the page where issues are found.
• Manual inspection: Right-click the page, select "View Page Source" (Ctrl+U), and search for <h1, <h2, <h3, and so on. This shows you the raw heading tags in the HTML.

Fixing Headings in the Gutenberg Block Editor

If you use the WordPress block editor (Gutenberg), fixing heading levels is straightforward:

1. Click on any Heading block in your content.
2. In the block toolbar at the top, you will see the current heading level (for example, "H3"). Click it to open a dropdown.
3. Select the correct heading level from the dropdown. Remember, sections of your content should start with H2 (since H1 is reserved for the page title), and sub-sections should use H3.
4. The block editor now includes a "Document Outline" feature. Click the info icon (circle with "i") in the top toolbar to see the heading structure of the entire post. It warns you about skipped levels.

If you are using the Classic Editor, switch to the "Text" tab to see the raw HTML and manually change the heading tags.

Fixing Headings in Theme Templates

If your heading issues come from the theme rather than the content, you need to edit the theme template files. Always use a child theme so your changes survive theme updates.

Common fixes include changing the site title tag on inner pages:

// In header.php of your child theme
<?php if (is_front_page()) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>

And making sure the post title uses H1 on single post/page templates:

// In single.php or content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>

On archive pages (category, tag, date archives), the archive title should typically be the H1, and individual post titles within the loop should be H2.

Styling Headings Without Breaking the Hierarchy

If you want text to look like a heading visually but it is not a structural heading (for example, a promotional banner or a widget title), use a CSS class instead of a heading tag:

.heading-style {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

Apply this class to a <p> or <div> element. Conversely, if you want a real heading to look smaller or different from the default, style it with CSS rather than choosing a lower heading level for appearance.

Accessibility Impact of Heading Hierarchy (WCAG 1.3.1)

The Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1 requires that information, structure, and relationships conveyed through presentation are programmatically determinable. Headings are a primary way screen reader users navigate web pages. According to WebAIM's screen reader user survey, over 67% of screen reader users use headings as their primary method of finding content on a page. When you skip heading levels or use headings for visual styling, screen reader users cannot reliably navigate your content. Fixing your heading hierarchy is one of the simplest and most impactful accessibility improvements you can make.

SEO Impact of Proper Heading Structure

Google has confirmed that it uses headings to understand the content and structure of a page. While headings alone will not make or break your rankings, they provide important context signals. An H2 that reads "Installation Guide" tells Google that the following section covers installation. Properly nested headings also help Google generate featured snippets and sitelinks. Skipping levels or using headings inconsistently sends mixed signals about your content structure and can prevent search engines from accurately interpreting your page topics.

Verify Your Heading Hierarchy with InspectWP

After making corrections, run a new InspectWP scan. The content section displays every heading on your page in order, along with its level. You should see a single H1, followed by H2s for main sections, H3s for subsections, and no skipped levels. If you spot remaining issues, go back to the editor or theme template and adjust accordingly.