A sample SEO-ready website: the right HTML for every page

2026-08-14

Every time you build a page you shouldn't have to re-search "where does the H1 go?". This is a complete, copy-paste example: a small brand's whole website — Home, a Services list, a Service detail, News and Contact — with the right HTML on each page and the keyword each one should target.

The running example is a placeholder brand, Acme Plumbing in Austin, offering three services: leak repair, drain cleaning and water heater installation. Swap in your own brand and services — the structure stays the same.

The pages we build, in order: 1. Home → 2. Services list → 3. Service detail → 4. News → 5. Contact — all on top of one shared header.

The one rule behind all of it: your keywords are the words customers actually type to find what you sell — your real services and your location. Not vague words, not your brand name on every heading, not random trending topics.

The shared shell — head, logo & menu

Every page carries the same header — your brand (a logo image, or text if you have no logo) and the menu — plus a common <head>. Only the <title> and description change per page (shown on each page below). The brand goes here, not in the H1.

<!-- <head>: shared on every page (title + description are set per page, below) -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<header>
  <!-- Brand: a logo image... -->
  <a class="logo" href="/"><img src="/logo.svg" alt="Acme Plumbing"></a>
  <!-- ...or just text if you have no logo: -->
  <!-- <a class="logo" href="/"><span>Acme Plumbing</span></a> -->

  <nav aria-label="Main">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/news">News</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

The brand name lives in the logo's alt (or the <span>) — so it's on every page without stealing the H1.
The menu is real <a href> links in a <ul>, inside one <nav> — crawlable. Google: make links crawlable
Each page has exactly one <h1>, about that page — never the brand. See the H1 best practice.

1. Home page — say what you do, for whom, where

The Home H1 is your biggest opportunity. Spend it on your main service + location, not "Welcome to Acme Plumbing".

<!-- <head> -->
<title>Emergency plumber in Austin — Acme Plumbing</title>
<meta name="description" content="24/7 leak repair, drain cleaning and water heater installation across Austin. Call Acme Plumbing.">

<!-- <body> -->
<main>
  <h1>Emergency plumbers in Austin — leak repair & drain cleaning</h1>
  <p>Acme Plumbing fixes leaks, clears drains and installs water heaters
     across Austin, 7 days a week.</p>

  <!-- Optional promo / banner — a small image carousel -->
  <section aria-label="Promotions">
    <h2>This week's offers</h2>
    <ul class="carousel">
      <li><img src="/promo/drain-cleaning.jpg" alt="Free callout with any drain cleaning this week" loading="eager"></li>
      <li><img src="/promo/water-heater.jpg" alt="$50 off water heater installation" loading="lazy"></li>
      <li><img src="/promo/leak-check.jpg" alt="Free leak check for new customers" loading="lazy"></li>
    </ul>
  </section>

  <!-- Your services: each an h3 linking to its own detail page -->
  <section>
    <h2>Our services</h2>
    <h3><a href="/services/leak-repair">Leak repair</a></h3>
    <p>Fast fixes for dripping taps, burst pipes and hidden leaks.</p>
    <h3><a href="/services/drain-cleaning">Drain cleaning</a></h3>
    <p>Blocked sinks, showers and mains cleared same-day.</p>
    <h3><a href="/services/water-heater-installation">Water heater installation</a></h3>
    <p>Supply and fit of tank and tankless heaters.</p>
  </section>

  <!-- News teasers -->
  <section>
    <h2>Latest from our blog</h2>
    <h3><a href="/news/how-to-unclog-a-drain">How to unclog a drain without chemicals</a></h3>
  </section>
</main>

Don't load every carousel image at once. A banner or carousel holds several images but shows only the first. Loading them all up front bloats the page and slows the first paint — painful on slow connections, and it drags down your Core Web Vitals. Keep the first (visible) image loading="eager" and give every other one loading="lazy": the browser then downloads each slide only when it's about to appear, not before. Google: browser-level lazy-loading

Keyword: primary service + city — "emergency plumber Austin". Not the brand alone. Google: SEO starter guide

2. Services listing page — the hub for everything you offer

One page that lists every service and links to each detail page. The H1 summarizes; each service is an <h2> (the service name = the keyword) linking out.

<!-- <head> -->
<title>Plumbing services in Austin — Acme Plumbing</title>
<meta name="description" content="Leak repair, drain cleaning and water heater installation in Austin — every service Acme Plumbing offers.">

<!-- <body> -->
<main>
  <h1>Our plumbing services in Austin</h1>
  <p>Everything Acme Plumbing does, from emergency leaks to new installs.</p>

  <h2><a href="/services/leak-repair">Leak repair</a></h2>
  <p>Dripping taps, burst pipes, hidden leaks...</p>

  <h2><a href="/services/drain-cleaning">Drain cleaning</a></h2>
  <p>Blocked drains cleared fast...</p>

  <h2><a href="/services/water-heater-installation">Water heater installation</a></h2>
  <p>Tank & tankless, supplied and fitted...</p>
</main>

Keyword: the category — "plumbing services Austin". Each <h2> targets its own service and passes ranking power to the detail page via the link.

If the list is long: pagination

Blogs and big catalogs split across pages. The rule: every page must be reachable by a real link a crawler can follow — not a "Load more" button that only works with JavaScript.

<nav aria-label="Pagination">
  <a href="/services/page/2" rel="next">Next page</a>
</nav>

Use clean paths (/news/page/2) and give each page a self-referencing canonical.
Link the numbered pages with <a href> so Google can crawl them all. Google: pagination

3. Service detail page — one page, one service

This is where you actually rank for a service. One service per page, its name in the H1, and links (not stuffing) to related services.

<!-- <head> -->
<title>Leak repair in Austin — Acme Plumbing</title>
<meta name="description" content="Same-day leak detection and repair in Austin — fixed-price callout from Acme Plumbing.">

<!-- <body> -->
<main>
  <h1>Leak repair in Austin</h1>
  <p>Same-day leak detection and repair — taps, pipes, and hidden leaks
     behind walls. Fixed-price callout.</p>

  <h2>What's included</h2>
  <ul>
    <li>Leak detection with no mess</li>
    <li>Tap, pipe and joint repair</li>
    <li>12-month workmanship guarantee</li>
  </ul>

  <h2>How it works</h2>
  <p>Call, we quote, we fix...</p>

  <aside>
    <h2>Related services</h2>
    <ul>
      <li><a href="/services/drain-cleaning">Drain cleaning</a></li>
      <li><a href="/services/water-heater-installation">Water heater installation</a></li>
    </ul>
  </aside>
</main>

Keyword: exactly one — "leak repair Austin". Don't cram "drain cleaning" and "water heater" in here; link to those pages so each one owns its keyword. Google: helpful content

4. News / blog

A listing page and one page per article — same pattern as services.

<!-- /news (listing) — <head> -->
<title>Plumbing tips & news — Acme Plumbing</title>
<meta name="description" content="Practical plumbing tips and updates from Acme Plumbing in Austin.">

<main>
  <h1>Plumbing tips & news</h1>
  <h2><a href="/news/how-to-unclog-a-drain">How to unclog a drain without chemicals</a></h2>
  <h2><a href="/news/signs-of-a-hidden-leak">5 signs of a hidden water leak</a></h2>
</main>

<!-- /news/how-to-unclog-a-drain (one article) — <head> -->
<title>How to unclog a drain without chemicals — Acme Plumbing</title>
<meta name="description" content="Clear a blocked drain at home without harsh chemicals — a step-by-step guide from Acme Plumbing.">

<main>
  <h1>How to unclog a drain without chemicals</h1>
  <p>By the Acme team &middot; March 2026</p>
  <p>...the article...</p>
</main>

Keyword: the reader's question — "how to unclog a drain". Still in your world (plumbing). Don't chase unrelated trending topics for traffic that never becomes a customer.

5. Contact Us

Not a keyword page — it's for trust and local signals. Put your real name, address and phone as text (not baked into an image), and add LocalBusiness structured data.

<!-- <head> -->
<title>Contact — Acme Plumbing</title>
<meta name="description" content="Call Acme Plumbing in Austin on (512) 555-0100, open 7 days — leak repair, drain cleaning and water heater installation.">

<!-- <body> -->
<main>
  <h1>Contact Acme Plumbing</h1>
  <p>Call <a href="tel:+15125550100">(512) 555-0100</a> or email
     <a href="mailto:hi@acmeplumbing.example">hi@acmeplumbing.example</a>.</p>
  <address>
    123 Main St, Austin, TX 78701<br>
    Open Mon-Sun, 7am-9pm
  </address>
</main>

Add LocalBusiness JSON-LD with the same name / address / phone so Google links your brand to a real place. Google: LocalBusiness structured data

Which keyword goes where

Page	The one `<h1>`	Target keyword	Avoid
Home	Main service + city	`emergency plumber Austin`	a brand-only H1
Services (list)	Services summary	`plumbing services Austin`	—
Service detail	The single service	`leak repair Austin`	other services' terms
News article	The article's title	the question (`unclog a drain`)	unrelated trends
Contact	Contact + brand	(not a keyword page)	keyword stuffing

The golden rule

Every page does one job, has one H1 about that job, keeps the brand in the header, and links to its neighbours with real <a href>. Your keywords are the words a real customer types to find what you actually sell — your services and your location.

Paste any page's HTML into iSEO to check the structure, and see Every SEO tag for the tag-by-tag details.