Missing H1 Tag Example
Moon gentlemen keep their heads in their hands, so at dinner I counted two at one chair and at the next chair none.
The short answer
- What it is
- A missing H1 tag means the HTML of a page has no H1 element at all. The page may still look as if it has a heading, if the big text is styled with something else.
- Why it matters
- The H1 tells readers and machines what the page is about. People using screen readers often jump to it first, and search engines read it as a strong hint about the topic.
- How a crawler should report it
- Report an H1 issue when the on-page H1 count is 0, and show the count in the H1 field. Use the same warning when the count is more than 1, and do not flag a page with one H1 and several H2s.
- Live examples
/lab/h1-issues/none/(positive)/lab/h1-issues/two/(positive)/lab/h1-issues/near-miss/(near miss)
Pages that open without a top-level heading
A missing H1 tag is often hidden by styling. A designer makes the top line of a page large and bold, but the code uses a <div> or a <p>. A page builder may set a heading level by default, and that default may be H2. Some templates place the page name only in an image or a banner. An app may also insert the heading with a script that a crawler does not run.
To a sighted visitor, the page can look complete. A browser does not warn about the gap, and the HTML standard does not require an H1. The people who notice are those who use screen readers, since they move through pages by heading. They lose the quick way to reach the start of the content. Search engines can rank a page without an H1. Google has said that pages can do fine without one, but a clear heading still helps it understand the page.
To detect it, count the <h1> elements in the HTML. Count them in the rendered page as well, if the site relies on scripts. A count of 0 is the issue. Do not guess from font size, since styles tell you nothing about structure. A browser's accessibility panel will show the heading tree of a page, which is a quick way to check by hand.
To fix it, change the element that holds the main heading into an <h1>. You can keep the same look with CSS. Make the text a plain description of the page, close in meaning to the title tag. If the page name is in an image, use real text instead. Then update the template so that every new page gets the heading by default. Run a crawl to confirm that each page has one.