Heading Structure for SEO: Use H1 to H6 for Meaning, Not Style

Headings are the outline of a web page. A visitor skims them to decide whether to stay. A screen reader user jumps between them to find the section they need. Search engines read them as text that describes what each part of the page covers. When headings are chosen because they look right instead of because they mean something, all three groups get a worse page.

This guide shows how to plan a heading structure, audit an existing page, and fix the most common problems: missing or repeated H1s, skipped levels, headings used as big text, and headings stuffed with keywords. It is for site owners, editors and developers who can edit page templates or content.

There is also a useful reality check. Google's own SEO starter guide says that heading order does not matter for Google Search, and that there is no ideal number of headings. So this is not a ranking trick. It is a quality and accessibility job that also gives search engines clean text to read. We will keep the claims to what the sources support.

Before you begin

You need edit access to your templates or CMS, a browser, and a list of the page types you publish (home page, article, product, category, landing page). Fix the template for each type first, because one change repairs hundreds of pages.

Allow about an hour for a small site. Take a copy of each template file or note the CMS theme version before editing. Changing heading tags can change how a page looks, because browsers apply default sizes. You will move the visual size into CSS, so check the page on a narrow phone screen and a wide desktop after each change.

A quick way to see a page's outline: open browser developer tools, search the Elements panel for <h1, <h2 and so on, or use a browser extension that lists headings. Reading your headings alone, without the body text, should still tell you what the page covers.

How heading levels work

HTML has six levels, <h1> to <h6>. The lower the number, the higher the level. MDN describes them as six levels of section headings, with <h1> the highest and <h6> the lowest.

Think of a book. The H1 is the title. H2s are chapters. H3s are sections inside a chapter. You do not need to use all six levels. Most pages use H1 to H3, and many never go further.

A tidy outline looks like this:

<h1>Choosing a Standing Desk</h1>
  <h2>Types of standing desk</h2>
    <h3>Fixed-height desks</h3>
    <h3>Adjustable desks</h3>
  <h2>What to measure first</h2>
  <h2>Frequently asked questions</h2>

Each heading names what the section below it contains. A heading of the same or higher level starts a new section, and a lower level starts a subsection inside the current one. This is how the W3C accessibility tutorial describes the hierarchy.

What Google says, and what it does not say

Google's SEO starter guide says to provide headings to help users navigate your pages.
The same guide says heading order does not matter for Google Search. Semantic order helps screen readers, but out-of-order headings do not hurt you in Search.
It says there is no ideal number of headings, and that if you think a page has too many, it probably does.
It also says there is no magical word count target.

Those statements shape the advice below. Use headings for readers first. Do not rewrite every heading to repeat a keyword, and do not expect a heading change alone to move a ranking. Headings can also be among the inputs Google uses to build the title link in results, as covered in Why Google Rewrites Title Tags and How to Write Titles That Stick.

Step-by-step instructions

Step 1: List the page types and inspect one example of each

Why: heading mistakes usually come from templates, not individual pages. Open one page of each type and write down its headings in order, with their levels. Include headings that sit in the header, sidebar, footer and cookie banner, because they count too.

How to confirm: for each page type you have a short list such as "H1, H2, H2, H3, H2, H4 (sidebar)".

Step 2: Give every page one H1 that names the page

Why: the H1 is the main heading. The HTML standard allows more than one, but MDN says this is not considered a best practice, and recommends a single <h1> that describes the content of the page, similar to the document's title. Nested <h1> elements inside sectioning elements such as <section> or <article> are now non-conforming.

Pick one H1 per page, and make it the real subject: "Choosing a Standing Desk", not the site name or a slogan. Your logo is usually not a heading. The H1 and <title> do not need to be identical, but they should clearly be about the same thing.

How to confirm: searching the rendered page for <h1 finds exactly one element, with non-empty text that matches the page topic. Crawvix has an on-page check that reports sampled pages with no H1, an empty H1 or more than one H1, which is a quick way to find template problems.

Step 3: Nest the other headings in order

Why: screen reader users often jump from heading to heading to understand a page. MDN warns that skipping levels, for example going from H1 to H3, can leave a person wondering where the missing heading is. The W3C tutorial gives the same advice: do not skip ranks, except when you close subsections and start a new higher-level section.

Check each page for jumps. An H2 followed by an H4 usually means the H4 should be an H3. Fix the tag, then fix the size in CSS if needed. Going back up is fine: an H4 followed by a new H2 is a normal way to start the next section.

How to confirm: reading down the outline, each heading is at most one level deeper than the one before it.

Step 4: Replace "headings as big text" with CSS

Why: MDN says not to use heading elements to resize text and to use the CSS font-size property instead. The opposite mistake is also common, where a real heading is built from a bold <div> or <p> so it looks right. Then assistive technology and crawlers see a paragraph, not a heading.

Search your templates for two patterns. First, headings used for visual effect, such as an H3 for a pull quote, a sidebar tagline or a price. Change them to <p>, <div> or <span> with a class. Second, section titles that are plain styled text. Change them to the correct heading level.

/* Style by class; choose the tag for meaning */
.section-title { font-size: 1.5rem; font-weight: 700; }

How to confirm: every heading element introduces a section of content, and every section title is a heading element.

Step 5: Handle site-wide areas deliberately

Why: navigation, footers and widgets can add headings that confuse the outline. The W3C tutorial suggests that when the main content heading is the H1, other structural headings such as navigation or a sidebar are one rank lower, and that their ranks should stay the same from page to page.

Decide, per template, whether "Related posts", "Newsletter" and similar blocks are real sections of the page. If they are, give them a stable heading level, usually H2 or H3. If they are decoration, do not use heading tags. Where a region needs a name, a heading with an id can be referenced by aria-labelledby, a pattern MDN shows for navigation.

How to confirm: the heading list is the same for sidebars and footers across pages of the same type.

Step 6: Write headings that describe the section

Why: a heading is a promise about the text under it. Write it so someone skimming learns something. "How to measure your space" beats "More info". Use the words your readers use, and include your topic where it fits naturally, but do not repeat the same keyword in every heading. Google's starter guide says too many headings usually means the page has too many.

Keep headings short enough to read at a glance, and make each one unique within the page. Question headings are fine when the section answers that question.

How to confirm: reading only the headings, a person can tell what the page covers and in what order.

Step 7: Re-test the visual design and the outline

Why: changing tags can change default spacing and size. Compare the page on a phone and a desktop before and after. Re-read the outline. If you use a browser extension or an accessibility audit, the guidance in Website Accessibility Audit: Fix the Most Common Problems covers other issues that often appear alongside heading problems.

How to confirm: the layout looks as intended, there is one H1, and the outline has no skipped levels.

A note on HTML5 outlines and `<section>`

Older guidance suggested that each <section> could restart the heading numbering, with an H1 inside each. Nested H1 elements like that are now non-conforming, according to MDN. Use one H1 and nest by level.

MDN also notes a change in default styling: before May 2025, an H1 inside <section>, <article>, <aside> or <nav> was shown smaller by default, as if it were an H2, and that special rule has been removed. If an older site depended on it, add explicit CSS for the sizes you want.

Final verification checklist

Every page has exactly one non-empty <h1> that describes the page.
No heading level is skipped when going deeper (no H2 straight to H4).
No heading tag is used only to make text bigger or bolder.
Every visible section title is a real heading element.
Navigation, sidebar and footer blocks use a deliberate, consistent heading level, or none.
Headings are unique on the page and say what the section contains.
Layout and font sizes still look right on a phone and a desktop.
Reading only the headings gives a correct summary of the page.

Common mistakes to avoid

No H1, or the logo as the H1. Make the H1 the page subject and keep the logo as a link or image.
Many H1s from a page builder. Convert extra H1s to H2 or lower and set sizes in CSS.
Skipping to a smaller heading for looks. Use the correct level and style with CSS.
Using headings for non-headings. Quotes, prices and slogans are not section titles.
Keyword-stuffed headings. A repeated phrase makes the page harder to read and gains nothing Google has said it rewards.
Hidden headings that do not match visible content. Keep headings aligned with what users can see.
Vague headings like "Introduction" everywhere. Make each one specific to its section.

Frequently asked questions

Can a page have more than one H1?

The HTML standard allows it, but MDN says it is not a best practice and recommends a single H1 describing the page. One H1 keeps the outline simple.

Do headings help rankings?

Google says headings help users navigate and that heading order does not matter for Search. Treat them as clarity and accessibility tools. Do not expect a ranking change from tag edits alone.

Does the H1 have to match the title tag?

No. They should describe the same page, but they can differ in wording. The title may add a brand name, and the H1 may read more like a headline.

How many headings should a page have?

There is no ideal number. Use as many as the content needs for readers to find their way. If the page looks like a list of headings, you probably have too many.

Is it wrong to skip from H2 to H4?

It can confuse people who navigate by headings. Go one level at a time when going deeper. Returning to a higher level to start a new section is normal.

Should I fix headings or content first?

Fix templates first, because they affect many pages at once. Then review your most important pages and make sure the content under each heading is useful. A clean outline over thin content helps no one, as discussed in Write SEO Title Tags and Meta Descriptions That Match Search Intent.

Official references

Next step: See how Crawvix checks a website and capture a baseline once scanning opens. This guide provides technical information, not a guarantee of rankings, traffic or index inclusion.