Reviewed November 7, 2026

Heading Order on Product Pages: One H1 and a Ladder, Not a Pile

Screen reader users navigate by headings the way sighted users scan a page, jumping from H2 to H2 to find the section they want. A product page with three H1s, no H2s, and a reviews section marked as H4 is a map with no roads, and the customer has to read the whole page to find anything.

Heading order is the cheapest structure a store can fix, and it is also the most commonly broken, because themes assign heading levels by appearance instead of meaning.

The ladder a product page should follow

One H1, the product name, at the top. Then H2s for the sections: description, specifications, shipping and returns, reviews. Then H3s inside those sections where a subsection exists, like individual review titles or specification groups. The levels descend in order, never skip, and never repeat the H1.

The most common break is the logo H1. Many themes mark the store logo as an H1 on every page, which means the product page has two H1s before the product name appears, and the screen reader announces the store name as the page's main heading. The logo should be a plain link on inner pages, with the H1 reserved for the product.

The second break is skipped levels. A page that jumps from H1 to H3, or from H2 to H4, breaks the navigation map, because the screen reader user expects H3s under an H2 and finds none. The fix is not to renumber by hand across the theme. It is to stop using heading tags for font size, and to style a span or a paragraph when the text is not actually a heading.

What headings do for customers who can see

Headings are not only for screen readers. Search engines use them to understand page structure, and a product page with a clear H1 and H2s ranks better for the terms in those headings than a page with a flat pile of styled divs. The same structure that helps a screen reader user find the shipping section helps Google understand what the page sells.

The visual design does not have to change. An H2 can look like body text if the stylesheet says so, and a span can look like a heading if the stylesheet says so. The heading level is meaning, the CSS is appearance, and the theme that ties them together is the theme that breaks accessibility every time a designer wants a smaller heading.

The check that takes ten minutes

Run a heading-order check on your top ten product pages, with any accessibility extension or a simple outline view. Count the H1s, look for skipped levels, and find the logo H1. The fixes are usually in the theme's header and product templates, a few lines each, and they survive theme updates only if you note them down, because the next theme update will put the logo H1 right back.

Related reading

Related reading: Accessible Order Tracking: Status Pages and Delivery Updates That Work for Everyone, Alt Text for Product Images: What to Write and What to Skip, and The Skip Link: First in Tab Order or It Is Decoration.

Frequently asked questions

How many H1s should a product page have?

One, the product name. The logo should not be an H1 on inner pages, and section titles should be H2s.

Can I skip from H1 to H3?

No. Heading levels should descend in order, H1 to H2 to H3. Skipped levels break the navigation map screen reader users rely on.

Do headings affect SEO?

Yes. Search engines use heading structure to understand what a page is about. A clear H1 and H2s help the page rank for the terms they contain.

Can an H2 look like normal text?

Yes. Heading level is meaning and CSS is appearance. Style an H2 to look however the design needs, and use a span when text is not actually a heading.