Headings With Hierarchical Structure An “Awesome Idea”

Google’s John Mueller discussed heading elements with a member of the SEO community where he affirmed the usefulness of using hierarchical structure when using heading elements.

Background Context to What Mueller Said

Heading elements <H1> – <H6> are supposed to be used to indicate what a section of a webpage is about.

Furthermore the heading elements have a ranking order, with the <H1> being the highest rank of importance and the <H6> being the lowest level of importance.

The heading element purpose is to label what a section of content is about.

HTML specifications allow the use of multiple <H1> elements. So, technically, using more than one <H1> is perfectly valid.

Section 4.3.11 of the official HTML specifications states:

“h1–h6 elements have a heading level, which is given by the number in the element’s name.

If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.”

Nevertheless, using more than on <H1> is not considered a best practice.

The Mozilla developer reference page about the use of headings recommends:

“The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

…Avoid using multiple <h1> elements on one page

While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document’s <title> element).”

John Mueller has previously said that it doesn’t matter if a webpage uses one <H1> or five <H1> headings.

The point of his statement is that the level of the heading isn’t as important as how they are used, with the best practice being the use of  headings for indicating what a section of content is about.

What Mueller Said on Twitter

A member of the SEO community was joking around and gently ribbed Mueller about using more than one H1.

He tweeted:

John Mu: “Your site is going to rank perfectly with no H1 tags or with five H1 tags,”

Me: pic.twitter.com/LEj59KfRBD

— Deji Luminous (@deji_luminous) February 2, 2023

The SEO followed up by sharing how he preferred using the best practices for heading elements by using only one <H1>, to denote what the page is about and then using the rest of the headings in order of rank, give a webpage a hierarchical structure.

A Hierarchical structure communicates sections of a webpage and any subsections within each section.

He tweeted:

“I’m too traditional with header elements. (HTML 4 for Life! lol)

I’d still recommend using just one H1 element on a page.

I patiently go back to pages to implement header hierarchy for fun.”

John Mueller tweeted his approval in response:

“I think that’s an awesome idea & a great practice.

Header hierarchy is not just useful to Google, it’s also important for accessibility.

(Google still has to deal with whatever weird things people throw up on the web, but being thoughtful in your work always makes sense.)”

Hierarchical Page Structure

In the early days of SEO, <H1> used to be counted as an important ranking factor, one that was more important than an <H2>.

So, back then, one always put their most important keywords in the <H1> in order to signal to Google that the page was relevant for that keyword.

H1 used to have more ranking power so it was essential to use the <H1> to help rankings.

Google’s algorithm was using keywords as a way to “guess” what a webpage was about.

Keywords in the anchor text, keywords in the title tag and keywords in the <H1> helped Google guess what a page was relevant for.

But nowadays, Google doesn’t have to guess.

It is able to understand what sections of a webpage are about, and consequently, what the entire webpage is about.

Despite those advances, many SEOs still believe that using an <H1> is some kind of magic ranking factor.

Headings are no longer about shouting what keyword you want to rank for.

The role of heading elements are now about telling search engines what a section of content is about.

Each section of a content is generally about something specific.

Heading tags make it easier for search engines to know what a page is about.

And that helps them rank the page for the topic.

And according to the official HTML specifications, that’s technically the proper way to use heading elements.

Lastly, Mueller mentioned a quality of the heading element as a way to better communicate for accessibility reasons, like for people who use screen readers.

The official HTML specifications say:

“Descriptive headings are especially helpful for users who have disabilities that make reading slow and for people with limited short-term memory.

These people benefit when section titles make it possible to predict what each section contains.”

So thank you John Mueller for calling attention to the benefits of using headings with a hierarchical structure, for calling attention to how hierarchical structure is useful for Google and for accessibility.

Featured image by Shutterstock/Asier Romero