# Every page has exactly one H1 tag

- **Pattern:** `ab-002496` (`seo-fundamentals.content-structure.h1-present`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002496
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002496)

## Why it matters

Google treats the H1 as the primary topical signal for a page — stronger than the title tag in many ranking experiments because the H1 sits in body content rather than head metadata. A page with zero H1s gives the crawler nothing to anchor semantic relevance against, so it falls back to the largest visible text, which is often a navigation element or a sidebar heading. A page with multiple H1s (one from the layout, one from the content) dilutes the signal and fails WCAG 2.2 SC 1.3.1 (Info and Relationships) screen-reader expectations, which assistive tech uses to let users jump to the page's main subject.

## Severity rationale

Critical because the H1 is a top-three ranking signal and a hard accessibility requirement for screen-reader navigation.

## Remediation

Put exactly one `<h1>` per page, inside the page-level component, describing that page's content. Move site-name headings in the layout to a `<p>`, a logo image, or an `<h2>` so they do not collide.

```tsx
// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      {/* page content */}
    </main>
  )
}
```

Audit for duplicates by grepping `grep -rn '<h1' app/` and confirming each page contributes exactly one.

## Detection

- **ID:** `h1-present`
- **Severity:** `critical`
- **What to look for:** Examine page components and layouts for `<h1>` usage. Each page should have exactly one `<h1>`. Check both layout files (which might contain a site-wide `<h1>`) and page-level components. Be aware of component composition — an `<h1>` in a shared layout that appears on every page counts as a per-page `<h1>` only if the text content changes per page.
- **Pass criteria:** Count all page routes. For each page route, count the number of `<h1>` tags that would render (from both layout and page components). Each page route must render no more than 1 `<h1>` tag and at least 1 `<h1>` tag — exactly one — with meaningful, page-specific content. Do NOT pass when any page has 0 or more than 1 `<h1>` tag.
- **Fail criteria:** A page has zero `<h1>` tags, or a page has multiple `<h1>` tags (e.g., one in the layout and another in the page component), or all pages share an identical `<h1>` from a layout with no per-page override. Report: `"X of Y pages have exactly 1 H1."`
- **Skip (N/A) when:** Never — every web page should have one H1.
- **Detail on fail:** Specify the issue per page. Example: `"No <h1> found on /pricing page"` or `"Multiple <h1> tags on /about: one in layout ('YourSite') and one in page content ('About Us')"`
- **Remediation:** Each page should have exactly one `<h1>` that describes the page's primary content. If your layout includes an `<h1>` for the site name, consider changing it to a logo or a different heading level:

  ```tsx
  // app/about/page.tsx
  export default function AboutPage() {
    return (
      <main>
        <h1>About Us</h1>
        {/* page content */}
      </main>
    )
  }
  ```

## External references

- wcag 1.3.1
- wcag 2.4.6

Taxons: findability

HTML version: https://auditbuffet.com/patterns/ab-002496