H1 heading missing or empty
What it is
The page has no <h1> element, or none of its H1s holds text and the first one holds no image with alt text either. The H1 is the main heading of the page: it tells a visitor, a screen reader user and a crawler what the page is about before they read any further.
Why it matters
Screen reader users can jump straight to the main heading to find where the content starts, and W3C’s headings tutorial treats the rank 1 heading as the most important one on the page. Google lists heading elements among the sources it uses for title links , so without an H1 it has one clear signal fewer. Tools that summarize a page, AI assistants included, are likely to lean on the main heading to name its topic.
How Asky checks it
Asky counts the <h1> elements anywhere in the page’s raw HTML. A heading added by JavaScript is not seen, and neither is text styled as a heading or marked with role="heading". The page is reported when there is no <h1>, or when every H1 is empty after trimming whitespace (an inline SVG’s <title> or <desc> is not text) and the first holds no image with alt text. An empty H1 before one with text is skipped, though it counts toward more than one H1. An H1 holding only an image with alt text, or an SVG with a title, is reported as H1 with only image alt text instead. The heading order check is skipped while this is reported.
Reported as an error with high severity.
How to fix it
- Open the page source (View Source, not the element inspector) and search for
<h1. - If there is none, make the page’s main visible heading an
<h1>: set the heading’s tag to H1 in Webflow, pick H1 for the heading block in your WordPress editor or page builder, or have your front-end template render the Sanity title as an H1. - If the heading only appears after JavaScript runs, render it on the server or at build time so it is in the HTML.
- If an H1 exists but is empty, such as an empty wrapper in the header or a slider, put the page’s heading text in it, or remove it and make the real heading the H1. An empty H1 left next to the real one is reported as more than one H1.
- Put the H1 before any other heading, keep it to 70 characters or fewer, and word it differently from the page title. Otherwise it is reported as not the first heading, as over 70 characters, or as the same as the title.
Example
On https://example.com/blog/pricing-guide the article title was styled text, not a heading:
<!-- Before -->
<div class="post-title">How to price a SaaS product</div>
<!-- After -->
<h1 class="post-title">How to price a SaaS product</h1>