Heading Headaches: Balancing Semantics and SEO

We here at SitePoint have been doing a bit of search engine optimization around the site. When we consulted the experts in this stuff, some of the advice we received went against rules of “good HTML” that we’d previously been following. It turns out, for many people, the rules have changed.

The core issue that we’ve wrestled with is heading structure — how we use the <h1> to <h6> tags on the site. The last time I wrote about this, I advised that you should never skip heading levels. For example, an <h1> followed by an <h3> skips the <h2> heading level, which is bad. That’s still true — you should avoid having gaps in your heading structure.

Where it’s changed is that search engines like Google seem to reward pages that use a single <h1> tag for the title of the unique content on the page. This raises the question: if you can only have a single <h1> and it comes after elements like your site’s navigation, what tags do you use for the headings that must come before the <h1>?

After wrestling with this issue himself, friend of SitePoint Roger Johansson recently published his own findings. In short, until such time as standards like WAI-ARIA enable us to label page elements like navigation without headings, we must use heading structures that begin with <h2> (instead of <h1>) for “boilerplate” content like navigation menus, headers, footers, and sidebars.

So now, this is okay:

<h2>Site Navigation</h2>
  …
<h1>Content Title</h1>
  …
<h2>Related Links</h2>

The newly minted WCAG 2.0 accessibility standard even blesses this approach in its section on headings, the example for which uses headings in exactly this way.

These things are always changing, and we can expect browser support for standards like HTML5 and WAI-ARIA to again change the rules surrounding heading tags in the next few years. For now I will rest easy using a single <h1> for my content’s title, and letting the <h2>‘s fall where they may.