Can You Use More than One H1 Tag on a Web Page?

H1 Tag

I’d just written an SEO report for a client who had been using an H1 tag in multiple places per page on their site—something I see fairly often—and as usual, I made sure to call this out in my report.

You should only ever have one H1 tag per page, I wrote. My normal elaboration goes like this: Think of your header tags like a topic hierarchy. The primary header, or H1, should encompass the main concept or topic of the page. H2s are subheads that support that topic. H3s are subheads that support topics under H2s, etc. Because there’s only supposed to be one topic per page, each page should only have one H1.

“But what about long-form webpages?” Aart, the creative director, asked. It wasn’t really a question. More of a challenge, really. But it got me thinking. (Mission accomplished, Aart.)

Web developments and designs are always changing. Attention spans are shortening. Pages are getting longer and fancier, with a bigger emphasis on user experience and eye-catching design. We’re trying to make it easier for the user to find what they need in fewer clicks. All those different pages that were crucial for SEO value don’t always work with contemporary designs.

Anyone who works in search engine optimization knows that it’s already pretty hard to find the right balance between SEO and UX, but how can you do it when your design dictates more than one topic on a page? How do you make solid SEO-related decisions that work with new user experiences?

Well…the truth is, you actually can use more than one H1 per page—but only if you’re “up to code,” so to speak.

First: Make sure you’re using HTML 5.

Unlike previous versions, HTML5 is equipped with the capability to code multiple sections into a webpage. Search crawlers can process these tags and understand that the content inside is unique to that section, and not necessarily pertaining to the overall topic of the page (more on that below). Older versions of HTML don’t give the same clues in a way that makes sense to a crawler in terms of optimization.

Second: You’ve gotta get your tags right.

In terms of SEO, there are two different types of HTML5 tags that can help crawlers dissect your page: <section> tags and <article> tags. When used correctly, these tags help crawlers understand that different topics exist on a single page. A <section> tag indicates that the content inside that tag relates to a single theme, and an <article> tag indicates a piece of content that could stand on its own, like a blog post or a news story.

For sections, think of it like this: you have a page about SEO Fundamentals that’s divided into three separate, robust sections about Content, Site Architecture and Link Building. You don’t want to have three separate pages about these items, so you put them all on the same page. Each is related to the main topic – SEO Fundamentals – and each topic could be considered just as important as the others. They all carry the same weight.

For articles, on the other hand, think about a blog that scrolls infinitely. In other words, when you get to the bottom of the page, more articles are loaded so you can keep on scrolling and reading. It can feature a variety of topics, from digital marketing to restaurant reviews (clearly our theoretical blog writer has a lot of diverse interests). Each one of these articles can stand on its own, away from the context of the page.

Third: Make sure you’re only using one H1 tag per section.

If you think about it, the same header tag hierarchy that you’d use for a single page also applies to a single section or article. So you’d use one H1 to capture the topic of the section; H2s to designate a subtopic of the H1; H3s to designate subtopics of H2s, etc. Just because you’re using more than one H1 per page doesn’t mean you get to escape the hierarchical logic after all!

The Final Verdict

So can you use more than one H1 tag on a page?

Yes if you can properly code out sections or articles on your page, and you’re following W3C best practices.

No if you’re using a version of HTML that predates HTML5, or if you’re using header tags to style different parts of your site rather than make a logical page structure. (Yup, it happens.)

Not sure if your site structure is up to snuff? Contact the experts at Flying Cork!