gora.
note · May 9, 2026 · 10 min read

H1: why one and how long

I'm sitting in DevTools on someone else's site. I open Elements and filter by h1. I get four highlights: the logo in the header, the hero heading, a widget heading in the sidebar, and the heading of a "Contact" block in the footer. All of them are <h1>. On every page of the site. On the homepage, in categories, on product pages — the same set everywhere.

I check Search Console: the site sits on page five for its main query. Page five. With DR 35, a decent domain age, dozens of content pages. And four H1s on every page.

That's not the only reason it's stuck there. But it's a marker. If the person who built the site didn't figure out H1, they probably didn't figure out a dozen other things either: empty alt attributes, duplicate titles, canonical confusion, broken internal links. H1 is a litmus test for markup quality.

Back in 2017, Google officially said you could use as many H1s as you want — it will figure things out. John Mueller recorded a video about it, and ever since, everyone who wants to justify a mess of headings cites that line. But "Google will figure it out" and "this is good practice" are two different things. Google will also figure out a crooked structure, broken links, and duplicated meta. That doesn't mean you should build things that way.

Over the past few months, I've cleaned up H1s on ten projects. On some it was one item in a list of fixes, on others it was the main task. The picture is the same everywhere: the worse a site ranks, the messier its headings. And vice versa.


What an H1 is

<h1> is the root heading of an HTML page. The top level in the heading hierarchy. On a page, it answers the question "what is this document about?"

H1 is not the title tag. The title lives in <head>, Google shows it in the SERP, the browser tab displays it, and a social network reads it when you paste a link. H1 lives in <body>, and a human sees it on the page itself. These are two different texts for two different places. They are often close in meaning, but they don't have to match word for word.

H1 belongs in the main content of the page — in <main>, in <article>, in the hero block. Not in <header> with menu links and a logo. Not in <aside> with widgets. Not in <footer> with contact info. If H1 is in the header, it will be the same on every page, and for Google that's a signal that every page is about the same thing. Which means — about nothing.


One or several — what Google says

The official position: you can have several. HTML5 introduced the outline algorithm — an algorithm that was supposed to let the browser automatically build a hierarchy of headings within sections (<section>, <article>, <nav>). The idea was that inside each section, <h1> would become a local heading at a level corresponding to how deeply the section was nested.

In theory, it sounds nice. In practice — the outline algorithm has never been implemented in any browser. Ever. The spec exists, support does not. Today MDN says it plainly: "do not use multiple H1s expecting the outline algorithm to work, because it doesn't."

What this means. If you place several <h1> tags expecting the browser or a search engine to carefully build a hierarchy — that won't happen. Google will read them as several root headings and try to figure out which one is the main one. Sometimes it gets it right. Sometimes it doesn't.

Next — accessibility. Screen readers (NVDA, JAWS, VoiceOver) let users navigate by heading — the user presses H and jumps between them. When there's a single H1, the structure is clear: here's the main heading, here are the sections under it. When there are four H1s, the user hears "heading level one" four times in a row and loses their bearings.

And separately — SEO tools. Ahrefs, Semrush, Screaming Frog, Sitebulb — they all flag multiple H1s as a warning. Not as a critical error, but as something that ends up in the report. If you're handing the site off to a client or presenting an audit, that's an extra yellow flag you'll have to explain.


H1 length

The sweet spot is 30–65 characters. That's an empirical number from practice. Shorter than 30 is usually too generic ("Services", "About us"). Longer than 65 starts getting cut off in snippets and loses focus.

The main thing — H1 has to match user intent. That is, what the person typed into search and expected to see when they clicked. If the query is "buy a mountain bike in New York" and the H1 says "Welcome to our store", you lose both the person and Google.

You can and should keep the main keyword in the H1. But without forcing it. "Buy a mountain bike in New York cheap with delivery" is not an H1, it's spam. "Mountain bikes in New York" — that's an H1.

In relation to the title tag: they're close, but not verbatim. The title is optimized for the SERP — that's where you often add the brand, a call to action, or an extra modifier. The H1 is optimized for the page, where the person is already on it.

More on title and description length — separately in the post on meta descriptions.


H1 → H2 → H3 structure

The heading hierarchy is the skeleton of the page. If the skeleton is crooked, the page falls apart.

H1 — one. The main topic of the page. Answers the question "what is this about". Sits near the beginning of the main content — in the hero block or right after it. Not on line three hundred after a sheet of introduction.

H2 — page sections. Usually three to seven of them. Each H2 opens a major thematic block. If you have one H2 on the page, you don't have structure, you just have a long text with a subhead. If you have fifteen H2s, you don't have a hierarchy, you have a list. If it feels like you're getting more than ten sections, that's a signal that the page should be split into two or three separate ones.

H3 — subsections inside H2. Not needed on every page. They appear when there are thematic subgroups inside a section. If there's a single H3 inside an H2, you don't need the H3 — make the H2 more specific instead. If there are ten H3s inside an H2, the section is overloaded, break it up.

H4, H5, H6 — they exist, but are used rarely. If you've made it to H4, check whether it's time to split the page in two. On a blog page, I almost never use H4. In technical documentation, in large guides — sometimes.

The main rule: don't skip levels. H1 → H3 without H2 is a break in the hierarchy. Both for screen readers (the user expects an H2, gets an H3, and gets lost) and for Google (it builds the page outline from headings, and gaps break its understanding of the structure).

And one more thing: headings are for semantics, not for size. If you need a large piece of text in the middle of the page that visually looks like a heading but semantically isn't one (for example, a pull quote), use <p> with CSS styles. Not <h2> with decorative coloring.

An SEO bonus from a clean H2 structure: long-tail queries. The H1 catches the main keyword. The H2s catch child queries — the ones a person might also have searched for, but that didn't fit into the main heading. I've seen many times how a page starts ranking for a query that literally matches one of its H2s. The H1 didn't cover that query, but the H2 did.



Common mistakes

H1 as the logo in the header. The most common one. The layout is built through a CMS, and someone wrapped <h1>Brand</h1> around the logo in the header template. On every page of the site, the H1 is "Brand". The homepage, a product page, the "About us" page — the same H1 everywhere.

Empty H1. I've seen this too: <h1></h1>, <h1>&nbsp;</h1>, <h1><img src="logo.png"></h1> with no alt. The screen reader announces "heading level one" and then silence.

Multiple H1s from different blocks. Hero — <h1>, sidebar widget "Popular" — <h1>, contact form in the footer "Get in touch" — <h1>. Each developer put their own H1 in, and no one reconciled them.

H1 with an emoji at the start. <h1>🔥 Best deals</h1> — some screen readers skip the emoji, others read it as "fire". In Google's SERP, such H1s also look strange if Google decides to use them in a snippet instead of the title.

H1 doesn't reflect the page content. A classic: a page about refrigerators with an H1 that says "Home appliances in our store". Too generic. Google won't understand what the page is specifically about. The user won't understand whether they landed where they wanted to.

Too long an H1. Over 80 characters — Google cuts it off in snippets, the screen reader takes longer to read it, on mobile it wraps onto three lines. If you can't fit the main idea into 65 characters, the page has too many ideas — split it in two.

H1 copies the title tag verbatim. Not a mistake, but a missed opportunity. H1 and title have different roles — use both. In the title, you can stuff the brand and a call-to-action for the SERP click; in the H1, a clean wording aligned with user intent.

H1 as a question the page doesn't answer. "How to choose a laptop?" — and the page is a catalog of 200 models with no explanations. The H1 set an expectation, the content didn't meet it. The person leaves, behavioral metrics drop, rankings sag.

H1 hidden under display: none. I've seen that too. Someone read that Google likes H1s, put one on the page, but it didn't fit visually — so they hid it with CSS. Google sees this and interprets it as a cloaking attempt. Better to not have one at all than to do this.


How to check manually

You open the site in Chrome, press F12, go to the Console, and paste:

document.querySelectorAll('h1').forEach(h => console.log(h.textContent))

You get a list of every H1 on the page. If there's more than one — there's a problem. If there's one but it's empty — also a problem. If there's one and it's meaningful — good.

A broader version — look at the full hierarchy:

document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => console.log(h.tagName, h.textContent.trim()))

This outputs the full heading structure in order. You can immediately see whether there are level gaps, whether there are any H2s at all, whether there are empty headings.

For a sweep across the whole site — Screaming Frog or Sitebulb. They crawl the whole site and produce a report: where there are how many H1s, where they're empty, where there are duplicates. The free version of Screaming Frog is enough for a site up to 500 pages.


Bottom line

One H1 per page. Length 30–65 characters. In the main content, not in the header or footer. Matches user intent. H2 → H3 hierarchy without gaps. Semantics — for meaning, size — through CSS.

This isn't about "Google requires it". Google forgives a lot. This is about overall markup hygiene. Sites that have H1 in order usually rank better — not because H1 is decisive, but because where people sorted out H1, they usually sorted out everything else too.

H1 is five minutes of checking in DevTools. Two minutes for the console command, three for reading the result. If you've never looked at your H1s — take a look today.

The full list of factors I run through during an audit — in the post on 30 SEO factors for 2026.

H1: why one and how long · hiregora.com