結論： 每頁應只有一個 H1 定義核心主題，搭配 H2 與 H3 建立巢狀階層；內文依「一頁一主題」組織，讓訪客與搜尋引擎秒懂。
這是「SEO 教學週更」第 7 篇。在第一季總覽〈SEO 是什麼？〉中，我們說明了搜尋引擎的核心流程是「爬取、索引、排名」；上一篇〈標題與 Meta Description 怎麼寫〉處理了網頁在搜尋結果頁上的外在門面。當客人被標題與說明吸引、點進網頁後，決定他們是否留下來閱讀、以及 Google 是否能準確索引內文的關鍵，就是頁面內部的標題結構（H1、H2、H3）與段落安排。
為什麼要「一頁一主題」：降低搜尋引擎與訪客的理解成本
許多小店家在剛架好官網時，習慣把所有想告訴客人的事情全部塞在同一個頁面裡：最新消息、店家理念、所有商品介紹、手作課程時間表、門市交通指南，甚至退換貨規定。
這種做法看似豐富，實際上會大幅拉高理解成本：
- 搜尋引擎難以判斷核心焦點：搜尋引擎演算法為網頁建立索引時，會評估頁面的主要主題。如果單一網頁同時包含三、四種彼此關聯度低的業務或內容，演算法無法判斷該頁面到底是在解答「手工皮件訂製」還是「皮革保養教學」。結果往往是面對各種具體查詢時，頁面的主題相關性都被稀釋，難以獲得良好排名。
- 訪客難以迅速找到答案：來到網站的客人通常帶著特定目的。如果客人搜尋「皮鞋發霉怎麼處理」點進網頁，卻先看到三屏無關的店長創業故事與最新折扣活動，很可能會直接關閉分頁離開。高跳出率代表內容未能有效滿足客人的搜尋意圖。
「一頁一主題」的核心原則是：一個網頁專注解決一個主要需求或介紹一項特定服務。
如果店家同時提供「商品販售」、「維修保養」與「手作體驗」，合理的做法是將它們拆分為三個獨立頁面，各由專屬的標題引導，再透過選單與頁面內的文字連結串聯起來。
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 標籤。