Empty H1 Tag Example
A Moon dignitary once left his head at the tailor's and arrived as a very handsome empty collar.
The short answer
- What it is
- An empty H1 tag is an H1 element with no text in it. It may be truly blank, or it may hold only an image, even one with alt text.
- Why it matters
- The element is present but says nothing, so a text parser gets no topic from it. Screen reader users can also land on a blank heading.
- How a crawler should report it
- Report an H1 with no text when the on-page H1s are empty or hold only an image with alt text. Do not raise it for an H1 that has an image and words together.
- Live examples
/lab/h1-without-text/empty/(positive)/lab/h1-without-text/logo/(positive)/lab/h1-without-text/near-miss/(near miss)
A main heading that exists in code but holds no words
An empty H1 tag usually comes from a template that prints the element whether or not it has data. If the CMS field for the headline is blank, the code outputs <h1></h1> and moves on. A second common cause is a logo placed in the H1, with no words next to it. A third is a heading filled by a script that did not run. Some older designs also hide the text and show a background image in its place.
A browser shows nothing for a blank heading, though it may still leave a gap in the layout. Accessibility tools treat an empty heading as a fault, because a screen reader may announce a heading with no name. An image with good alt text does give a heading an accessible name. Even so, a plain text parser sees no words there. Search engines do read alt text, but a logo's alt text rarely says what the page is about.
To detect it, find each <h1> and extract its text. Strip tags and trim spaces, including non-breaking spaces. If nothing is left, the H1 has no text. Keep this separate from the issue of an H1 count of zero, since the fix is different. An H1 that holds an image and real words is fine and should pass. Compare the raw and rendered HTML if the site fills in headings with a script.
To fix it, fill the H1 with a plain description of the page. If a template can print a blank heading, add a check so that it falls back to the page title or leaves the element out. Move the logo into a normal link in the header, and let the H1 hold the page topic. Make the CMS field required for new pages. Once the template is fixed, crawl again to confirm the blank headings are gone.