Poor heading structure

No H1, multiple H1s, or skipped levels, so agents can't build an outline of your page.

HTML headings (<h1> through <h6>) form a tree that describes how your page is organised: an H1 is the page topic, H2s are top-level sections, H3s are sub-sections, and so on. Agents read this tree to understand what the page covers and where to find specific information. "Poor heading structure" means the tree is broken: no H1 at all, multiple competing H1s, or jumping from H1 straight to H4 without the levels in between.

Agents extract structure before content. They look for the H1 to label the page topic, then walk H2s to enumerate sections, then drill into H3s when answering specific questions. A page with no H1 has no topic from the agent's perspective. A page with five H1s ("About", "Products", "Reviews", "Contact", "Blog") looks like five separate pages stitched together, and the agent does not know which one is the answer. Clean heading structure makes you findable; broken structure makes you invisible.

Heading structure is the cheapest readability fix on this list: it's pure HTML, no infrastructure changes, fixable in an afternoon. The payoff: agents start citing specific sections of long pages ("according to Acme's seasoning guide…"), FAQ schema starts working (it depends on H2/H3 to delineate questions), and accessibility scores improve as a side-effect. Skipping this fix costs every long-form page on your site.

Open the page and run the following in your browser console: `Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6")).map(h => h.tagName + ": " + h.textContent.trim().slice(0, 60))`. Read the output as an outline. There should be exactly one H1, and the levels should never skip (H1 → H2 → H3, never H1 → H3). If the outline is empty, has multiple H1s, or has gaps, the structure is broken.

One <h1> per page, naming the page topic. Use <h2> for top-level sections, <h3> for sub-sections under each H2, <h4> for further nesting. Don't pick heading levels for visual styling; pick them for semantics, then style with CSS. If you need a small heading visually, use a class, not <h6>.

<article>
  <h1>How to season cast iron — a guide</h1>
  <p>Seasoning is the polymerised oil layer that gives cast iron its non-stick surface…</p>

  <h2>What you'll need</h2>
  <p>You need a cast-iron pan, oil with a high smoke point, and an oven.</p>
  <h3>Choosing an oil</h3>
  <p>Flax oil is traditional, grapeseed is modern, vegetable oil is fine.</p>
  <h3>Choosing a pan</h3>
  <p>New, stripped, or rusted — all three follow the same process.</p>

  <h2>The process</h2>
  <h3>Step 1 — strip the surface</h3>
  <p>If the pan is rusted or has old coating, scrub down to bare iron.</p>
  <h3>Step 2 — apply a thin coat</h3>
  <p>Use a paper towel to spread oil; less is more.</p>
  <h3>Step 3 — bake</h3>
  <p>Inverted, 450°F, 1 hour. Repeat 3–6 times for a deep finish.</p>

  <h2>Common mistakes</h2>
  <p>Too much oil pools and turns sticky. Too little leaves bare spots.</p>
</article>

The reference snippet above is platform-agnostic. Below are the concrete steps for the four most common stacks plus a generic fallback for any other host.

import { getPost } from '@/lib/posts';

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  return (
    <article>
      <h1>{post.title}</h1>
      {post.sections.map((section) => (
        <section key={section.id}>
          <h2>{section.heading}</h2>
          {section.body}
          {section.subSections?.map((sub) => (
            <div key={sub.id}>
              <h3>{sub.heading}</h3>
              {sub.body}
            </div>
          ))}
        </section>
      ))}
    </article>
  );
}

<?php get_header(); ?>

<article>
  <header>
    <h1><?php the_title(); ?></h1>
    <p class="byline">By <?php the_author(); ?> · <?php echo get_the_date(); ?></p>
  </header>

  <?php // the_content() outputs author-chosen H2s, H3s, etc. ?>
  <?php the_content(); ?>
</article>

<?php get_footer(); ?>

<article class="product">
  <h1 class="product__title">{{ product.title }}</h1>
  <p class="product__price">{{ product.price | money }}</p>

  <section class="product__description">
    <h2>About this product</h2>
    {{ product.description }}
    {% comment %}
      product.description is rich-text; the merchant authors H2/H3
      headings inside it via the Shopify admin editor.
    {% endcomment %}
  </section>

  <section>
    <h2>Specifications</h2>
    {% render 'product-specs', product: product %}
  </section>
</article>

Hero headline → H1
Section titles → H2
Sub-section titles → H3
Card titles inside a list → H4 (or styled paragraph if visual hierarchy is purely cosmetic)

# How to season cast iron — a guide

Seasoning is the polymerised oil layer…

## What you'll need

You need a cast-iron pan, oil, and an oven.

### Choosing an oil

Flax oil is traditional…

### Choosing a pan

New, stripped, or rusted…

## The process

### Step 1 — strip the surface

If the pan is rusted…

• Two <h1>s on the same page: one in the site header ("Acme"), one as the page title. Demote the site-name to a paragraph or use a logo image with alt text.
• No <h1> at all because the layout uses <h2> for the page title and <h1> never appears. Every content page needs exactly one <h1>.
• Skipping levels (<h1> → <h3>) for visual reasons. The level is semantic, the visual is CSS. Use a class to make an <h2> look smaller, do not switch it to <h4>.
• Using headings as styled labels (<h3>Total: $79</h3>). Headings are for hierarchy, not emphasis. Use <strong>, <p class="label">, or a definition list.
• Generic H2s that repeat on every page ("About", "FAQ", "Contact"). Make them page-specific so the outline tells the agent what this page is about.

Run the console outline check above and confirm: exactly one H1, no skipped levels, headings are descriptive. Run lighthouse → Accessibility, and heading-related warnings should be gone. Run a fresh AgentSpeed scan; the readability score will move up because heading-derived signals (text-ratio, structure) improve together.