Empty heading
Quick winFound on 41% of audited stores.
Find every empty heading tag on your store and add visible, descriptive text (or remove the tag entirely) so screen readers and search engines can interpret your page structure.
What it is
A heading tag — `<h1>`, `<h2>`, `<h3>`, and so on — is supposed to label a section of a page, like a chapter title in a book. An "empty heading" is one of those tags that exists in your page's code but contains no readable text: it might be completely blank, hold only a spacer character, or contain an icon with no text alternative. Because the tag is there but says nothing, screen readers announce "heading" to a blind or low-vision visitor and then go silent — which is confusing and often disorienting.
Why it matters
Accessibility & legal risk: WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels) require headings to be meaningful. Empty headings fail these criteria, exposing your store to accessibility complaints, ADA/AODA/EAA legal action, and — in many jurisdictions — potential litigation. *SEO:* Search engines use heading tags as strong signals for what a page is about. Empty headings dilute the heading hierarchy and give crawlers nothing useful, which can hurt rankings for the sections those headings are meant to introduce. *Conversions:* A broken page structure frustrates assistive-technology users, who represent roughly 15–20 % of the global population, and causes them to abandon your store.
How to fix it
- Audit your pages: run an accessibility scan (e.g. axe DevTools browser extension) or inspect your page source to locate every `<h1>`–`<h6>` tag that contains no visible text.
- For each empty heading, decide whether it is intentional (decorative separator, icon-only divider) or a real section title that was accidentally left blank.
- If it should have text: open the page or template and type a short, descriptive label that accurately names the section it introduces (e.g. 'Featured Products', 'Why Shop With Us').
- If it is purely decorative and carries no structural meaning: remove the heading tag entirely and use a `<div>` or `<p>` with CSS styling instead, or — if the heading wraps an icon that conveys meaning — add an `aria-label` attribute or visually-hidden `<span>` with descriptive text.
- If you must keep the tag but want the text invisible on screen, add a visually-hidden CSS class (text visible to screen readers but not to sighted users) rather than leaving the tag empty.
- Re-run your accessibility scan and confirm zero 'empty-heading' violations before publishing.
Fix it on your platform
Pick your platform for the exact steps.
How to fix empty heading on Shopify
- In your Shopify Admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Search across template files (Ctrl+F in the code editor, or use the 'Search files' box) for `<h1`, `<h2`, `<h3`, `<h4`, `<h5`, `<h6` to find heading tags.
- Identify any that have no text between the opening and closing tag (e.g. `<h2></h2>` or `<h2> </h2>`).
- Add meaningful visible text inside the tag, or replace the tag with a non-heading element (`<div>`, `<p>`) if no heading is needed.
- If the heading wraps a Liquid variable that may render empty (e.g. `{{ section.settings.title }}`), add a conditional: `{% if section.settings.title != blank %}<h2>{{ section.settings.title }}</h2>{% endif %}`.
- For sections built in the Theme Customizer (Online Store → Themes → Customize), check each section's settings panel — many themes expose a 'Heading' text field; ensure it is filled in or the heading is hidden when blank.
- Save, then verify with the axe browser extension or Shopify's built-in Lighthouse audit (Customize → … → Check performance).
How to fix empty heading on WooCommerce
- In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- Open the relevant template file (e.g. `archive-product.php`, `single-product.php`, `page.php`) and search for empty `<h1>`–`<h6>` tags.
- Add descriptive text directly, or wrap the heading in a PHP conditional: `<?php if ( $heading ) : ?><h2><?php echo esc_html( $heading ); ?></h2><?php endif; ?>`.
- For pages built with Elementor or other page builders: open the page editor, click the offending Heading widget, and type text into the 'Title' field — or delete the widget if it serves no purpose.
- For Gutenberg block themes (Full Site Editor): go to Appearance → Editor, open the template or template part, locate the Heading block, and add text or delete the block.
- Install the 'WP Accessibility' plugin (Toolbar → Tools) for ongoing detection of empty headings site-wide.
- Re-check with the axe DevTools browser extension.
How to fix empty heading on BigCommerce
- In your BigCommerce Control Panel, go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
- Use the file search to locate Handlebars template files (`.html` under `templates/`) containing empty heading tags.
- Add literal text or a template variable inside the tag, e.g. `<h2>{{category.name}}</h2>`.
- Wrap dynamic headings in a Handlebars conditional to avoid rendering an empty tag: `{{#if category.name}}<h2>{{category.name}}</h2>{{/if}}`.
- For Page Builder content (Storefront → Pages → Edit → Page Builder): click the Heading widget, type visible text in the Content field, or delete unused heading widgets.
- Save and preview; validate with the axe browser extension.
How to fix empty heading on Wix
- Open the Wix Editor and navigate to the page flagged with the empty heading.
- Click on the element that appears as an empty or invisible heading (it may look like a blank text box).
- In the toolbar, check the element type — if it is set to 'Heading 1–6' in the Text Settings panel, either type meaningful text into it or change its role to 'Paragraph' if no heading is needed.
- To change the HTML role of a text element in Wix: select the element → Settings (gear icon) → Accessibility → set 'Heading level' to 'None' if the text is not a true heading.
- Alternatively, delete the empty text element entirely if it adds no value.
- Use Wix's built-in Accessibility Wizard (Dashboard → Settings → Accessibility Wizard) to scan for remaining issues.
How to fix empty heading on Squarespace
- Open the Pages panel and edit the page containing the empty heading.
- In the page editor, click the block that contains the empty heading text (it will appear as a blank Text or Markdown block).
- Type meaningful text into the block, or change the heading style to 'Normal' / 'Paragraph' in the text formatting toolbar if a heading is not appropriate.
- If using Code Blocks with raw HTML: click the block → Edit → find empty `<h*>` tags and add text or remove the tags.
- Delete the block entirely if it serves no structural purpose.
- After saving, validate the page with the axe DevTools browser extension in your browser.
How to fix empty heading on Webflow
- Open your Webflow project in the Designer and navigate to the page or component with the empty heading.
- In the Navigator panel (left sidebar), find the Heading element with no text node child — it will show as 'Heading' with no label.
- Double-click the Heading element on the canvas and type descriptive text.
- If the heading exists only for layout/styling (e.g. an empty spacer), select it, open Element Settings (D key), and change the Tag to `div` or `p` instead of `h1`–`h6`.
- For CMS-bound headings that may be empty when a field is blank: in the Collection template, bind the Heading to the CMS field, then in the element's settings add a Conditional Visibility rule to hide the Heading when the field is empty.
- Publish and verify with the axe DevTools browser extension.
How to fix empty heading on Adobe Commerce (Magento)
- Connect to your server via SSH or SFTP and navigate to your active theme directory: `app/design/frontend/<Vendor>/<Theme>/`.
- Search template `.phtml` files for empty heading tags: `grep -rn '<h[1-6][^>]*></h[1-6]>' .`
- Open the relevant `.phtml` file and add a text string or a PHP variable (e.g. `<h2><?= $block->escapeHtml($block->getTitle()) ?></h2>`).
- Wrap dynamic headings in a conditional to prevent rendering when the value is empty: `<?php if ($block->getTitle()): ?><h2><?= $block->escapeHtml($block->getTitle()) ?></h2><?php endif; ?>`
- For CMS Pages/Blocks (Admin → Content → Pages or Blocks): open the page, switch to HTML source mode in the WYSIWYG editor, locate empty `<h*></h*>` tags, and add text or remove them.
- Clear the Magento cache (System → Cache Management → Flush Magento Cache) and verify with the axe DevTools browser extension.
How to fix empty heading on Shopify Plus
- Follow all standard Shopify steps above.
- For checkout customisation, go to Settings → Checkout → Customise and check heading blocks inside checkout sections for empty content.
- In Launchpad or custom scripts, search for dynamically injected heading tags that may render empty based on logic conditions — add a fallback text string or conditional rendering guard.
How to fix empty heading on Wix Studio
- In Wix Studio, open the relevant page and open the Layers panel from the left toolbar to see every element, including hidden ones.
- Identify any Text elements set to Heading style (H1–H6) that contain no text. Click each and either add descriptive text or delete the element.
- For component/section templates reused across pages, edit the base component and fix the heading there so the fix propagates everywhere it is used.
- Use the built-in Accessibility Wizard (Site → Accessibility Wizard) to surface and step through remaining issues, then republish.
How to fix empty heading on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template structure, CLI commands, and admin panel paths are identical for the open-source edition.
Does your site have this issue?
Run a free SEOLZ scan to find empty heading — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Empty heading?
A heading tag — `<h1>`, `<h2>`, `<h3>`, and so on — is supposed to label a section of a page, like a chapter title in a book. An "empty heading" is one of those tags that exists in your page's code but contains no readable text: it might be completely blank, hold only a spacer character, or contain an icon with no text alternative. Because the tag is there but says nothing, screen readers announce "heading" to a blind or low-vision visitor and then go silent — which is confusing and often disorienting.
Why does empty heading matter?
**Accessibility & legal risk:** WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels) require headings to be meaningful. Empty headings fail these criteria, exposing your store to accessibility complaints, ADA/AODA/EAA legal action, and — in many jurisdictions — potential litigation. **SEO:** Search engines use heading tags as strong signals for what a page is about. Empty headings dilute the heading hierarchy and give crawlers nothing useful, which can hurt rankings for the sections those headings are meant to introduce. **Conversions:** A broken page structure frustrates assistive-technology users, who represent roughly 15–20 % of the global population, and causes them to abandon your store.
How do I fix empty heading?
Find every empty heading tag on your store and add visible, descriptive text (or remove the tag entirely) so screen readers and search engines can interpret your page structure.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN