How to fix missing h1 on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Locate the page component or template that renders the page's main content (e.g. ProductPage.jsx, CategoryPage.tsx, product.html).
2. Ensure the primary title/name variable is wrapped in an <h1> tag — e.g. <h1>{product.name}</h1> in React/Next.js, or <h1>{{ product.title }}</h1> in a template language.
3. Make sure no CSS rule sets display:none or visibility:hidden on the h1 element.
4. Add a check in your CI/build pipeline or automated test suite (e.g. with axe-core or a Playwright test) to assert that every page type contains exactly one <h1>.
5. Deploy and verify with browser DevTools.

What is missing h1?

An H1 is the main heading on a webpage — think of it as the title printed at the top of a magazine article. It tells both visitors and search engines what the page is about in one clear phrase. Every page should have exactly one H1 tag (not zero, not three), and it should describe the page's primary topic using words your customers actually search for. On a product page that might be the product name; on a category page it might be the category name; on your homepage it might be your brand's core value proposition.

Search engines use the H1 as one of the strongest on-page signals to understand what a page covers and how it should rank. A missing H1 means Google has to guess the page topic from other less-reliable signals, which can lower your rankings for the exact keywords you care most about. For shoppers, a page without a visible heading looks unfinished and untrustworthy, hurting conversion rates. Accessibility tools and screen readers also rely on the H1 to help visually impaired users navigate your page — missing it creates a legal accessibility risk in many jurisdictions.

See the complete Missing h1 guide for every platform and the full background.