How to fix missing h1 on Next.js

Steps for Next.js

1. Open the page component for the template type that is missing an H1 (e.g. pages/products/[slug].tsx or app/products/[slug]/page.tsx).
2. Ensure the product/page name is rendered inside an <h1> tag: <h1>{product.title}</h1>.
3. Confirm no global CSS or Tailwind class hides the element.
4. Run 'npm run build && npm start', open the page, and inspect with DevTools (Ctrl+F '<h1>') to confirm.

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.