How to fix page has heading one on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Search your component/template files for page-level title output (e.g. <ProductTitle>, <PageHeader>) and confirm the rendered HTML element is <h1>.
2. If using a UI library (MUI, Chakra, etc.), pass the component prop (e.g. component='h1' or as='h1') to ensure semantic HTML output.
3. Make sure dynamic pages (product, category, blog, CMS) each have exactly one <h1> that contains the entity's primary name.
4. Run axe-core programmatically in CI (npm install axe-core) to catch regressions automatically.
5. Use React Testing Library or Playwright to assert document.querySelector('h1') is not null on every page type.

What is page has heading one?

Every web page should have exactly one top-level heading — an `<h1>` — that clearly describes what the page is about. Think of it as the title of a chapter in a book: it tells both visitors and software (screen readers, search engines) what the main subject is before they read anything else. If a page is missing an `<h1>`, or if the text that looks like a big bold title is actually styled with CSS rather than a true heading tag, the page fails this requirement. The `<h1>` doesn't have to be visually the largest text on the page, but it does have to exist in the HTML as an actual heading element.

Screen-reader users — an estimated 7–8 million people in the US alone — navigate pages by jumping between headings, and the `<h1>` is their first orientation point. Without it, they land on the page with no clear signal about where they are, creating a frustrating or unusable experience. From an SEO standpoint, the `<h1>` is one of the strongest on-page signals search engines use to understand relevance; missing it can reduce keyword rankings and organic traffic. In jurisdictions covered by the ADA (USA), EN 301 549 (EU), or the UK Equality Act, inaccessible pages carry real legal risk — accessibility lawsuits against online retailers have risen every year since 2017. Finally, a clear, prominent page title improves user confidence and reduces bounce rates, directly protecting conversion rates.

See the complete Page has heading one guide for every platform and the full background.