Check your heading structure for accessibility and SEO

SiteCurl checks three things about your headings on every page. First, it confirms there is exactly one H1 tag. Second, it checks that heading levels go in order with no gaps: H1 then H2, then H3 if needed, with no skipped levels. Third, it flags pages with multiple H1 tags or no H1 at all.

A page that jumps from H2 to H4, skipping H3, gets flagged. A page with two H1 tags gets flagged. A page with no H1 gets flagged. SiteCurl checks every page in your scan and reports the specific heading that breaks the sequence.

Headings are not just visual elements. They are the structural skeleton of your page. Think of them like an outline. The H1 is the title. H2 tags are major sections. H3 tags are subsections within those. When the structure is correct, both humans and machines can understand how your content is organized.

Screen reader users depend on this structure more than anyone. They cannot scan the page visually. Instead, they use keyboard shortcuts to jump between headings. VoiceOver, JAWS, and NVDA all let users press a key to hear the next heading. If the heading levels skip, the user thinks they missed a section. If there is no H1, they do not know what the page is about. If there are two H1 tags, they cannot tell which one is the main topic.

According to the WebAIM screen reader user survey, 67.5% of screen reader users navigate pages by headings. It is the most common navigation method, more common than links, landmarks, or search. When heading structure is broken, the most-used navigation tool on your page stops working correctly.

Search engines use heading structure as a content signal. The H1 tells Google what the page is about. H2 and H3 tags signal subtopics. A clear hierarchy helps Google understand the scope of your content and match it to relevant search queries. It is not a strong ranking factor on its own, but it adds to the overall quality signal that affects how Google evaluates your page.

The most common source of heading problems is CMS themes. Designers choose heading levels based on visual size: 'this should look big, so use H2.' 'This is smaller, use H4.' The result is a heading structure that looks right but reads wrong to screen readers and search engines. The fix is simple: use CSS for visual size and heading tags for content structure.

Screen readers use headings to build an outline of your page. Users jump between headings to find what they need. A skipped level breaks that outline and makes content hard to navigate.

Search engines use heading structure too. A clear H1 tells them what the page is about. Nested subheadings show how sections relate to each other. Broken heading order is a missed signal that can affect how Google understands your content's depth.

There is also a readability benefit for all visitors. Pages with a clear heading hierarchy are easier to scan visually. Readers skim headings to find the section they care about. If the headings are out of order or missing, the page feels harder to navigate even for sighted users.

Content-heavy sites (blogs, documentation, knowledge bases) have the most to lose from broken headings. Long articles with proper heading structure are easy to navigate. The same articles without it feel like a wall of text. Screen reader users may give up entirely on a long page with no heading structure.

E-commerce sites often have heading problems on category and product pages. The product name might be an H3 instead of an H1 because the theme template puts the category name in an H1. Every product page on the site ends up with the wrong main heading.

Sites built with page builders (Elementor, Divi, Webflow) frequently have heading issues because content editors choose heading levels for their visual appearance rather than their semantic meaning. A section title that 'looks like an H2' may actually be coded as an H4 because the editor liked the smaller font.

Agencies building sites for clients should check heading hierarchy before delivery. A client who runs an accessibility audit and finds heading issues will question the quality of the build.

Step 1: Add or fix the H1. Every page needs exactly one H1 that describes the main topic. On a blog post, it is the post title. On a product page, it is the product name. On the home page, it is your primary value proposition.

Step 2: Check the heading sequence. After the H1, use H2 for major sections. Within an H2 section, use H3 for subsections. Never skip a level. If you do not need H3, go from H2 to the next H2. Do not jump from H2 to H4.

Step 3: Fix CMS templates. In WordPress, check your theme's template files. Look for hard-coded heading levels in header.php, single.php, and page.php. In page builders like Elementor or Divi, open the heading widget settings and change the HTML tag from whatever it defaulted to the correct semantic level.

Step 4: Separate visual size from heading level. If you want a heading to look smaller, do not change it from H2 to H4. Keep it as H2 and use CSS to change the font size. Tailwind example: class='text-lg' on an H2 makes it look like body text while maintaining correct structure.

Step 5: Check sidebar and footer headings. Widgets in sidebars and footers often use H3 or H4 tags that break the page's heading flow. These should use lower heading levels that fit within the page's overall hierarchy.

Choosing heading level by appearance. An H3 is not 'the medium-sized heading.' It is 'a subsection of an H2.' If you want different visual sizes, use CSS classes. Heading tags are for structure, not style.

Putting the site name in an H1 on every page. Some themes wrap the site logo or name in an H1 tag on every page. This means every page's primary heading is 'Company Name' instead of the page topic. The site name should be a link or a div, not an H1. The H1 should describe that specific page.

Using headings for visual emphasis. Bold text that is not a section heading should not use heading tags. A paragraph that you want to stand out should use <strong> or a CSS class, not an H2. Headings should only be used for content that actually introduces a new section.

Ignoring headings in dynamic content. User-generated content, CMS blog posts, and embedded widgets may add headings at the wrong level. A blog post editor might type an H3 as the first heading in the post body, which creates a skip if the post title is an H1. Set editor defaults to start at H2 within post content.

After fixing headings, run another SiteCurl scan. The heading hierarchy findings should disappear. For a quick manual check, install the HeadingsMap browser extension (available for Chrome and Firefox). It shows the heading structure of any page as a tree, making skipped levels and missing H1 tags immediately obvious.

To test with a screen reader, activate VoiceOver (Cmd+F5 on Mac) or NVDA (free for Windows). Press the heading navigation shortcut (VO+Cmd+H in VoiceOver, H in NVDA) to step through headings on the page. If the levels skip or the H1 is wrong, you will hear it immediately.

For a developer-focused check, open the browser console and run: document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => console.log(h.tagName, h.textContent.trim().substring(0,50))). This prints every heading on the page with its level and text, making structure problems easy to spot.

Clean heading order helps both screen readers and search engines. One H1 per page sets the topic. H2 and H3 below it show how sections fit together. Fix the skipped levels, and your pages become easier to read and easier to rank.