Technote

SEO Practical

Series Accessibility is quality Part 7 of 8

Heading structure: two h1s blur page and index alike

Headings are a document's skeleton, not a type size. Once the size you picked and the level you assigned drift apart, the page loses its table of contents.

Heading tags look like a way to make text bigger, but what they actually do is build the document’s table of contents. Screen reader users skim the headings and jump straight to what they want — the same move you make scrolling a page, performed on a list of headings.

So when the heading hierarchy collapses, those users get a document with no contents page. Search engines read the same structure, which is why the screen and the index blur together.

There are only two rules

The rules of heading structure — in practice, two lines to remember

The h1 is the line that says what the page is. It should be the title of this document, not the name of the site. Plenty of sites mark the header logo as an h1, which gives a hundred pages the same h1 sentence.

The common failure — the theme prints a second heading

Keeping one h1 in a screen you built yourself is easy. The real trouble is a theme quietly printing an extra heading of its own. We hit this while building this very site: on listing screens the theme drew its own page heading above ours, and the page stood with two h1s for a while.

Nothing looked wrong, because the content rendered perfectly, so no amount of looking would have found it. This class of problem only surfaces when you inspect the document structure. Searching for h1 in developer tools and counting the results is enough.

Five lines to check once per template, not once per page

Separate size from level

Designers meet this constantly: something is structurally an h3 but should look larger on screen, or the reverse. Changing the tag to get the size breaks the outline.

The answer is to separate the type scale from the heading level. By default a level carries its matching size, and where an exception is needed there is a separate way to change only the size. Distinguishing the two in your handoff is what stops the build from swapping tags to reach a size.

Avoid reaching for a heading tag to emphasise a single sentence, for the same reason. That sentence gets a line in the table of contents, where it has no business being.

How heading structure feeds search visibility is covered further in the SEO archive, and a markup structure review on a live site is part of the SEO work in our optimization program.

Next part

One part to go. Nobody can check all of this from scratch every time, so the finale splits the work into what tools can judge and what a person has to, and turns it into a routine.

More on this topic

All technotes
₩270,000 · Join the program