Heading Hierarchy: H1 to H3, Done Properly

Headings are how search engines, screen readers, and humans skimming a page understand its structure. Used right, they make your content easier to read and easier to rank. Used wrong, they confuse Google about what the page is even about.

The rules are simple. There are only four of them.

Rule 1: One H1 per page

The H1 is the headline of the page (different from the <title> tag in your <head> , which is covered separately). It answers "what is this page about?" Every page on your website should have exactly one. Not zero, not two.

Common mistake: wrapping the logo in your header in an H1, then writing the actual page topic as an H2 below it. The logo isn't the topic of the page. The page topic is.

Bad:

<header>
 <h1>Sara's Pottery Studio</h1> <!-- on every single page -->
</header>
<main>
 <h2>Blue Speckled Coffee Mug</h2>
</main>

Better:

<header>
 <a href="/"><img src="logo.svg" alt="Sara's Pottery Studio"></a>
</header>
<main>
 <h1>Blue Speckled Coffee Mug</h1>
 <p>Wheel-thrown stoneware, finished with a satin matte glaze...</p>
</main>

Rule 2: Make the H1 specific

"Welcome" and "Home" are wasted H1s. They tell Google nothing about your business or the page. Compare:

Bad: <h1>Welcome</h1>
OK: <h1>Sara's Pottery Studio</h1>
Better: <h1>Handmade Stoneware Mugs and Bowls from Portland</h1>

The "better" version includes the product category and the location. Both are things people search for. Google will use this as a strong signal for what the page is about.

Rule 3: Don't skip levels

Headings nest. H1 contains H2s. H2s contain H3s. Don't jump from H1 to H3 with nothing in between.

Bad:

<h1>Pottery Classes</h1>
<h3>Beginner Classes</h3> <!-- where's H2? -->

Better:

<h1>Pottery Classes</h1>
<h2>Beginner Classes</h2>
<h3>Wheel Throwing 101</h3>
<h3>Hand Building Basics</h3>
<h2>Advanced Classes</h2>
<h3>Glaze Chemistry</h3>

Screen readers use this structure to let blind users jump around the page. If you skip levels, the structure breaks.

Rule 4: Use headings for structure, not for size

If you want a small heading or a big heading for visual reasons, that's what CSS is for. Don't use an H4 because you want smaller text. Use an H2 with CSS that makes it smaller. The heading level should reflect the logical importance of the section, not how big you want the text to look.

What this looks like on a real page

A typical product page on a pottery shop might be structured like this:

<h1>Blue Speckled Coffee Mug</h1>
 <h2>Description</h2>
 <h2>Care Instructions</h2>
 <h3>Cleaning</h3>
 <h3>Storage</h3>
 <h2>Shipping</h2>
 <h2>Reviews</h2>

One topic at the top, major sections as H2s, sub-sections as H3s. Clean, scannable, easy for Google to parse.

How to check your headings

Open your page in Chrome, right-click, View page source. Search the source for <h1 and count how many you find. Should be exactly one. Then look at the rest of your headings and check the order.

Browser extensions like "HeadingsMap" show your whole heading structure as an outline. Useful for spot-checking longer pages.

One H1 per page. Make it match the page topic.

If you fix only one thing about your headings, fix this. Every page audit I've run that started with broken H1s ended with a 10-30% traffic gain after the fix, usually within a month.