# 一頁一主題：H1/H2/H3 結構與段落寫法

> 分類：SEO 與 AI 搜尋 · SEO 教學週更 第 7 篇 · 發布：2026-11-03
> 網頁結構清晰不僅能幫助訪客快速閱讀，更是搜尋引擎讀懂頁面主題的核心依據。本文說明 H1、H2、H3 標籤的階層關係與段落組織原則，依據 Google 官方指南與 MDN 規範，解析一頁一主題的實踐方式，避免標題層級跳級與關鍵字堆砌。

**結論：** 每頁應只有一個 H1 定義核心主題，搭配 H2 與 H3 建立巢狀階層；內文依「一頁一主題」組織，讓訪客與搜尋引擎秒懂。

這是「SEO 教學週更」第 7 篇。在第一季總覽[〈SEO 是什麼？〉](https://labangram.kamera-ichi.com/blog/what-is-seo-2026)中，我們說明了搜尋引擎的核心流程是「爬取、索引、排名」；上一篇[〈標題與 Meta Description 怎麼寫〉](https://labangram.kamera-ichi.com/blog/title-and-meta-description)處理了網頁在搜尋結果頁上的外在門面。當客人被標題與說明吸引、點進網頁後，決定他們是否留下來閱讀、以及 Google 是否能準確索引內文的關鍵，就是頁面內部的標題結構（H1、H2、H3）與段落安排。

## 為什麼要「一頁一主題」：降低搜尋引擎與訪客的理解成本

許多小店家在剛架好官網時，習慣把所有想告訴客人的事情全部塞在同一個頁面裡：最新消息、店家理念、所有商品介紹、手作課程時間表、門市交通指南，甚至退換貨規定。

這種做法看似豐富，實際上會大幅拉高理解成本：

1. **搜尋引擎難以判斷核心焦點**：搜尋引擎演算法為網頁建立索引時，會評估頁面的主要主題。如果單一網頁同時包含三、四種彼此關聯度低的業務或內容，演算法無法判斷該頁面到底是在解答「手工皮件訂製」還是「皮革保養教學」。結果往往是面對各種具體查詢時，頁面的主題相關性都被稀釋，難以獲得良好排名。
2. **訪客難以迅速找到答案**：來到網站的客人通常帶著特定目的。如果客人搜尋「皮鞋發霉怎麼處理」點進網頁，卻先看到三屏無關的店長創業故事與最新折扣活動，很可能會直接關閉分頁離開。高跳出率代表內容未能有效滿足客人的搜尋意圖。

「一頁一主題」的核心原則是：**一個網頁專注解決一個主要需求或介紹一項特定服務**。

如果店家同時提供「商品販售」、「維修保養」與「手作體驗」，合理的做法是將它們拆分為三個獨立頁面，各由專屬的標題引導，再透過選單與頁面內的文字連結串聯起來。

## H1、H2、H3 的階層角色：把網頁當成一本書的目錄

HTML 提供了一組專門定義章節層級的標題元素：`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`、`<h6>`。根據 MDN Web Docs 規範，這些元素代表六個級別的標題，其中 `<h1>` 是最高級別，`<h6>` 是最低級別。

理解標題階層最簡單的比喻，就是將網頁想像成一本書或一本目錄：

- **H1（書名或單篇文章的大標題）**：每頁的最高核心。它向所有人宣告：「這個網頁是關於什麼的」。
- **H2（章節標題）**：將 H1 的大主題拆解成數個平行的大段落或核心論點。
- **H3（小節標題）**：深入補充特定 H2 內容的次級論點或具體執行步驟。
- **H4 至 H6（細節子項目）**：結構更深層的細節標題。對於一般企業形象站、電商產品頁或在地店家網站，通常使用到 H2 與 H3 就已經能滿足絕大多數內容排版需求。

根據 Google 官方〈影響搜尋結果中的標題連結〉指南，Google 演算法會檢視網頁上的各種來源來理解內容，其中就包含「主要視覺標題」與「`<h1>` 等標題元素」。清楚的標題階層能協助搜尋引擎演算法快速建立該頁面的內容大綱，釐清各段落文字的從屬關係。

## H1 標籤的設置原則與常見迷思

`<h1>` 是頁面中最具分量的內文標題，在設定時建議遵循以下原則：

### 1. 維持每頁一個 H1

雖然 HTML5 標準技術上允許在不同的區塊元素（如 `<article>` 或 `<section>`）中使用多個 `<h1>`，且 Google 演算法也能解析含有多個 `<h1>` 的網頁，但 MDN Web Docs 明確指出：**每頁僅使用一個 `<h1>` 依然是業界公認的最佳實踐**。

維持單一 H1 能確保文件大綱具有唯一的主焦點。特別是對使用螢幕閱讀器的視障使用者而言，快速跳轉到頁面的 `<h1>` 是辨識當前頁面核心內容最標準的操作方式。若頁面存在多個同等權重的 `<h1>`，會大幅增加輔助科技與搜尋演算法定位主題的複雜度。

### 2. H1 與 Title 標籤互相呼應，但不必完全相同

許多店家常有疑問：網頁的 `<title>` 標籤必須和 `<h1>` 文字完全一模一樣嗎？

Google 搜尋團隊在公開的 Office Hours 諮詢中明確表示：**兩者不需要一字不差地完全相同**。
- `<title>` 是顯示在搜尋結果頁上的「門面」，為了吸引點擊與辨識品牌，通常會包含品牌名稱、服務地區或簡短亮點（例如：`手工皮鞋保養步驟圖解教學｜大安門市｜匠人鞋坊`）。
- `<h1>` 是訪客進入網頁後看到的「內文大標題」，應聚焦於該頁主題本身（例如：`手工皮鞋保養完整教學：從除塵到上油的 4 個步驟`）。

兩者核心關鍵詞一致、語意互相呼應即可，不用強求文字完全重合。

### 3. 常見迷思：全站 Logo 包 H1

早期有些網站模板為了方便，將頁首全站共用的品牌 Logo 圖片包裹在 `<h1>` 標籤中。這會導致首頁、關於我們、服務項目、聯絡資訊等每一個頁面的 `<h1>`，通通變成「店家名稱」。

這種做法讓內部的所有獨立頁面失去專屬的 H1 大標題，搜尋引擎與訪客進站後無法立即辨別當前頁面的具體主題。正確的做法是：全站共用的 Logo 使用一般的 `<div>` 或 `<a>` 標記即可，將珍貴的 `<h1>` 留給各個頁面獨特的主標題。

## H2 與 H3 的段落寫法：高可讀性與無障礙兼顧

在撰寫 H2 與 H3 底下的內文段落時，可掌握以下三個重點：

### 1. 嚴格依序嵌套，避免跳級

MDN Web Docs 在無障礙指引中特別強調：**不要跳過標題級別**。

例如，標題結構應為：
- 正確：`H1` → `H2` → `H3`
- 錯誤：`H1` 直接跳到 `H3`（跳過 `H2`）

許多店家在編輯網頁時，常常因為「覺得 H2 字體太大、H3 字體大小剛剛好」，就直接跳用 H3。這種行為會破壞網頁的語意結構，讓依賴標題層級巡航的螢幕閱讀器使用者產生困惑。如果需要調整文字大小，應修改 CSS 樣式，而不是任意更換 HTML 標題層級。

### 2. 段首先說重點，一句一意念

每個 H2 或 H3 區塊下方，應優先採用「結論先行」的倒金字塔寫法：
- 第一句話直接給出核心結論或動作指引。
- 後續句子再補充原理解釋、步驟細節或注意事項。
- 每個段落專注討論一個主題，長度約三到五行，避免無斷句的長篇大論。

訪客在瀏覽網頁時通常是以視線快速掃描標題與首句。先說重點能讓讀者在 3 秒內確認這裡有他們需要的答案，進而繼續深度閱讀。

### 3. 對比範例：結構混亂與結構分明

以一家虛構的手工皮件維修工作室為例，對比兩種排版方式：

**不佳的結構（虛構範例）：**
- 網頁頂端放一張宣傳大圖，內文全用普通段落文字 `<p>` 排版，只把重要句子手動放大加粗。整頁看不到任何 `<h1>` 或 `<h2>` 標籤。訪客與搜尋引擎只能在一大片文字海中摸索重點。

**結構分明的良好結構（虛構範例）：**
- `H1`：植鞣牛皮短夾保養與清潔教學
  - `H2`：日常保養三步驟
    - `H3`：步驟一：使用馬毛刷清理灰塵
    - `H3`：步驟二：薄塗專用皮革保養油
    - `H3`：步驟三：置於陰涼通風處靜置
  - `H2`：遇水淋濕時的緊急處理原則
  - `H2`：皮件保養的三大常見禁忌

結構分明的網頁不僅對讀者友善，搜尋引擎在抽取精選摘要（Featured Snippets）或解答使用者問題時，也能精準定位到對應的小節。

## 常見錯誤

- **用樣式取代語意標籤**：使用一般的 `<div>` 或 `<p>` 加上大字體與粗體來當作標題，缺少 `<h1>` 至 `<h6>` 語意，搜尋引擎與螢幕閱讀器無法識別為標題結構。
- **標題層級任意跳級**：因視覺版型考量，從 H1 直接跳到 H3 或 H4，破壞文件的階層大綱。
- **全站每頁套用相同 H1**：把店家品牌名或「首頁」設為所有頁面的 H1，失去每頁獨特的主題焦點。
- **將大段內文整段包入標題標籤**：把包含數十個字甚至上百字的說明段落全部包進 `<h2>` 中，讓標題失去摘要與導航功能。
- **在標題中惡意堆疊關鍵字**：在 H2 中反覆填入同義字（例如：`台北修皮鞋 推薦修皮鞋 專業修皮鞋服務`），觸犯 Google 搜尋垃圾內容政策中的關鍵字堆砌。

## 常見問題

### 一個網頁真的絕對不能有兩個 H1 嗎？

技術上可以，但實務上強烈建議維持一個。HTML 標準允許在頁面中存在多個 H1，Google 演算法也能處理包含多個 H1 的頁面，並不會直接祭出人工判決處罰。然而，從無障礙導航（Accessibility）、語意清晰度與全站維護標準來看，每頁單一 H1 是最穩健、最不容易出錯的做法，能清楚標記全頁的唯一主焦點。

### 標題文字一定要包含目標關鍵字嗎？

建議自然融入，但切勿勉強硬塞。標題的主要價值在於向讀者與搜尋引擎清楚說明該段落的重點。在 H2 與 H3 中自然包含客人常搜尋的詞彙，確實有助於強化相關性；但如果為了塞入關鍵字而造成語句不通順，反而會降低閱讀品質。Google 的語言理解系統已經能很好地理解上下文語意，流暢表達永遠優先於關鍵字密度。

### 如果我只想改變標題字體大小，應該更換標題層級嗎？

絕對不要。HTML 標題標籤（H1、H2、H3）表達的是內容的「語意結構與層級關係」，並非「視覺外觀」。如果你覺得 H2 在手機螢幕上看起來太大、或是 H3 太小，正確的解決方式是透過網站的 CSS 樣式表修改字型大小（`font-size`），而非任意更換 HTML 標籤。

## 參考資料

- [影響 Google 搜尋中的標題連結](https://developers.google.com/search/docs/appearance/title-link?hl=zh-tw)
- [Google 搜尋引擎最佳化（SEO）入門指南](https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-tw)
- [MDN Web Docs：HTML 章節標題元素 H1–H6](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/Heading_Elements)
- [網頁標題產生機制更新（Google Search Central Blog）](https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles?hl=zh-tw)

Tags: SEO, H1 標籤, 內容結構, 網頁架構, 小店家
Canonical: https://labangram.kamera-ichi.com/blog/heading-structure-h1-h2-h3/
Author: Cheng Jung Chen (Laban) — https://labangram.kamera-ichi.com/about