How to fix missing h1 on Gatsby

Steps for Gatsby

1. Audit every page template under `src/pages/` and `src/templates/` (e.g. `index.js`, `product.js`, `collection.js`, `blog-post.js`) to identify which ones render no `<h1>` element in their JSX.
2. Create (or open) a shared `PageHeading` component at `src/components/PageHeading.jsx` that renders a semantic `<h1>` with consistent base styling, so every page uses the same element rather than ad-hoc headings.
3. In each page template, import `PageHeading` and place it as the *first meaningful element* inside the page's top-level container — above product grids, hero images, or body copy — passing a descriptive, keyword-rich `title` prop derived from the page's data (e.g. CMS/GraphQL query result).
4. For Gatsby's Head API (`export function Head()`), ensure the `<title>` tag value and the `<h1>` text are aligned but not identical — the `<h1>` can be slightly more conversational while the `<title>` targets the exact search keyword.
5. For dynamically generated pages in `gatsby-node.js` (via `createPage`), pass the heading text through `pageContext` so the template always has a non-empty `title` string to render even before any async data loads.
6. Run `gatsby build && gatsby serve` and use browser DevTools → Elements panel (or an accessibility tree audit) to confirm exactly one `<h1>` exists per page before deploying.

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.