Một website chuẩn SEO mẫu: HTML đúng cho từng trang

2026-08-14

Mỗi lần dựng một trang, bạn không nên phải tra lại "H1 đặt ở đâu?". Đây là ví dụ hoàn chỉnh, copy-paste được: cả website của một thương hiệu nhỏ — Trang chủ, trang danh sách Dịch vụ, trang chi tiết Dịch vụ, Tin tức và Liên hệ — với HTML đúng cho từng trang và từ khoá mỗi trang nên nhắm tới.

Ví dụ xuyên suốt là một thương hiệu giả định, Acme Plumbing ở Austin, cung cấp ba dịch vụ: sửa rò rỉ (leak repair), thông cống (drain cleaning) và lắp máy nước nóng (water heater installation). Thay bằng thương hiệu và dịch vụ của bạn — cấu trúc vẫn giữ nguyên.

Các trang ta sẽ dựng, theo thứ tự: 1. Trang chủ → 2. Danh sách dịch vụ → 3. Chi tiết dịch vụ → 4. Tin tức → 5. Liên hệ — tất cả trên cùng một header chung.

Một nguyên tắc chi phối tất cả: từ khoá của bạn là những từ khách hàng thực sự gõ để tìm thứ bạn bán — đúng dịch vụ và địa điểm của bạn. Không phải từ chung chung, không phải tên thương hiệu ở mọi tiêu đề, không phải chủ đề đang thịnh hành không liên quan.

Phần khung dùng chung — head, logo & menu

Mọi trang đều mang cùng một header — thương hiệu (ảnh logo, hoặc chữ nếu chưa có logo) và menu — cùng một <head> chung. Chỉ <title> và description đổi theo từng trang (xem ở mỗi trang bên dưới). Thương hiệu nằm ở đây, không nằm trong 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>

Tên thương hiệu nằm trong alt của logo (hoặc <span>) — để nó xuất hiện ở mọi trang mà không chiếm chỗ H1.
Menu là các liên kết <a href> thật trong một <ul>, đặt trong một <nav> — thu thập được. Google: liên kết thu thập được
Mỗi trang có đúng một <h1>, nói về trang đó — không phải thương hiệu. Xem best practice cho H1.

1. Trang chủ — nói bạn làm gì, cho ai, ở đâu

H1 trang chủ là cơ hội lớn nhất. Hãy dành nó cho dịch vụ chính + địa điểm, đừng "Chào mừng đến 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>

Đừng tải mọi ảnh của carousel cùng lúc. Một banner hay carousel chứa nhiều ảnh nhưng chỉ hiện ảnh đầu. Tải hết ngay từ đầu làm trang nặng và chậm lần vẽ đầu tiên — càng tệ trên mạng chậm, và kéo tụt Core Web Vitals. Giữ ảnh đầu (đang hiển thị) loading="eager" và cho mọi ảnh khác loading="lazy": trình duyệt chỉ tải mỗi slide khi nó sắp xuất hiện, không tải trước. Google: lazy-loading cấp trình duyệt

Từ khoá: dịch vụ chính + thành phố — "emergency plumber Austin". Không phải chỉ mỗi tên thương hiệu. Google: hướng dẫn SEO cơ bản

2. Trang danh sách Dịch vụ — trung tâm của mọi dịch vụ

Một trang liệt kê mọi dịch vụ và dẫn tới từng trang chi tiết. H1 tóm tắt; mỗi dịch vụ là một <h2> (tên dịch vụ = từ khoá) dẫn ra ngoài.

<!-- <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>

Từ khoá: nhóm dịch vụ — "plumbing services Austin". Mỗi <h2> nhắm dịch vụ của nó và chuyển sức mạnh xếp hạng sang trang chi tiết qua liên kết.

Nếu danh sách dài: phân trang

Blog và danh mục lớn chia thành nhiều trang. Nguyên tắc: mọi trang phải tới được bằng một liên kết thật mà crawler theo được — không phải nút "Tải thêm" chỉ chạy bằng JavaScript.

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

Dùng đường dẫn sạch (/news/page/2) và cho mỗi trang một canonical tự trỏ.
Liên kết các trang số bằng <a href> để Google thu thập được hết. Google: phân trang

3. Trang chi tiết Dịch vụ — một trang, một dịch vụ

Đây là nơi bạn thực sự xếp hạng cho một dịch vụ. Mỗi trang một dịch vụ, tên nó trong H1, và liên kết (không nhồi từ khoá) tới các dịch vụ liên quan.

<!-- <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>

Từ khoá: đúng một — "leak repair Austin". Đừng nhồi "drain cleaning" và "water heater" vào đây; liên kết sang những trang đó để mỗi trang sở hữu từ khoá riêng. Google: nội dung hữu ích

4. Tin tức / blog

Một trang danh sách và một trang cho mỗi bài — cùng mẫu với dịch vụ.

<!-- /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>

Từ khoá: câu hỏi của người đọc — "how to unclog a drain". Vẫn trong lĩnh vực của bạn (ống nước). Đừng chạy theo chủ đề thịnh hành không liên quan để lấy lượt xem không bao giờ thành khách.

5. Trang Liên hệ

Không phải trang từ khoá — nó dành cho độ tin cậy và tín hiệu địa phương. Đặt tên, địa chỉ, số điện thoại thật dưới dạng chữ (không nhét vào ảnh), và thêm dữ liệu có cấu trúc LocalBusiness.

<!-- <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>

Thêm JSON-LD LocalBusiness với cùng tên / địa chỉ / số điện thoại để Google nối thương hiệu của bạn với một địa điểm thật. Google: dữ liệu có cấu trúc LocalBusiness

Từ khoá nào cho trang nào

Trang	`<h1>` duy nhất	Từ khoá nhắm tới	Tránh
Trang chủ	Dịch vụ chính + thành phố	`emergency plumber Austin`	H1 chỉ có thương hiệu
Dịch vụ (danh sách)	Tóm tắt dịch vụ	`plumbing services Austin`	—
Chi tiết dịch vụ	Một dịch vụ duy nhất	`leak repair Austin`	từ khoá của dịch vụ khác
Bài tin tức	Tiêu đề bài viết	câu hỏi (`unclog a drain`)	chủ đề thịnh hành lạc đề
Liên hệ	Liên hệ + thương hiệu	(không phải trang từ khoá)	nhồi từ khoá

Nguyên tắc vàng

Mỗi trang làm một việc, có một H1 về việc đó, giữ thương hiệu ở header, và liên kết tới các trang lân cận bằng <a href> thật. Từ khoá của bạn là những từ một khách hàng thật gõ để tìm đúng thứ bạn bán — dịch vụ và địa điểm của bạn.

Dán HTML của bất kỳ trang nào vào iSEO để kiểm tra cấu trúc, và xem Mọi thẻ SEO để biết chi tiết từng thẻ.