H1 Is Not the First Heading

What This Means

A non-H1 heading element (H2, H3, or lower) appears before the first <h1> in the document's DOM order. The H1 exists, but it is not the first heading encountered during a top-to-bottom parse of the page.

Why It Matters for SEO

The correct heading hierarchy flows H1 → H2 → H3. When an H2 or H3 precedes the H1, the document outline is structurally inverted — the sub-topic appears before the topic is even introduced. This confuses both screen readers (which announce headings in DOM order) and search engine parsers that use heading hierarchy to understand content structure.

This most commonly occurs when a navigation area, an "Our Services" widget, or a page section that appears visually above the main content area uses an H2 or H3 heading, and the main content H1 sits below it in the DOM.

What the Platform Checks

The platform scans all heading elements in DOM traversal order. This check fires when any heading of level 2 or lower (H2, H3, H4, etc.) is encountered before the first H1 in the document.

How to Fix It

Restructure the page so the H1 precedes all other headings in DOM order:

• Use your browser's Elements inspector to view headings in DOM order (not visual order — they can differ with CSS positioning).
• If navigation, hero sections, or banners above the main content contain headings, change those headings to styled elements that are not H2/H3, or use aria-label with non-heading markup.
• Check if any widget or sidebar heading above the fold is using an H2 — these are common offenders.
• After restructuring, verify the heading outline with a browser extension that lists headings in DOM order.

In layouts where the visual order differs from the DOM order (CSS grid/flexbox reordering), ensure the DOM order — what a screen reader and crawler see — matches the logical heading hierarchy.