H2 Appears Before H1

What This Means

An <h2> element appears before the first <h1> in DOM traversal order. This is a specific variant of the heading sequencing issue — the most common sub-heading level (H2) is encountered before the page's primary heading.

Why It Matters for SEO

This check is related to but distinct from h1_non_sequential. That check fires when any non-H1 heading precedes the H1; this one fires specifically when the first heading type encountered in DOM order is H2 (or H2 appears anywhere before H1).

The practical impact is the same: the document outline is broken. A section heading (H2) introduces a sub-topic before the primary topic (H1) has been stated. Screen readers announce headings in order, so users relying on assistive technology encounter a sub-section label before they know what the page is about.

What the Platform Checks

The platform scans heading elements in DOM order. This check specifically fires when an <h2> element is encountered in DOM traversal before the first <h1> element — whether the H1 comes later in the page or is absent entirely.

How to Fix It

Ensure the H1 appears before any H2 in the page's DOM structure:

• Inspect the page in DOM order (not visual order) — the DOM order is what crawlers and screen readers see.
• Common cause: CMS sidebars, navigation menus, or "section" headers rendered before the main content H1 but below it visually.
• Move the main content H1 to appear earlier in the DOM, or change the pre-H1 headings to non-heading elements styled appropriately.
• In full-width hero sections with a large decorative subheading: if the subheading renders as H2 but the main headline renders as H1 visually, ensure the H1 appears first in the DOM, even if CSS positions the H2 visually above it.

A correct heading structure in DOM order: H1 (page title), then H2 (first major section), then H2 or H3 (subsections), and so on.