H1 Tags and SEO: Why Your Page Needs Exactly One

Why exactly one H1?

The H1 is the top-level heading on a page. It establishes the primary topic. Search engines use it as a strong signal for what the page is about, second only to the title tag. Screen readers use it to announce the page to visually impaired users. When a page has zero H1 tags, search engines lose a critical context signal. When a page has multiple H1 tags, the topic becomes ambiguous. One clear H1 per page is the standard.

The heading hierarchy: H1 through H6

Think of headings like an outline. The H1 is the title. H2s are major sections. H3s are subsections within those. You should never skip a level.

<h1>H1 Tag SEO: The Complete Guide</h1>
  <h2>Why Heading Hierarchy Matters</h2>
    <h3>For Search Engines</h3>
    <h3>For Accessibility</h3>
  <h2>Common H1 Mistakes</h2>
    <h3>Multiple H1 Tags</h3>
    <h3>Skipping Heading Levels</h3>
  <h2>How to Fix Your H1</h2>

This structure is clean, scannable, and tells Google exactly how the content is organized.

Three common H1 mistakes

<!-- header.html -->
<header>
  <h1><a href="/">My Company</a></h1>
</header>

<!-- page content -->
<h1>Our Services</h1>

<!-- header.html -->
<header>
  <a href="/">My Company</a>
</header>

<!-- page content -->
<h1>Our Services</h1>

<h1>Page Title</h1>
<h3>Subsection</h3>  <!-- skipped h2 -->

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

<h1>Welcome!</h1>
<h1>Our Latest Blog Posts</h1>
<h1>Contact Us Today</h1>

<h1>Welcome to Our Agency</h1>
<h2>Our Latest Blog Posts</h2>
<h2>Contact Us Today</h2>

H1 pattern in Next.js

In a Next.js App Router project, each page.tsx should render exactly one H1. The layout should not contain an H1, because the same layout wraps every page in that route group.

// app/(marketing)/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
  const post = getPost(params.slug)

  return (
    <article className="max-w-2xl mx-auto py-16 px-4">
      <h1 className="text-3xl font-bold tracking-tight
        text-zinc-900 mb-4">
        {post.title}
      </h1>
      <div className="prose">
        {post.content}
      </div>
    </article>
  )
}

H1 checklist

• Exactly one H1 per page.
• Contains the primary keyword (naturally, not stuffed).
• Matches the topic of the title tag.
• No H1 on the logo or site name.
• Heading levels are sequential: H1, H2, H3. No skipping.
• Headings describe content structure, not visual size.