📌 The H1 Tag
Your page's most important headline—make it count
Why H1 tags matter
The H1 is your page's primary headline. It tells users and search engines what your page is about in one clear statement. Pages with a properly implemented H1 rank 10-15% higher than those without.
Think of it as: The title of a book chapter—specific, descriptive, and exactly one per page.
Good vs Bad H1 Tags
❌ Bad Examples
Missing entirely
<div class="hero-title">Welcome</div>Uses a div instead of proper H1. Search engines can't identify your main topic.
Multiple H1s
<h1>Our Product</h1>
<h1>Key Features</h1>
<h1>Pricing</h1>Confuses search engines about your page's primary topic.
Too generic
<h1>Home</h1>Doesn't describe what your page offers. Wasted SEO opportunity.
Keyword stuffing
<h1>Best CRM Software CRM Tool CRM Solution Best CRM</h1>Awkward for users, penalized by search engines. Looks spammy.
✅ Good Examples
Homepage (benefit-focused)
<h1>Close More Deals with AI-Powered CRM</h1>Clear benefit, natural keyword usage, tells users what you do.
Feature page (specific)
<h1>Email Automation That Converts Prospects into Customers</h1>Describes the feature and its outcome. Uses target keywords naturally.
Pricing page (clear value)
<h1>Simple, Transparent Pricing for Growing Teams</h1>Sets expectations and targets the right audience.
Blog post (article topic)
<h1>7 Email Sequences That Double Your Trial Conversions</h1>Specific, promises value, includes search-friendly phrasing.
H1 Best Practices
📍 Exactly one per page
Use one H1 that represents the main topic. All other headings should be H2-H6.
📏 Optimal length: 20-70 characters
Short enough to scan, long enough to be descriptive. Aim for 40-60 characters when possible.
🎯 Include your primary keyword
Naturally incorporate the main search term for this page, but write for humans first.
💬 Match user intent
If someone searches "how to automate invoicing", your H1 should speak to that need.
✨ Make it compelling
Your H1 is often the first thing visitors read. Make them want to stay.
🔗 Align with your title tag
H1 and title tag should convey the same topic but can vary slightly in wording.
Implementation Examples
HTML (Standard)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project Management for Remote Teams | TaskFlow</title>
</head>
<body>
<header>
<!-- Logo and navigation here -->
</header>
<main>
<section class="hero">
<h1>Manage Projects from Anywhere</h1>
<p>The work management platform remote teams love.</p>
<!-- CTA buttons -->
</section>
<section class="features">
<h2>Everything You Need to Stay in Sync</h2>
<!-- H2 for major sections, H3 for subsections -->
</section>
</main>
</body>
</html>React / Next.js Component
export default function HomePage() {
return (
<>
<Head>
<title>AI-Powered Analytics | DataPulse</title>
</Head>
<main>
<section className="hero">
<h1>See the Story Behind Your Data</h1>
<p>
AI-powered analytics that turn spreadsheets into insights.
</p>
</section>
<section className="features">
<h2>Built for Data-Driven Teams</h2>
{/* Feature cards */}
</section>
</main>
</>
);
}Semantic HTML5 Structure
<body>
<header>
<!-- Site logo, navigation -->
</header>
<main>
<article>
<h1>How to Build a Winning SaaS Pricing Page</h1>
<p class="byline">By Jane Doe • 5 min read</p>
<section>
<h2>Start with Your Value Metric</h2>
<p>...</p>
<h3>Per-User Pricing</h3>
<p>...</p>
<h3>Usage-Based Pricing</h3>
<p>...</p>
</section>
<section>
<h2>Tiered Plans vs. A La Carte</h2>
<p>...</p>
</section>
</article>
</main>
<footer>
<!-- Footer content -->
</footer>
</body>Notice: One H1 per page (the article title), H2 for main sections, H3 for subsections. Clear hierarchy.
WordPress (Gutenberg Block Editor)
<!-- In the WordPress editor -->
1. Add a "Heading" block at the top of your page
2. Select "H1" from the heading level dropdown
3. Write your main page headline
<!-- Generated HTML -->
<h1 class="wp-block-heading">Your Main Headline Here</h1>
<!-- All other headings should be H2 or lower -->
<h2>Section Title</h2>
<h3>Subsection Title</h3>WordPress tip: Most themes automatically make your page/post title an H1. Don't add another H1 in the content editor.
Quick Checklist
- ✓ Page has exactly one H1 tag
- ✓ H1 is 20-70 characters long
- ✓ Includes primary keyword naturally
- ✓ Describes what the page is about
- ✓ Compelling and user-friendly (not keyword stuffed)
- ✓ Aligned with title tag topic
- ✓ All other headings use H2-H6 in logical order
- ✓ H1 appears early on the page (usually in hero section)
Testing Your H1
🔍 Browser Developer Tools
Right-click page → "Inspect" → Search for <h1 in the HTML. You should find exactly one.
🧰 Browser Extensions
Install "HeadingsMap" or "SEO Meta in 1 Click" to visualize your heading structure instantly.
📊 SaaS Booster
Run a free scan to check H1 presence, uniqueness, and heading hierarchy across your site.
Common Mistakes
🚫 Using an image as H1
<h1><img src="logo.png" alt="My Product"></h1>Why it's bad: Images inside H1 tags are less accessible and harder for search engines to parse.
Fix: Use text for the H1. Add the logo separately with proper alt text.
🚫 Hiding H1 with CSS
<h1 style="display: none;">Hidden Headline</h1>Why it's bad: Search engines may flag this as manipulation. Accessibility tools can't announce hidden content.
Fix: Keep your H1 visible. Use CSS for styling, not hiding.
🚫 Logo as H1 on every page
<h1>
<a href="/">
<img src="logo.png" alt="CompanyName">
</a>
</h1>Why it's bad: Your company name becomes the H1 on every page, missing the chance to describe each page's unique topic.
Fix: Use a div or span for the logo. Reserve H1 for the page-specific headline.
🚫 Same H1 across multiple pages
Why it's bad: Every page should have a unique H1 that describes its specific content.
Fix: Write custom H1s: "Pricing" vs "Features" vs "About Us" vs "How It Works"
Pro Tips
🎨 Use H1 for branding, too
Your H1 sets the tone. Compare "We Help You Manage Projects" (bland) vs "Finally, a Project Tool Your Team Will Actually Use" (personality).
📱 Test on mobile
H1s often appear in hero sections. Make sure yours is readable on small screens without awkward line breaks.
🔄 A/B test your H1
Your H1 impacts conversions. Test variations to see which headline drives more signups or engagement.
🌍 Localize for international markets
If you operate in multiple languages, translate and optimize your H1 for each market's search terms.
📊 Use numbers and power words
"3x Your Sales with AI Outreach" performs better than "Improve Your Sales Process"
⚡ Front-load important keywords
"Email Automation for SaaS Companies" beats "For SaaS Companies: Email Automation" for search relevance.