H1 tag: one per page, and a heading order that makes sense

The H1 tag is the main heading of a page, the <h1> element that names what the page is about, and each page should have exactly one, followed by H2s for sections and H3s inside them without skipping a level. The H1 is not a meta tag, but it works hand in hand with the title in our map of meta tags for SEO: Google may use it as your title link, and it is the first thing a visitor and a screen reader read after the click. Two problems show up on almost every site we check: more than one H1 (usually the logo plus the page title), and outlines that jump from H2 straight to H4 because someone wanted smaller text. This guide shows how to find both, what to change in the theme or editor, and how to keep the size of a heading separate from its level.

Quick answer

• One <h1> per page, naming what this page is about: the product name, the article headline, the service.
• <h2> for each main section, <h3> for parts inside a section. Never skip a level on the way down (H2 → H4). Going back up (H4 → H2) is fine.
• Pick the level by structure, the size by CSS. A small heading can be an H2; a big slogan can be a <p> with a class.
• The <title> is for the search result, the H1 is for the visitor on the page. Related, not identical.
• Check the theme first: a site name or logo wrapped in an H1 on every page is the most common cause of two H1s.
• Run the SEO audit on a few page types and read the heading sequence in the technical detail.

Why heading tags matter

For readers. Most visitors scan before they read. Clear headings in a predictable hierarchy let them find the section they came for (delivery times, pricing, the size guide) in a couple of seconds.

For screen reader users. Headings are the main way blind visitors move through a page. In NVDA and JAWS, pressing H jumps to the next heading and 1 to 6 jump to the next heading of that level; VoiceOver's rotor and NVDA's elements list show all headings as a list. In WebAIM's tenth Screen Reader User Survey (2024), 71.6% of respondents said they first navigate by headings to find information on a long page. A page where the logo is the H1 announces the shop name as the topic of every page, and a jump from H2 to H4 sounds like a section went missing. Testing with a screen reader shows how to hear it yourself in ten minutes.

For search engines. Google reads headings as a hint about what a page and each of its sections cover, and its title link documentation lists heading elements such as the H1 among the sources it may use for your result's headline. Google has said several times that more than one H1 does not hurt ranking and that it does not penalise a skipped level. The gain from a clean outline is clarity, not a bonus: one H1 that says "Merino wool running socks" is a better signal than two H1s that say "Example Shop" and "Merino wool running socks".

"HTML5 allows several H1s" never worked

HTML5 once described an "outline algorithm" where every <section> and <article> restarted the heading levels, so each could have its own H1. No browser and no screen reader implemented it, and it was removed from the HTML standard in 2022. Assistive technology reads the levels as written: five H1s in five <section> elements are five top-level headings. The short rules are on the heading structure fix page.

How getReport checks it

The SEO audit reads the HTML your server sends and collects every <h1> to <h6> in document order. Because it reads the source rather than what is visible, it counts headings hidden with CSS too, which is how a mobile header and a desktop header can each contribute an H1 you never see side by side.

The technical detail lists the text of each H1. An H1 that wraps only a logo image shows as "(empty)", because an image has no text content of its own.

Here the technical detail shows the full heading sequence (for example h1 h2 h3 h2 h4) followed by each skip (h2 → h4). Read it top to bottom and you see the outline without opening the source.

This compares the <title> with the first H1, ignoring case and extra spaces. It is a small warning (1 point), but it usually means nobody wrote a title for search.

Landmarks (<header>, <nav>, <main>, <footer>) are the other half of page structure for screen reader users. The accessibility checker looks for them on the rendered page:

How to fix H1 and heading problems, step by step

1. Look at the outline on three page types

Headings come from two places: the theme or template (header, footer, sidebars, product layout) and the content editors write. Run the audit on the home page, one content page (a product or a post) and one listing page (a category or blog index). If the same extra H1 shows up on all three, the theme is the source; if it appears on one, the content is.

For an outline of the rendered page in your own browser, open DevTools (F12) → Console and paste:

// Prints every heading, indented by level, from the rendered page
document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((h) =>
  console.log('  '.repeat(Number(h.tagName[1]) - 1) + h.tagName + '  ' + h.textContent.trim().slice(0, 80))
);

This reads the page after JavaScript has run, so it also shows headings added by scripts, which the audit (reading the server's HTML) does not see.

2. Decide what the one H1 is

The H1 names the page, not the site:

The shop name belongs in the logo link and in the <title>, not in an H1 on every page.

3. Demote the extra H1s

Change the tag, keep the look. If the logo is the H1, make it a plain link or a <p>:

<!-- Before: in header.php or the header template -->
<h1 class="site-title"><a href="/">Example Shop</a></h1>

<!-- After: same class, same styling, no heading -->
<p class="site-title"><a href="/">Example Shop</a></p>

Widget titles and "Newsletter" boxes that use H1 usually should not be headings of the main content at all. In a footer, an H2 per column is fine; an H1 is not.

4. Fix skipped levels

Go through the sequence and close each gap. Usually a section title was made an H4 because it looked better smaller, or a content block (a card, a testimonial) was given a level that does not fit where it sits. Promote the heading to the missing level and restyle it:

<h2>Delivery</h2>
<!-- Was <h4> because it "looked right" -->
<h3 class="heading-small">Delivery to islands</h3>

5. Separate size from level with CSS

Give your design a few heading styles as classes, and apply them to whatever level the structure needs:

/* In the theme stylesheet */
.heading-display { font-size: 2.5rem; line-height: 1.1; font-weight: 700; }
.heading-large   { font-size: 1.75rem; line-height: 1.2; font-weight: 600; }
.heading-small   { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }

A promotional slogan in huge type does not need to be a heading at all: <p class="heading-display">Summer sale</p> looks the same and keeps the outline clean.

6. Make the title and the H1 work together

The <title> competes on the results page next to nine other results; the H1 greets someone who has already clicked. A good pair covers two phrasings of the same topic:

<title>Merino running socks | breathable, blister-free | Example Shop</title>
…
<h1>Merino wool running socks</h1>

Keep them about the same thing: when they contradict each other, Google tends to show the H1 as the title link. How to write the title itself is in the title tag guide.

Platform notes

WordPress

• Theme site title. Many classic themes wrap the site title in an H1 on the home page and in a <p> elsewhere, which is fine. Some themes use an H1 on every page; fix it in a child theme's header.php, or look for a theme setting. In block themes, open Appearance → Editor → the Header template part, select the Site Title block and set its level in the toolbar (paragraph is an option).
• The post title is already the H1. Content should start at H2. The Heading block defaults to H2; in the classic editor, avoid "Heading 1" in the format menu. The Post Title block in block themes has its own level setting.
• Page builders. Elementor's Heading widget, and similar widgets in other builders, have an "HTML Tag" setting separate from the size. Builder templates often ship every big text as H1 or H2; change the tag, not the style. For decorative text, pick div or p.

Shopify

In Dawn and many themes built on it, the section setting "Heading size" changes a CSS class, not the tag, so a banner heading stays an H2 whatever size you choose. The usual sources of extra H1s are product descriptions and pages where someone used "Heading 1" in the rich text editor (the product title is already the H1), and custom sections copied from elsewhere. On the home page, check whether the theme puts the logo in an H1 and whether any section provides a real one.

Static sites and frameworks

Component libraries often hard-code a level (<Card> always renders an H3). Pass the level as a prop so the same component can sit under an H2 or an H3 where the page needs it.

How to check it worked

• The SEO audit shows "The page has exactly one H1 heading" and "Heading levels follow a logical order" on each page type you fixed.
• The heading sequence starts with h1 and never jumps more than one level down.
• "Title and H1 are different" passes, and both read naturally.
• In a screen reader, the headings list reads like a table of contents, and pressing 1 lands on the start of the content.

Common mistakes

• Removing the H1 instead of demoting the other one. Zero H1s is also a finding. Keep the one that names the page.
• Hiding the second H1 with CSS. It stays in the HTML, where search engines and the check still count it, and a "visually hidden" H1 is still read aloud. Change the tag instead.
• Choosing levels by font size. An H4 used because it is small breaks the outline. Use the right level and a class.
• Making every card title an H2. Twenty product cards, each an H2, flatten the outline. Cards inside a section are H3, or not headings at all if the name is just a link.
• Copy-pasting the title into the H1. It passes the H1 check but trips "Title and H1 are identical".

Questions people ask

Does the H1 tag help SEO?

Yes, modestly. Google reads the H1 as a strong hint about the page's topic and may use it as the headline of your search result when the title tag is weak. It is not a large ranking factor on its own, and Google does not penalise pages without a perfect outline. The practical gain is a clear topic for search engines and a clear start point for readers and screen reader users.

Can a page have no H1?

It can, but it should not. Without an H1, screen reader users have no quick way to jump to the start of the content, and search engines lose a clear statement of the page's topic. getReport reports zero H1s the same way as several. Add one H1 that names the page, usually the product name or article headline your theme already shows in large type.

Should the logo be an H1?

No. The logo appears on every page, so an H1 around it announces the shop name as the topic of every page and usually gives the page a second H1. Make the logo a plain link, or wrap it in a <p> with the same class so it looks the same. The page's own headline, such as the product name, is the H1.

Is it OK to skip heading levels?

Going down, no: an H2 followed by an H4 sounds to a screen reader user like a section is missing, and accessibility audits flag it as a best practice. Going back up is fine: an H4 can be followed by a new H2 when a new section starts. Google does not penalise skips, so this is a fix for readers first. Choose levels by structure and set sizes in CSS.

Can I use a hidden H1?

Avoid it. An H1 hidden with display: none is still in the HTML, so search engines and audits count it, and a visually hidden H1 is still read aloud by screen readers. If the design has no visible headline, give the page one; hiding the main heading to satisfy a check helps nobody. Text hidden from visitors but aimed at search engines also risks looking like spam.