Headlines – Balancing Google and Accessibility

This past week Xander and I got into a fairly heated debate regarding the use of headlines in sections of a page other than the main content (i.e. Sidebars, Footers, etc.).


We each came at the problem from a different angle, but soon found that we were searching for the same end-goal. This meant it was time to put the baseball bats and brass knuckles away and come up with a solution. We knew what we wanted our pages to accomplish:

  • Full accessibility to all users
  • Easily indexable content for Google
  • Meaningful, semantic mark-up

Xander’s Side

Sidebar "Headlines"
Sidebar “Headlines”

The entire debate kicked off when Xander asked me to remove all the headlines from the sidebar and footer of one of our sites. At first I thought nothing of this and walked back to my desk, until I realized I had no idea what to put these “section titles” into if not an <h> tag. I went back for some more explanation.

Xander comes from a pretty solid and successful background of Internet Marketing; his main concern is making pages as accessible and relevant to search engines as possible.

He began to explain that if an <h1> is the main subject of a page, then it only makes logical sense that every other headline on the page would be relevant to the <h1>. This top-down approach has worked best for SEO.

The problem occurs when you have page with an <h1> of say, “Eagles”. Your logical <h2>s could be things like “Bald Eagles”, “Golden Eagles” or even “Eagle Habitats” and “Things Eagles Eat”.

But what do you do for a section in the sidebar, which may be full of sitewide links (like Get Involved?) Does “Get Involved” directly correlate to “Eagles”? Maybe slightly, but not enough for it to warrant an <h2> using top-down thinking.

This means we should avoid using any sort of <h> tag, so Google doesn’t mistake it for a section about “Eagles”.

My Side

Xander’s points made a lot of sense to me, but I come from a slightly different school of thought. I try and focus on making pages accessible to all users, no matter their platform or browser capabilities. Also being the person who does a lot of the building out of sites, I do my best to make sure that each tag has viable, semantic meaning. This totally burnt out our initial thought to just wrap these sidebar headlines in <p>, which are obviously saved for a paragraph.

I made the point that to me, and consequently the user, if the content is on the page, it must be relevant to the user in some shape or form, otherwise it would not have been included. Just because “Get Involved” doesn’t directly reflect “Eagles” it may be relevant to the site or company. Thus the plot thickens.

Looking at the situation head-on, we came up with plenty of solutions which would take away from some form of audience.

We could start changing our <h1>s to reflect more of a site-wide objective, in order to make all sections relevant, but Google wouldn’t rank us for specific terms as well.

We could dynamically bring that content in using Javascript so that web-crawlers wouldn’t see the “irrelevant” sections, but then users with javascript disabled would also miss out.

Finally we found, what we believe to be, a happy comprimise.

The Solution… For Now

Since you can’t dispute the fact that these other sections are content on the page, there needs to be some way to distinguish what they’re about. We ruled out using headline tags in order to bring maximum relevancy to the body content. This meant we needed a tag to differentiate the subject of a sidebar section.

We settled with using a definition list.

Although the <dl> may not be the most sematic tag, it brings great benfits to both fronts. We can use things like <dl id="sidebar"> or <dl class="get-involved"> to separate the content from the main article.

The definition list then has two elements, a term, and a definition. We can place the “headline” in the term, to give what the section is about, and then place it’s subsequent content in the <dd>.

Now every user will see these as separate sections, with subjects to describe them. Headlines will be reserved for only page-specific content.

Looking to the Future

Looking at where the web is going in the next few years, we have reason to be very excited for the implementation of HTML5.

We found that a large portion of our problem is due to the fact that the only tag we have to separate content sections on the page is a div, which holds no real meaning other than a separation of content.

You can’t use a div to say that one section is more important or relevant to the user than another.

HTML5 has included loads of wonderful, semantic tags such as <article>, <aside>, <footer>, and <section> (just to name a few).

Our hope is that as search engines pick up on this, web crawlers will look and evaluate healines within article tags, and place higher value on an <h1> there, than one found in an <aside> or <footer>.

So that’s what we came up with, and it seems to work pretty well for us. Do you have other ideas to accomplish our goal? Any information on HTML5 and search engines? Don’t be a square, share it!

Tags: accessibility, headlines, html5, markup, semantics, usability