1. The 10 Golden Rules
These are non-negotiable. Every page on every site we build must follow these.
One H1 per page. It identifies the single main topic. On product pages it is the product name. On category pages it is the category name. On the homepage it is the primary value proposition.
Never skip heading levels going down. H1 → H2 → H3 → H4, always in order. Skipping back up (H4 to H2) when closing a subsection is fine.
Keep H1 under 60 characters. Google may use it as the SERP title. Make every word count.
Write headings for humans first, search engines second. Include keywords naturally. Never stuff.
Every heading must describe the content that follows. If a screen reader user heard only the headings, they should understand the full page structure.
Use semantic heading tags, never styling tricks. Bold text is not a heading. An H3 used for font size is not semantic. Use CSS to control appearance independently.
Avoid heading tags in sitewide elements. Keep <h> tags out of global headers, footers, and navigation. Use them for page-specific content only.
Category pages need text content, not just product grids. Add 150–300 words of descriptive content with proper H2/H3 headings.
Add a heading every 250–350 words. This creates scannable, accessible, SEO-friendly content structure.
Test with a heading outline tool. Extract just the headings from the page. If the outline does not clearly communicate the page structure, revise.
2. SEO & Search Engines
What Google Says
Google uses headings as a "strong signal" for understanding what a page section is about, which helps contextualize and rank surrounding text. However, heading hierarchy order is not a direct ranking factor — Gary Illyes clarified in 2024: "From Google Search perspective, it doesn't matter if you're using them out of order."
That said, heading quality matters in several concrete ways:
- Google may use your H1 as the SERP title if the HTML title tag is vague, missing, or too long. Your H1 is directly visible to searchers.
- H1 and title tag should be closely aligned but do not need to be identical. For product pages, keep them very similar. For content pages, the title tag can be more "searcher-optimized" while the H1 is more "reader-optimized."
- Keyword placement in headings contributes to improved SEO. Place primary keywords in H1, secondary/related keywords in H2s and H3s. Front-loading keywords improves scannability.
- Multiple H1s will not cause a penalty (John Mueller confirmed), but dilute the semantic signal. Use one H1.
Heading Length Recommendations
| Level | Recommended Length | Rationale |
|---|---|---|
| H1 | 20–60 characters | Aligns with SERP title display limits; avoids truncation |
| H2 | 30–60 characters (5–8 words) | Short enough to scan, long enough to be descriptive |
| H3–H6 | No strict limit | Keep concise; progressively more specific |
Content Frequency
- Exactly 1 H1 per page
- At least 1 H2 on most pages
- A heading every 250–350 words of body text
- No maximum — use as many as the content logically requires
3. Accessibility (WCAG 2.1)
Relevant WCAG Criteria
| Criterion | Level | Requirement |
|---|---|---|
| 1.3.1 Info & Relationships | A | Headings must use semantic <h1>–<h6> markup, not just bold/large text |
| 2.4.1 Bypass Blocks | A | Heading hierarchy serves as a mechanism to skip repeated content |
| 2.4.6 Headings & Labels | AA | Headings must describe the topic or purpose of their section |
| 2.4.10 Section Headings | AAA | Section headings are used to organize content (recommended, not required for AA) |
Screen Reader Reality
These numbers from the WebAIM Screen Reader User Survey (2024) show why this matters:
71.6% of screen reader users navigate via headings to find information.
88.8% find heading levels useful or very useful.
Headings are the #1 navigation mechanism for screen reader users — far exceeding landmarks, links, or search.
88.8% find heading levels useful or very useful.
Headings are the #1 navigation mechanism for screen reader users — far exceeding landmarks, links, or search.
How Screen Readers Use Headings
- Announce the heading level: "Heading level 2, Product Features"
- Users press H to jump between headings sequentially
- Users can pull up a list of all headings and jump directly to any one
- Skipped levels confuse users — they imply missing content
- Bold text without <h> tags is invisible to screen readers
Hierarchy Rules
- Nest headings by rank: H1 most important, H6 least
- Never skip levels going down. H2 must not jump to H4.
- Skipping levels going up is fine (H4 back to H2 when closing a subsection)
- In fixed regions (sidebars, footers), heading ranks should stay consistent across pages
4. Writing Effective Headings
The Dual Purpose
Every heading serves two audiences: the scanner (scrolling quickly to find what they need) and the reader (deciding if the section is worth reading). Both must be served simultaneously.
Core Principles
- Be specific, not vague. "Our Services" is weak. "Custom Chassis Fabrication for Off-Road Vehicles" is strong.
- Front-load the important words. Users scan the left side of headings (F-pattern). Put the key concept first.
- Each heading must make sense in isolation. If someone sees only the list of headings, the page structure should be clear.
- Use parallel grammatical structure across same-level headings. If one H2 starts with a verb, all H2s should start with verbs.
Heading Types
| Type | When to Use | Example |
|---|---|---|
| Informational | Specs, technical pages, FAQ | "Steel vs. Aluminum: Weight Comparison" |
| Emotional | Hero sections, CTAs, landing pages | "Built Tougher Than the Terrain" |
| Hybrid | Product pages, about pages | "American-Made Chassis Built to Last" |
For e-commerce, the hybrid approach is most effective: emotional appeal combined with specific, searchable information.
Power Words That Convert
| Category | Words |
|---|---|
| Trust | Proven, Guaranteed, Certified, Trusted, Tested |
| Value | Free, Save, Premium, Custom, Exclusive |
| Urgency | Limited, Only, Last Chance, Now, Today |
| Action | Build, Discover, Get, Transform, Explore |
Heading Formulas
- Benefit + Specificity: "Save 40% on Heavy-Duty Chassis Components"
- Problem + Solution: "Tired of Rust? Our Galvanized Frames Last 25+ Years"
- Social Proof + Benefit: "Why 10,000+ Builders Trust Our Chassis Kits"
- Question Format: "Ready to Build Your Dream Rig?"
5. E-Commerce Heading Patterns
Product Page H1
The H1 is the product name. This is the most universally agreed-upon rule in e-commerce SEO.
| Scenario | H1 Format | Example |
|---|---|---|
| Unique product | Product Name | "Patriot Series Off-Road Chassis" |
| Branded product | Brand + Product Name | "Patriot Chassis XD-4500 Heavy Duty Frame" |
| Key differentiator | Product Name + Key Spec | "XD-4500 Chassis — 4x4, Full Float Rear" |
| Variation | Product Name + Variation | "XD-4500 Chassis (Extended Wheelbase)" |
Category Page H1
Good: "Off-Road Chassis & Frame Kits" • "Heavy-Duty Steel Chassis Components" • "Custom Truck Chassis Packages"
Bad: "Products" • "Shop" • "Browse Our Selection" • "All Items"
Critical: Category pages need 150–300 words of descriptive content with H2/H3 headings. A page with only product thumbnails is thin content that Google will not rank well.
H2 Sections by Page Type
Product Page H2s
- Product Description / Overview
- Features & Benefits
- Technical Specifications
- Customer Reviews
- Related Products
- FAQ (if applicable)
Category Page H2s
- Category description ("Why Choose Our Chassis Kits")
- Buying guide content ("How to Choose the Right Chassis")
- Product grid section heading (if grouping products)
Homepage H2s
- Featured category names ("Complete Chassis Kits")
- Value proposition section ("Why Builders Choose Us")
- Social proof ("What Our Customers Are Building")
- Call to action ("Start Your Build Today")
6. Page-by-Page Heading Templates
Use these as the starting blueprint for every page type. Adjust to fit content, but never violate the hierarchy rules.
Homepage
h1 Primary value proposition / Brand + what you sell
Example: "Patriot Chassis — American-Made Off-Road Frames"
(Under 60 characters. Answers: "What is this site about?")
h2 Featured Category 1
h2 Featured Category 2
h2 Value Proposition / Why Choose Us
h3 Benefit 1 (e.g., "100% American Steel")
h3 Benefit 2 (e.g., "Lifetime Structural Warranty")
h3 Benefit 3 (e.g., "10,000+ Rigs Built")
h2 Social Proof / Testimonials
h2 Call to Action
Product Page
h1 Product Name (+ brand if relevant, + key differentiator)
Example: "XD-4500 Heavy Duty Off-Road Chassis"
(The H1 IS the product name. Do not add marketing fluff.)
h2 Overview / Description
h2 Features & Benefits
h3 Feature Group 1 (e.g., "Frame Construction")
h3 Feature Group 2 (e.g., "Suspension Mounting")
h3 Feature Group 3 (e.g., "Corrosion Protection")
h2 Technical Specifications
h3 Dimensions & Weight
h3 Materials & Finish
h3 Compatibility
h2 Customer Reviews
h2 Related Products
Category / Shop Page
h1 Category Name (keyword-rich, specific)
Example: "Off-Road Chassis Kits"
(NOT "Products" or "Shop" — be specific about what's here.)
h2 Category Description (150–300 words of content below)
h2 Products / Browse [Category]
h2 Buying Guide (if applicable)
h3 Guide subsections
h2 FAQ
h3 Individual questions
About Page
h1 About [Company Name]
h2 Mission / Story
h2 History / Timeline
h2 Team / Leadership
h3 Individual team members (if detailed bios follow)
h2 What Sets Us Apart
h3 Individual differentiators
h2 Certifications & Partnerships
h2 CTA: "Ready to Build With Us?"
Contact Page
h1 Contact [Company Name]
h2 Send Us a Message (form section)
h2 Call or Email Us (direct contact)
h2 Business Hours
h2 Visit Our Shop (location/directions)
h2 Common Questions
h3 Individual FAQ items
7. Common Mistakes
Mistake 1: Styling Over Semantics
Choosing heading levels based on desired font size rather than content hierarchy. An H3 used because "it looks right" rather than because the content is a third-level subsection.
Fix: Use CSS classes to control visual appearance. A
.heading-style-2 class can look like an H2 while being applied to whatever semantic level is correct.
Mistake 2: Skipping Heading Levels
Jumping from H1 directly to H3 or H4. Breaks the logical outline, confuses screen readers, signals sloppy structure.
Fix: Always proceed H1 → H2 → H3. Going back up (H4 to H2) is fine. Going down out of order is not.
Mistake 3: Multiple H1 Tags
Google won't penalize it, but it dilutes the semantic signal, SEO tools flag it, and screen reader users expect one H1 for the page topic.
Common causes: Logo wrapped in H1 sitewide + page title in H1. Theme using H1 for widget titles. Rich text editor defaulting to H1.
Mistake 4: Keyword Stuffing
Never do this:
<h1>Buy Truck Chassis - Best Truck Chassis - Cheap Truck Chassis Online</h1>
<h2>Truck Chassis for Sale - Affordable Truck Chassis Deals</h2>
<h1>Buy Truck Chassis - Best Truck Chassis - Cheap Truck Chassis Online</h1>
<h2>Truck Chassis for Sale - Affordable Truck Chassis Deals</h2>
One primary keyword per heading, used naturally. Google penalizes keyword stuffing.
Mistake 5: Headings in Global Elements
Putting the site name, phone number, or tagline in heading tags within the header or footer. Creates duplicate headings on every page.
Fix: Use <p>, <span>, or <div> for global text. Reserve heading tags for page-specific content.
Mistake 6: Empty or Hidden Headings
Using display:none or empty heading tags for layout. Screen readers may announce these, creating confusion.
Fix: If a heading is needed for accessibility but not visually, use the
.visually-hidden CSS pattern. Never use empty heading tags.
Mistake 7: Headings Inside Interactive Elements
Correct: <h2><a href="/product">Product Name</a></h2>
Incorrect: <a href="/product"><h2>Product Name</h2></a>
Place the interactive element inside the heading, not the other way around.
8. Character Limits & Visual Sizing
Character Limits
| Level | Max Characters | Word Count | Enforcement |
|---|---|---|---|
| H1 | 60 | 5–10 words | Strict — affects SERP display |
| H2 | 60 | 5–8 words | Recommended — for scannability |
| H3 | 80 | 5–10 words | Soft guideline |
| H4–H6 | No limit | Keep concise | Use judgment |
Visual Size Scale
Use a 1.25x (Major Third) or 1.333x (Perfect Fourth) typographic scale. Each level is that ratio larger than the next.
| Level | Size Range | Weight | Notes |
|---|---|---|---|
| H1 | 32–48px (2–3rem) | 700–900 | Largest, most prominent |
| H2 | 24–32px (1.5–2rem) | 600–700 | Clearly smaller than H1 |
| H3 | 20–28px (1.25–1.75rem) | 600 | Clearly smaller than H2 |
| H4 | 16–24px (1–1.5rem) | 600 | Close to body text but distinguished |
| H5–H6 | 14–20px | 600 | Rarely needed — consider restructuring |
Practical note: Most well-structured pages only need H1, H2, and H3. If you're using H5 or H6, the content hierarchy is probably too deep and should be restructured.
When To Use Each Level
- H1: One per page. The page topic. Always present.
- H2: Major page sections. Used on every page.
- H3: Subsections within an H2 section. Used when sections need subdivision.
- H4: Sub-subsections. Occasionally useful for specs tables or FAQ groups.
- H5–H6: Almost never needed. Rethink your content structure if you reach this depth.