Page has heading one
Quick winFound on 48% of audited stores.
Add a single, descriptive `<h1>` heading to every page so assistive technologies and search engines can identify the page's main topic.
What it is
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.
Why it matters
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.
How to fix it
- Identify every page that is missing an <h1> — use your browser's DevTools (Ctrl+U / Cmd+U → search for '<h1') or a free tool like the axe browser extension to confirm.
- Choose the single phrase that best describes the page's main topic (e.g. 'Women's Running Shoes', 'Your Shopping Cart', 'Contact Us'). It should match — or closely echo — the page's <title> tag.
- Add that phrase to the page HTML as <h1>Your Page Topic</h1>, placed after the site header/navigation and before the main body content.
- If text is already visually prominent but marked up as a <div>, <p>, or <span>, change the element to <h1> and adjust CSS so the visual appearance stays the same.
- Confirm there is only ONE <h1> per page — multiple <h1>s on the same page dilute heading structure. Subsequent section titles should be <h2>, <h3>, etc.
- Re-run the axe extension or your accessibility scanner to verify the 'page-has-heading-one' rule now passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix page has heading one on Shopify
- Go to Online Store → Themes → click 'Customize' on your active theme.
- For product pages: the product title is usually already rendered as an <h1> in the theme's product template (e.g. sections/main-product.liquid). Open the theme code via Online Store → Themes → '…' → Edit code and search for 'product.title' — wrap it in <h1> if it isn't already.
- For custom pages (e.g. About, Contact): go to Online Store → Pages, open the page, and in the content editor type the page title, highlight it, and choose 'Heading 1' from the paragraph-style dropdown.
- For the homepage: in Theme Customize, click on the hero or banner section. If it outputs the text as a <div> or <p>, edit the section's Liquid file (sections/slideshow.liquid or similar) and change the element to <h1>.
- After saving, use the axe DevTools browser extension to re-check the live page.
How to fix page has heading one on WooCommerce
- For product pages: most WooCommerce themes output the product name as <h1 class='product_title entry-title'>. Verify this in your child theme's template file woocommerce/single-product.php (or the parent theme's copy). If it's wrong, copy the file to your child theme and correct the element.
- For standard WordPress pages (About, Contact, etc.): in the WordPress Block Editor (Gutenberg), add a Heading block at the top of the page content and set its level to H1 in the block toolbar on the right.
- For the homepage: if using a page builder (Elementor, Divi, etc.), find the hero text widget, click it, and change its HTML tag from 'div' or 'p' to 'h1' in the widget's advanced/style settings.
- If your theme suppresses the page title visually, check Appearance → Customize → (theme-specific) Title settings, or re-enable it via the theme's page options.
- Install the free 'Accessibility Checker' plugin (by Equalize Digital) to audit all pages from the WordPress dashboard.
How to fix page has heading one on BigCommerce
- Go to Storefront → Themes → click 'Advanced' → 'Edit Theme Files' for your active theme.
- For product pages: open templates/pages/product.html and locate the product name output — ensure it is wrapped in <h1 class='productView-title'>{{product.title}}</h1>.
- For standard content pages (About, Contact): go to Storefront → Web Pages, open the page, and in the rich-text editor highlight the page title and select 'Heading 1' from the format dropdown.
- For the homepage: edit templates/pages/home.html or the relevant carousel/banner widget via Page Builder (Storefront → My Theme → Customize) — change text widgets that represent the main heading to use the H1 element.
- Save and preview each page, then confirm with the axe browser extension.
How to fix page has heading one on Wix
- Open the Wix Editor and navigate to the page you want to fix.
- Click on the text element that serves as the page's main title.
- In the text toolbar that appears, open the 'Paragraph Styles' dropdown (it usually shows 'Paragraph' or 'Heading 2') and select 'Heading 1'.
- If no suitable text element exists, click '+ Add' → 'Text' → 'Heading 1' and type the page title.
- Ensure only one Heading 1 exists on the page — demote any duplicate H1s to H2.
- Publish the site and verify with the axe DevTools extension in your browser.
How to fix page has heading one on Squarespace
- Open the page in the Squarespace editor and click on the text block that represents the main page title.
- Highlight the title text, then click the text-format toolbar and select 'Heading 1' (the style marked with a single '#' or labeled 'H1').
- If the page uses a cover page or banner section whose title is output by Squarespace automatically, check Site Styles to confirm the Page Title style maps to an <h1> — Squarespace 7.1 themes do this by default for page and collection titles.
- For blog posts and product pages, Squarespace automatically renders the post/product title as <h1> — verify by viewing page source.
- After saving, view source (Ctrl+U) and search for '<h1' to confirm exactly one exists, then re-run your accessibility checker.
How to fix page has heading one on Webflow
- Open your project in the Webflow Designer and navigate to the page.
- In the left panel, find the element used as the main page title. Click it to select it.
- In the right-hand Element Settings panel, confirm the element tag is 'H1'. If it's set to 'Div', 'Paragraph', or another tag, click the tag dropdown and change it to 'Heading → H1'.
- If no heading exists, press 'A' to open the Add panel, drag a Heading element onto the canvas, set its tag to H1, and type the page title.
- Ensure only one H1 per page by searching the Navigator panel for any duplicate H1 elements and downgrading them to H2.
- Publish the site and verify with the axe browser extension or Webflow's built-in Audit panel (the triangle icon in the top toolbar).
How to fix page has heading one on Adobe Commerce (Magento)
- For product pages: the product name is rendered by app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/details.phtml (or the parent theme equivalent). Confirm the name is wrapped in <h1 class='page-title'>.
- For CMS pages: go to Content → Pages, open the page, and in the Content editor (PageBuilder or standard WYSIWYG) add a Heading row with H1 type, or wrap the title text in a Heading 1 widget.
- For category pages: the category name is typically output as <h1> in app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/category/view.phtml — verify and correct if needed.
- If using a custom theme, create an override in your theme folder rather than editing core files.
- Clear the Magento cache (System → Cache Management → Flush Magento Cache) and verify the rendered HTML with browser DevTools.
How to fix page has heading one on Wix Studio
- Open Wix Studio Editor and go to the page you need to fix.
- Click the text element acting as the primary page title.
- In the floating text toolbar, open the style dropdown and select 'Heading 1'.
- If no H1 text element exists, click '+' → 'Text' → 'Heading 1', place it prominently, and enter the page's main topic as the text.
- Use the Layers panel to confirm only one element on the page has the H1 tag.
- Publish and verify with the axe DevTools extension.
How to fix page has heading one on Webflow Commerce
- In the Webflow Designer, open a product template page (CMS collection template for Products).
- Locate the product name element — typically a text element bound to the 'Name' CMS field. Select it and confirm its tag is H1 in the right-side settings panel.
- If it's a Div or Paragraph, change the tag to H1 to semantically mark it as the primary heading.
- Repeat for Category/Collection list pages, ensuring the collection title is an H1.
- Publish and audit with the Webflow Audit panel or the axe browser extension.
How to fix page has heading one on Headless / Custom (I build in code)
- Search your component/template files for page-level title output (e.g. <ProductTitle>, <PageHeader>) and confirm the rendered HTML element is <h1>.
- If using a UI library (MUI, Chakra, etc.), pass the component prop (e.g. component='h1' or as='h1') to ensure semantic HTML output.
- Make sure dynamic pages (product, category, blog, CMS) each have exactly one <h1> that contains the entity's primary name.
- Run axe-core programmatically in CI (npm install axe-core) to catch regressions automatically.
- Use React Testing Library or Playwright to assert document.querySelector('h1') is not null on every page type.
How to fix page has heading one on Shopify Plus
- Follow all standard Shopify steps above; Shopify Plus stores use the same Liquid theme architecture.
- For headless or custom storefronts built on the Storefront API, audit each React/Vue component that renders a page title and ensure the outermost title element is an `<h1>`.
- For checkout extensibility (checkout.liquid or checkout UI extensions), add an `<h1>` to any custom checkout page templates where one is missing.
Does your site have this issue?
Run a free SEOLZ scan to find page has heading one — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does page has heading one matter?
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.
How do I fix page has heading one?
Add a single, descriptive `<h1>` heading to every page so assistive technologies and search engines can identify the page's main topic.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI