SEOLZ

Heading order

Moderate effort

Found on 40% of audited stores.

Fix heading tags so they follow a logical, sequential order (H1 → H2 → H3…) without skipping levels anywhere on the page.

What it is

Every webpage uses heading tags — H1, H2, H3, H4, H5, and H6 — to organize content into a hierarchy, like chapters and sub-chapters in a book. "Heading order invalid" means that hierarchy has a gap or jump: for example, jumping straight from an H1 to an H3, or using an H4 immediately after an H2. Screen readers and assistive technologies rely on this outline to help users navigate a page quickly. Headings should always nest in order — you can go up levels freely, but you should never skip a level going down.

Why it matters

For the roughly 1-in-4 shoppers who use assistive technology, broken heading order makes it very hard to navigate your pages — they may completely miss product sections, key offers, or checkout steps. This is a WCAG 2.1 Level AA requirement (Success Criterion 1.3.1 and 2.4.6), so non-compliance creates real legal risk under laws like the ADA (USA), the European Accessibility Act, and the UK Equality Act. Beyond accessibility, heading structure is one of the signals Google uses to understand your page's content hierarchy; a clean, logical outline helps search engines index and rank your pages more accurately. Fixing heading order is typically a quick win with immediate benefits for both users and SEO.

How to fix it

  1. Audit your page's heading structure: use a browser extension (e.g., axe DevTools, HeadingsMap, or WAVE) to generate a visual outline of all heading tags on the page and spot where levels are skipped.
  2. Identify every place where a heading level jumps by more than one — for example H1 → H3, H2 → H4, or H3 → H5 — going downward in the hierarchy.
  3. Change each out-of-order heading tag to the correct sequential level (e.g., change that H3 to H2 so it immediately follows the H1). There should be exactly one H1 per page (usually the product or page title), and every subsequent section should step down one level at a time.
  4. If a heading was chosen for its visual style rather than its structural role (e.g., an H4 used because it looks small), reassign it the correct structural heading level and then adjust its appearance using CSS classes — never pick a heading level based on how it looks.
  5. Re-run the accessibility scanner to confirm no heading-order violations remain, and manually tab through the page with a screen reader (NVDA, VoiceOver, or TalkBack) to verify the outline makes logical sense.
<!-- INCORRECT: skips from H1 directly to H3 -->
<h1>Product Name</h1>
<h3>Key Features</h3>   <!-- ❌ skips H2 -->
  <h4>Detail One</h4>

<!-- CORRECT: sequential, no levels skipped going downward -->
<h1>Product Name</h1>
<h2>Key Features</h2>   <!-- ✅ follows H1 -->
  <h3>Detail One</h3>   <!-- ✅ follows H2 -->

Fix it on your platform

Pick your platform for the exact steps.

How to fix heading order on Shopify
  1. Go to Online Store → Themes → click Customize on your active theme.
  2. For content sections (e.g., Featured Collection, Rich Text, Custom HTML), click each section and inspect what heading level is output. Many Shopify sections expose a 'Heading size' or 'Heading tag' dropdown — set these to the correct sequential level.
  3. For deeper control, go to Online Store → Themes → Actions → Edit code. Open the relevant section Liquid file (e.g., sections/featured-collection.liquid) and change hardcoded <h3> or <h4> tags to the correct level.
  4. For blog posts and pages, edit the page content in the rich-text editor (Online Store → Pages or Blog Posts → select post) and use the paragraph/heading dropdown in the toolbar to assign correct heading levels.
  5. Install the free axe DevTools browser extension and run it on your storefront to verify no heading-order violations remain.
Full Shopify guide →Official Shopify docs ↗
How to fix heading order on Shopify Plus
  1. Follow all standard Shopify steps above.
  2. If using a custom checkout or headless storefront (Hydrogen/Remix), open the relevant React component files and audit JSX heading tags (h1–h6) to ensure sequential order, then redeploy.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix heading order on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme) and open the relevant template file (e.g., single-product.php, archive-product.php, page.php).
  2. Locate heading tags and correct any that skip levels — change <h3> to <h2> if it follows an <h1>, for example.
  3. For content in the block editor (Gutenberg), edit the page/post, click a Heading block, and use the 'H1/H2/H3…' picker in the block toolbar to set the correct level.
  4. If using a page builder (Elementor, Beaver Builder, Divi), open the page in the builder, click each heading widget, and in its settings change the HTML Tag from H3/H4 to the correct sequential level.
  5. Install the WAVE or axe DevTools browser extension and re-audit the live page to confirm the fix.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix heading order on BigCommerce
  1. Go to Storefront → My Themes → click Customize on your active theme, or click Advanced → Edit Theme Files.
  2. Open the relevant Handlebars template (e.g., templates/pages/product.html, templates/pages/home.html) and correct any heading tags that skip levels.
  3. For content widgets placed via Page Builder (Storefront → Page Builder), click into each Text or HTML widget that contains headings, switch to the HTML source view, and correct the heading tags.
  4. For static web pages, go to Storefront → Web Pages, edit the page, switch the rich-text editor to HTML source view, and fix heading levels there.
  5. Republish/save changes and run the axe DevTools extension on the live page to confirm the fix.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix heading order on Adobe Commerce (Magento)
  1. Identify the affected template: use browser DevTools to find the heading element, then trace it to its .phtml template file in your theme under app/design/frontend/<Vendor>/<Theme>/.
  2. Copy the core template into your custom theme (never edit core files) and change the heading tag to the correct sequential level.
  3. For CMS pages and blocks (Content → Pages or Content → Blocks), open the page in the editor, click 'Show/Hide Editor' to switch to HTML view, and correct any heading tags.
  4. If using Page Builder (Adobe Commerce 2.4+), open the page in Content → Pages, click Edit with Page Builder, select the heading element, and change its 'Heading Type' from the dropdown to the correct level.
  5. Run bin/magento cache:flush after template changes, then re-test with the axe DevTools extension.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix heading order on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template override process and CMS editor are identical in Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix heading order on Wix
  1. Open the Wix Editor for your site.
  2. Click any Text element that is used as a heading. In the text toolbar that appears, open the 'Paragraph Styles' dropdown (it may show 'Heading 1', 'Heading 2', etc.) and select the correct heading level to match the sequential order on the page.
  3. Note: Wix maps its 'Heading 1–6' paragraph styles to <h1>–<h6> HTML tags. Choose the style that corresponds to the correct structural level, not the visual size you prefer.
  4. If you need a different visual size without changing the structural heading level, use the font-size control within the same heading style rather than switching to a different heading level.
  5. Publish the site, then run WAVE or axe DevTools on the live URL to verify the heading outline is sequential.
Full Wix guide →Official Wix docs ↗
How to fix heading order on Wix Studio
  1. In Wix Studio Editor, click a text/heading element and open the 'Text Style' dropdown in the Properties panel on the right.
  2. Select the appropriate Heading level (H1–H6) that maintains sequential order relative to surrounding headings on the page.
  3. Use CSS customization (via the Inspect panel or custom CSS) to adjust visual appearance without changing the semantic heading level.
  4. Publish and verify with the axe DevTools browser extension.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix heading order on Squarespace
  1. Open the page in the Squarespace Editor and click the text block containing the heading.
  2. Highlight the heading text, then use the text style dropdown in the toolbar — it will show options like 'Heading 1', 'Heading 2', 'Heading 3'. Select the level that maintains correct sequential order.
  3. Squarespace maps Heading 1 → <h1>, Heading 2 → <h2>, Heading 3 → <h3>. If a heading looks too large or small at the correct level, adjust the font size for that heading style globally via Design → Fonts rather than changing its semantic level.
  4. Save the page and use the WAVE extension in your browser to verify the heading structure is sequential.
Full Squarespace guide →Official Squarespace docs ↗
How to fix heading order on Webflow
  1. Open your project in the Webflow Designer.
  2. Click on any Heading element on the canvas. In the Element Settings panel (the gear icon on the right), find the 'Tag' dropdown and change it to the correct heading level (H1–H6) that maintains sequential order.
  3. Do NOT change the heading level for visual reasons — instead, adjust typography in the Style panel (font size, weight, color) to make any heading level look the way you want.
  4. For CMS-driven pages, check your Collection Template page in the same way and fix heading tags in the template.
  5. Publish the site and run the axe DevTools extension to confirm there are no remaining heading-order violations.
Full Webflow guide →Official Webflow docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find heading order — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Heading order?

Every webpage uses heading tags — H1, H2, H3, H4, H5, and H6 — to organize content into a hierarchy, like chapters and sub-chapters in a book. "Heading order invalid" means that hierarchy has a gap or jump: for example, jumping straight from an H1 to an H3, or using an H4 immediately after an H2. Screen readers and assistive technologies rely on this outline to help users navigate a page quickly. Headings should always nest in order — you can go up levels freely, but you should never skip a level going down.

Why does heading order matter?

For the roughly 1-in-4 shoppers who use assistive technology, broken heading order makes it very hard to navigate your pages — they may completely miss product sections, key offers, or checkout steps. This is a WCAG 2.1 Level AA requirement (Success Criterion 1.3.1 and 2.4.6), so non-compliance creates real legal risk under laws like the ADA (USA), the European Accessibility Act, and the UK Equality Act. Beyond accessibility, heading structure is one of the signals Google uses to understand your page's content hierarchy; a clean, logical outline helps search engines index and rank your pages more accurately. Fixing heading order is typically a quick win with immediate benefits for both users and SEO.

How do I fix heading order?

Fix heading tags so they follow a logical, sequential order (H1 → H2 → H3…) without skipping levels anywhere on the page.

Authoritative references

Related Accessibility (WCAG) issues