標題層級結構 (H1~H6)

合理使用 H 標籤，提升可讀性與 SEO。

作者：哇哇工作站更新於：2025年8月18日

標題層級結構：H1~H6 的基礎教學

什麼是 H1 到 H6？

在 HTML 裡，標題標籤（Heading tags）用來定義文章的層級結構。H1 是最高等級，代表整篇頁面的主題；H2、H3…H6 則依次表示更細分的小節。

這些標籤不僅影響瀏覽器呈現（字體較大、加粗），還是搜尋引擎抓取重點、螢幕閱讀器說明內容的重要參考。

HTML 標題標籤的結構

以下為六個層級的基本寫法：

<h1>主標題</h1>
<h2>次標題</h2>
<h3>子節標題</h3>
<h4>更小節標題</h4>
<h5>細項標題</h5>
<h6>最底層標題</h6>

SEO 與可存取性

1️⃣ 搜尋引擎會把 H1 標籤當作頁面核心主旨，內容越相關、關鍵字放得合理，排名越有機會提升。

2️⃣ 螢幕閱讀器依據標題層級為使用者建立語意結構；若沒有正確的階層，聽障人士就無法順暢瀏覽。

3️⃣ 每頁理論上應只保留一個 <h1> 以避免重複定義主題；之後再依照內容分配 H2–H6。

範例：正確使用標題層級

<!DOCTYPE html>
<html lang="zh-Hant">
<head><meta charset="UTF-8"><title>範例頁面</title></head>
<body>
<h1>學習 HTML 標題標籤</h1>

<h2>為什麼要使用 H1-H6？</h2>
<p>這段說明會在搜尋結果中顯示關鍵資訊。</p>

<h3>SEO 的影響</h3>
<ul>
<li>主題關鍵字放於 H1。</li>
<li>子標題用 H2、H3 分類內容。</li>
</ul>

<h3>可存取性</h3>
<p>螢幕閱讀器會依照層級順序朗讀，使用者能快速定位資訊。</p>

<h2>常見錯誤範例</h2>
<ul>
<li>把所有文字都寫成 <h1>；搜尋引擎無法判斷重點。</li>
<li>跳過層級，例如直接從 H1 跳到 H4；會造成結構混亂。</li>
</ul>

</body></html>

小技巧

使用 CSS 調整標題樣式時，仍保持語意層級。
在 WordPress 或其他 CMS 裡，可透過「自訂欄位」或外掛設定 H1 的內容，以確保每篇文章都有唯一主旨。

每頁只能有一個 H1，別搞錯了！

你可能會在編寫網頁時，看到「H1」這個標籤。它其實就像是文章的主題名稱，能讓搜尋引擎跟使用者快速知道這篇內容講的是什麼。

為什麼只能有一個 H1？

搜尋引擎友善：Google 會把 H1 當成「關鍵主題」，若同頁面有多個 H1，搜尋引擎就無法確定哪個是重點，結果可能影響排名。
可讀性與結構化：一個清晰的層級架構能幫助閱讀者快速瀏覽。若把每段都寫成 H1，就像把整頁拆成許多小章節，讓人摸不著頭腦。
無障礙設計：螢幕閱讀器會先讀出 H1，之後再按層級順序。多個 H1 可能造成使用者聽不到正確的結構提示。

正確的標題結構範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>台灣手工麵包教學</title>
</head>
<body>
    <!-- H1：整頁的主題 -->
    <h1>台灣手工麵包教學</h1>

    <!-- H2：子章節 -->
    <h2>準備材料</h2>
    <p>... 內容 ...</p>

    <h2>製作流程</h2>
    <h3>發酵階段</h3>
    <p>... 內容 ...</p>

    <h3>烘焙階段</h3>
    <p>... 內容 ...</p>

    <!-- H2：結語 -->
    <h2>總結與小技巧</h2>
    <p>... 內容 ...</p>
</body>
</html>

在這個範例裡，只有一個 <h1>（「台灣手工麵包教學」），其餘的都是 H2 或 H3，形成清晰的層級。

錯誤示範：多個 H1

<h1>第一章：材料</h1>
<p>...</p>
<h1>第二章：流程</h1>
<p>...</p>
<h1>第三章：小技巧</h1>
<p>...</p>

這樣的寫法會讓搜尋引擎難以判斷哪一部分是整體重點，也容易造成閱讀上的混亂。

如何在 CMS 裡確保只有一個 H1

自動化設定：許多內容管理系統（例如 WordPress、Drupal）會把「頁面標題」直接轉成 <h1>。只要不要再手動加入額外的 H1，就能保持單一。
使用插件或範本：在模板裡，將整個頁面主題寫為 {{ page.title }}，其餘部分用標籤如 <h2>, <h3> 等。
檢查工具：利用瀏覽器的「開發者工具」或線上驗證服務（例如 WAVE、Google Search Console）查看是否有多重 H1。若看到多個，立刻修正！

小結

記得一句話：「每頁只能有一個 H1，別搞錯了！」這不只是規範，更是讓內容更易讀、搜尋更友善的關鍵。只要在撰寫時先決定主題，再以 H2/H3 等層級補充細節，就能把網頁做到既美觀又實用。

怎樣排好 H2、H3 的順序，讓內容更清楚

標題層級的重要性

在網頁或文章裡，標題不只是裝飾，它們像是導覽圖，幫助讀者快速抓住重點。若 H2 與 H3 的排列順序混亂，就像把路牌亂貼，讀者就容易迷失、停滯，甚至離開頁面。

舉個例子：你在寫一篇介紹「台北美食」的文章，若第一段先說「阿宗麵線」，接著又跳到「淡水老街甜點」再回來講「士林夜市」，讀者就會覺得內容像是隨機拼湊，找不到脈絡。正確排版能讓主題循序漸進，提升閱讀體驗與 SEO 效果。

排好 H2、H3 的基本規則

先決定主題大綱：把整篇文章拆成 3‑5 個主要段落，對應一個 H2。
子項目再細分：在每個 H2 下列出 1－4 個相關子主題，用 H3 表示。
保持層級一致：同一篇文章內不可以把兩個 H3 升級為 H2，或把 H2 降格為 H3；層級必須對應內容深度。
避免跳躍結構：不要在 H2 之間突然插入多級 H3 或直接寫正文，再回到上一級標題。這樣會讓讀者感覺脫節。

實際範例

假設你想寫「台北夜市必吃小吃」:

H1：台北夜市必吃小吃全攻略
H2：士林夜市
H3：炸物（如炸雞排、炸魷魚）
H3：甜點（如芋圓、糖葫蘆）
H2：饒河街夜市
H3：鹹酥雞與滷味
H3：珍珠奶茶

這樣的排列，讀者能先看到「士林」區再轉到「饒河」，每個子項目都在同一層級下，內容更有條理。

常見錯誤與修正技巧

錯誤 1：H3 跳到 H2（例如先寫「炸雞排」再直接切到另一區的主題）。
修正：把所有子項目統一歸類於同一個 H2，必要時再加一層 H4 或使用粗體文字標示。
錯誤 2：多級嵌套太深（H2 → H3 → H4 → H5）。
修正：保留到 H3 為止，若還需要更細部，可以用列表或小節標題，而非再增加 H4。
錯誤 3：忽略重複標題（兩個不同段落都寫「熱門小吃」）。
修正：給每個區域一個獨特的子標題，例如「士林炸物」與「饒河炸物」，避免讀者混淆。

快速檢查清單（小工具）

先列出所有 H2，確定每個都有一個主題句。
在每個 H2 下至少有兩個 H3，內容要互相呼應且不重複。
用文字或圖示確認層級是「H2 → H3」而不是跳躍。
讀一次全文，用心感受：是否能快速知道接下來會說什麼？

如果滿足以上條件，文章的結構就已經相當清晰。

小結

排好 H2 與 H3 的順序，其實就是「先決定主題，再細分子項」的過程。只要遵守層級一致、避免跳躍，並用簡單明瞭的標題描述，就能讓讀者在短時間內掌握文章脈絡，也有助於搜尋引擎抓取關鍵資訊。

下次你在撰寫任何長篇內容時，先把大綱畫好，再逐步落實到 H2/H3，你會發現整體流程變得更順暢、閱讀體驗也大幅提升！

標題最佳實踐：關鍵字與結構的完美結合

把關鍵字塞進標題？這招對你有幫助！

關鍵字在標題的妙用

將目標關鍵字自然植入頁面標題，能讓搜尋引擎快速判斷內容主旨，同時也提升使用者點擊率。以下列出實際可操作的技巧與常見誤區。

為何把關鍵字塞進標題

抓住搜索意圖：當使用者輸入「台北夜市美食」時，搜尋結果中若有同樣關鍵字，閱讀者更容易認為這是最佳答案。
提升點擊率 (CTR)：統計顯示，標題含關鍵字的頁面平均比對應不含關鍵字的頁面多 12% 的點擊量。

好處與風險

好處：提升排名、提高可見度、減少跳出率。
風險：過度堆砌容易被判斷為「關鍵字填塞」(keyword stuffing)，搜尋引擎可能降權。建議每段標題只重複一次，並確保語句流暢。

如何自然插入

先寫完整句子：把關鍵字放在合乎語法的位置，例如「走進台北夜市：最值得嚐嘗的美食指南」。
使用同義詞或近義表達：若標題長，可加入相關詞彙如『必吃』、『熱門』等，避免重複。
保持字數在 50~60 字元內：搜尋結果預覽截斷前通常顯示 50~70 個字元，確保關鍵字不被切掉。

範例對比

標題 (含關鍵字)	說明
台北夜市美食指南：必嚐小吃大全	關鍵字「台北夜市美食」位於前段，語句自然。
台北最熱鬧的夜市你知道嗎？	雖提到「台北」，但未直接說明主題，點擊率略低。

常見錯誤

把關鍵字塞在標題開頭或結尾：例如「台北夜市美食指南」的「台北夜市美食」太長且重複，會造成閱讀不順。
使用完全相同的關鍵字多次：如「台北夜市美食台北夜市美食台北夜市美食」。

小技巧

用 動詞開頭：像是『發現、探索、品嚐』等，能提升趣味度。
加入 時間或地點限定：「2024 年台北夜市最新必吃清單」，可增加時效性。
使用 列表符號 或標點讓標題更易閱讀：『台北夜市美食：小籠包、滷肉飯、芒果冰』。

小結

把關鍵字自然植入標題，並兼顧語句流暢與可讀性，是提升搜尋能見度的有效方法。記得避免過度堆砌，保持標題在 50~60 字元內，即可讓使用者與搜尋引擎都更易理解。

保持邏輯順序，別亂排 H2、H3

在寫網頁標題結構時，最常見的錯誤就是亂排 H2、H3。這篇教學會告訴你為什麼要保持邏輯順序，以及怎麼正確使用四到六級標題。

1. 為何 H2 與 H3 需要有先後關係

當讀者瀏覽頁面時，會依據標題的層次感受內容的脈絡。若 H3 沒有前置的 H2，會讓人搞不清楚這段文字屬於哪個主題。
搜尋引擎也會用標題來判斷重點，亂排會降低關鍵字的權重。

2. 先決條件：了解內容層次

主題 (H1)：整篇文章的大標題。雖然本教學不使用 H1，但實務上應該先設定好。
章節 (H2)：一個主要議題或區塊，通常相當於「第一部分」、「第二部分」等。
小節 (H3)：深入說明某個子主題，例如「功能特色」或「使用方法」。

3. 如何設計符合邏輯的標題結構

先寫大綱：先列出 H2 的順序，確定各章節之間的關係。
再補小節：在每個 H2 下加入相應的 H3，確保不會跳脫前後文。
檢查關鍵字位置：把重點關鍵字放在 H2 或 H3 的首句，以提升 SEO 效果。

4. 常見錯誤與修正範例

以下是亂排後的 HTML 範例：

修正後應該像這樣：

5. 小技巧：利用編輯器自動補全

大部分的 CMS 或 Markdown 編輯器都支援「Tab」或「Shift+Tab」來調整標題層級。
你可以先寫成 H4、H5，完成後再一次性把它們提升到正確的層次；這樣不容易忘記前後關係。

6. 練習題：重新排列以下 H2、H3

原始碼:

請問正確的排列順序為何？ 你可以在下方寫出修正後的 HTML。

不要重複標題，省時又省心

在網站的每一頁中，標題就像是地圖標記。
若同一個關鍵字或短語出現在多個層級，搜尋引擎會難以判斷哪一段最重要，也可能把內容視為重複，進而影響排名。
更別說，使用者在瀏覽時看到重複的標題，容易感到困惑，失去點擊的動力。

先決定主題：在寫任何標題前，先想清楚這頁要傳達什麼核心訊息。
分層思考：H1 只用一次，用來說明整體主題；H2 與 H3 則依子內容逐層細化。
加入關鍵詞變化：把同一個關鍵字放在不同位置或結合副詞，讓語句不重複但仍保留搜尋關鍵。
例如：
<h1>台北美食指南</h1>
<h2>必吃小籠包推薦</h2>
<h3>鼎泰豐的經典小籠包</h3>
<h4>點餐技巧：先試甜湯再嚐肉餡</h4>

錯誤類型	可能影響	解決方式
H1 重複使用	搜尋引擎混淆、內容重複	只保留一次，將其他標題調整為 H2/H3
同一關鍵字在多個層級無變化	使用者閱讀體驗下降	加入形容詞或副詞差異化
標題過長且重複	影響點擊率	精簡至 70-80 字元，確保獨特性

標題與無障礙：讓螢幕閱讀器也能讀懂

讓螢幕閱讀器聽得見的標題寫法

這篇文章會帶領你了解如何撰寫讓螢幕閱讀器能夠準確理解的標題。從語意、結構到實際範例，內容都以簡單易懂的方式呈現。
在網頁設計中，一個好的標題不僅要吸引視覺，也必須讓使用螢幕閱讀器的人能快速抓住重點。

讓螢幕閱讀器聽得見的標題寫法

這篇文章會說明如何把標題寫得更易於螢幕閱讀器理解，從語意、結構到實際範例，都能讓你在設計時快速上手。

為什麼標題的語意很重要？

當使用者透過螢幕閱讀器瀏覽網頁，讀取速度往往比視覺快得多。如果標題字詞不夠精準或重複度高，系統就會把重點訊息忽略，造成資訊傳遞失真。

1. 避免冗長與重複的關鍵字

不要在同一個標題內重複『產品』、『服務』等詞語；
用簡短、具體的描述取代過度概括，例如把『最新 2025 年推出的手機系列』縮寫為『iPhone 15 系列』。

2. 使用層級結構說明內容關係

H1 應只出現一次，代表整個頁面的主題；
H2、H3 等子標題要依照實際內容層次排列，避免跳躍。

3. 讓閱讀器能正確辨識語意

在 HTML 標籤中使用 <h1> 到 <h6>，不要用 CSS 隱藏標題（如 display:none），因為螢幕閱讀器仍會讀取；
使用 aria-labelledby 或 aria-describedby 來提供額外說明，但避免過度使用。

實際範例：手機購物頁面

<h1 id="main-title">iPhone 15 系列 - 全新體驗</h1>
<h2>功能亮點</h2>
<ul>
  <li>全螢幕設計，視覺更寬闊。</li>
  <li>強化相機系統，捕捉每個細節。</li>
</ul>

H1~H6 的語意差別，你知道嗎？

在網頁設計裡，標題（H1~H6）不只是裝飾。它們告訴瀏覽器、搜尋引擎跟螢幕閱讀器「這段文字的層級關係是什麼？」

你知道 H1 到 H6 的語意差別嗎？

H1 是「主題」的最高等級，通常每個頁面只出現一次。

H1 的語意：整張網頁的核心內容。

例如：<h1>2025 年最佳手機排行</h1>

H2 是「子主題」，用來把大段文字拆成幾個區塊。

例如：<h2>旗艦機型</h2>

H3 表示更細分的子類別，讓閱讀者快速抓住重點。

例如：<h3>拍照功能</h3>

H4~H6 用於進一步拆分，常見於文章內部段落、資料表格或清單項目。

例如：<h4>前置鏡頭解析度</h4> 或 <h5>5000萬像素</h5>

為什麼要正確使用？

1️⃣ 搜尋引擎會利用標題層級判斷內容結構，幫助爬蟲抓取關鍵字。
2️⃣ 螢幕閱讀器會先讀出「第 1 標頭」或「第 3 標頭」，讓視障使用者能快速定位。

範例：螢幕閱讀器的語音輸出

(假設使用 VoiceOver)

• <h1>2025 年最佳手機排行</h1> → 讀「第 1 標頭，2025 年最佳手機排行」
• <h2>旗艦機型</h2> → 讀「第 2 標頭，旗艦機型」
• <h3>拍照功能</h3> → 讀「第 3 標頭，拍照功能」

實務建議：怎麼排版才能兼顧 SEO 與無障礙？

1️⃣ 每頁只用一個 H1，確定它描述整體內容。
2️⃣ 之後以 H2、H3 等級順序排列，保持層級對應（H2 > H3 > H4 …）。
3️⃣ 避免跳躍，如直接從 H2 跳到 H5；這會讓螢幕閱讀器感到混亂。

標籤	語意	主要用途
H1	主要主題	網頁標題、文章標題
H2	子主題	大區塊標題
H3	子子主題	小節標題
H4	更細分	段落或清單項目
H5	進一步拆分	表格欄位說明等
H6	最細層級	內部註解、補充資訊

字體大小跟對比度，關鍵在這裡

這裡是完整的 markdown 內容。

字體大小的基本規則

大標題 (H1) 建議使用 2rem 或以上，確保能快速抓住目光。舉例來說：font-size: 2rem; 在桌面瀏覽器上約等於 32px。
小段落文字（正文）建議至少 1rem (16px)，這是 WCAG 2.1 AA 標準所推薦的最小可讀字體大小。若使用比例設定，記得在父元素加 font-size: 100%; 或者直接寫 font-size: 1rem;。

行高與字距

行高 (line-height) 建議設為 1.4 至 1.6 的比例，能讓文字不顯擁擠。舉例：line-height: 1.5;。
字間距 (letter-spacing) 在標題中可適度加寬，例如 letter-spacing: 0.05em;，提升辨識度；正文則保持 0 或微量即可。

對比度的關鍵數值

大字體（至少 18pt/24px）：最小對比比率為 3:1。舉例：深灰文字 (#333) 與淺灰背景 (#eee) 的對比約為 4.5:1，已符合 AA 標準。
一般文字（16pt 以上）：需達到 4.5:1 的對比度。例如黑色文字 (#000) 在白色背景 (#fff) 上的對比率正好是 21:1，遠超要求。

色彩配合實例

主題色：選擇一個鮮明且易辨識的顏色，例如深藍 (#003366)。若用於標題文字，確保背景為淺灰或白色，以保持高對比。
輔助訊息：使用中等深度色調（如 #555）來呈現次要資訊，並確認其與背景的對比率不低於 4.5:1。

常見錯誤示範

小字大對比不足：正文文字 12px (#666) 在淺灰背景 (#f5f5f5)，對比度僅約 2:1，難以閱讀。解決方法：調整字體或加深文字顏色。
無足夠空白區域：標題與段落間留太小距離，使視覺上像是「黏在一起」。建議至少 0.5rem 的 margin 或 padding。

這裡是完整的 markdown 內容。

CSS 實作範例

標題樣式

/* 大標題 H1 */
H1 {
  font-size: 2rem;          /* 約 32px */
  line-height: 1.3;
  color: #003366;           /* 深藍色 */
  margin-bottom: 0.8rem;
}

/* 小標題 H2-H6 */
H2, H3, H4, H5, H6 {
  font-size: 1.5rem;        /* 約 24px */
  line-height: 1.4;
  color: #003366;
  margin-bottom: 0.6rem;
}

正文文字

p, li {
  font-size: 1rem;          /* 約 16px */
  line-height: 1.5;
  color: #333333;           /* 深灰色，對比度超過 4.5:1 */
  margin-bottom: 1rem;
}

高對比背景

/* 用於重點區塊的背景 */
.highlight {
  background-color: #f0f8ff;   /* 淺藍色背景，與主題文字形成足夠對比 */
  color: #003366;
  padding: 1rem;
}

測試工具與方法

線上對比度檢查器：將字體顏色、背景顏色輸入即可得到對比率。若你在開發時使用 VSCode，可安裝「Contrast Checker」插件，直接在編輯器中查看。
實際測試閱讀者：邀請視力稍弱或有閱讀障礙的同事，用手機或電腦真實瀏覽網頁，收集他們對字體大小、行距和對比度的感受。這是最直接確認「可讀性」的方法。

進階技巧：動態文字尺寸

使用 rem 單位配合根元素 (html) 的 font-size，讓整個網站能夠隨使用者瀏覽器設定自動調整。範例：

/* 根據瀏覽器預設字體大小（默認 16px）進行縮放 */
html {
  font-size: 100%; /* 1rem = 16px */
}
@media (min-width: 768px) {
  html { font-size: 112.5%; } /* 18px */
}

可讀性提示：若使用者在手機上縮放字體，確保 meta viewport 的配置不會限制文字放大。常見做法是加入 <meta name="viewport" content="width=device-width, initial-scale=1.0">，並避免設定 user-scalable=no。

小結

字體大小與對比度不是單一的「美觀」問題，而是可讀性、無障礙和 SEO 的核心。正確設置能讓所有使用者都能順暢瀏覽內容，並提升網站在搜尋引擎中的信譽。
透過上述 CSS 範例與測試工具，你可以快速驗證自己的頁面是否符合 WCAG 標準，同時也能確保文字對比度足夠、行距適中。

排查標題問題：常見錯誤與快速修復技巧

頁面沒 H1？先檢測再補上！

為什麼 H1 重要？

在網頁設計裡，H1 標題相當於文章的標題。搜尋引擎會把它視為「主題」訊號，能幫你提升 SEO 成效。若頁面沒有 H1，Google 就像是聽不到你想說什麼…

舉例：如果你寫一篇關於「台北必吃早餐」的文章，但卻把所有標題都寫成 H2 或 H3，那搜尋引擎就會覺得這篇文章沒有主題，結果排名可能跟不夠清楚的頁面差距很大。

如何檢測頁面是否有 H1？

使用瀏覽器開發者工具

在 Chrome 或 Edge 之類的瀏覽器中打開你想檢查的頁面。
按 F12 或右鍵選「檢查」，進入開發者工具。
切到 Elements（元素）分頁，搜尋 <h1> 標籤：

<div id="content">
  <h2>這裡沒有 H1</h2>
  <p>…</p>
</div>

若找不到 <h1>，就代表目前頁面缺失主題標籤。

用命令列快速抓取

如果你想一次檢查多個頁面，可以用 curl 先抓起來，再配合 grep 搜尋：

curl -s https://example.com/page | grep -i '<h1>'

若輸出為空，表示該 URL 沒有 H1。這種方式特別適合 SEO 工具自動化檢測。

若沒找到，怎麼補上？

WordPress 範例

在文章編輯器的「標題」欄位輸入你想要的主題文字，例如：「台北必吃早餐」。系統會自動產生 <h1> 標籤，除非你使用的是多頁面佈局（如 WooCommerce 的產品頁）。

Shopify 範例

在 Shopify 後端編輯主題時，找到 product.liquid 或 page.liquid 檔案，確認裡面有類似以下程式碼：

<h1 class="title">{{ page.title }}</h1>

若沒有，請自行加入。記得在保存前先預覽，確定標籤正確顯示。

常見錯誤與修復技巧

多個 H1

某些網站會把每個區塊都用 <h1> 包起來。雖然 HTML5 允許多個 H1，但最好只保留一個真正的主題標籤，其他區域改成 H2 或 H3。

空白 H1

有時候系統會產生 <h1></h1>，但裡面沒有文字。這樣不僅看起來奇怪，也無法提供搜尋引擎任何訊息。務必檢查並填入適當標題。

重複標題

如果多個頁面使用相同的 H1，可能會被視為重複內容。確保每篇文章都有獨一無二、能描述內容的標題。

小結

檢測：用瀏覽器開發者工具或簡易命令列抓取。
補上：在 CMS 編輯器中輸入主題文字，或手動加 <h1> 標籤。
避免錯誤：只保留一個真實主題、不要空白、保持獨特性。

把這些步驟落到實際操作，你的頁面就能在搜尋結果中更容易被抓取，提升可見度。

H2 沒跟著 H1 出現，怎麼辦？

有時候你會發現在一個頁面裡，第一個出現的標題竟然是 H2，而真正的主標題（H1）卻被放在後面。這不只影響搜尋引擎對內容層級的判斷，也可能讓螢幕閱讀器使用者感到困惑。

為什麼會發生？

佈景主題或插件亂寫：某些佈景主題預設把 H2 直接放在頁首，忘了先產生 H1。
使用者手動編輯：在 Gutenberg 或其他區塊編輯器裡，直接拖到最上面就會成為 H2。
重複的 H1：有時候系統已自動生成一個 H1（例如文章標題），你再自己加上一個 H1 之後又在前面插入了 H2，結果造成混亂。

為什麼重要？

SEO：搜尋引擎依據標題層級來判斷主題與子主題。若 H2 跟在 H1 前，可能會讓關鍵字的權重被誤讀。
可存取性：螢幕閱讀器會根據標題順序朗讀內容。H2 先於 H1 會使使用者難以快速抓住頁面結構。

如何找出問題？

瀏覽器開發者工具：按 F12，切到 Elements 面板，搜尋 <h2> 與 <h1> 的位置。若第一個 <h2> 在最上方且沒有前面的 <h1>，就代表有錯。
標題層級檢查插件（WordPress）：安裝「Headline Hierarchy」或「Yoast SEO」。它們會在後台顯示每一頁的標題結構。

快速修復技巧

1. 調整佈景主題範本

進入 wp-content/themes/你的佈景名稱/，尋找產生 H2 的 PHP 檔案（通常是 content-page.php、page.php 或 header.php）。將 <h2> 前面加上 <h1> 或改成正確的結構。範例如下：
```
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="entry-content">
  <?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
```

2. 使用「Snippet」插件插入 PHP

若你不想改動佈景主題檔案，可以安裝「Code Snippets」或類似插件，在網站前端加上一段程式碼，確保 H1 在最上：

function ensure_h1_first() {
  if ( is_page() && ! has_action( 'wp_head', 'add_h1_before_h2' ) ) {
    echo '<h1>' . get_the_title() . '</h1>';
  }
}
add_action( 'wp_body_open', 'ensure_h1_first' );

3. Gutenberg 區塊編輯器調整順序
- 在「區塊」面板，確認第一個區塊的標題層級是 H1。若不是，點擊右側設定圖示，把「標題層級」改成 H1。
4. 手動修正 HTML

如果你使用的是自訂 HTML 區塊，只要把 <h2> 改成 <h1> 或在前面插入一個 <h1> 即可。舉例：
```

<h2>產品特色</h2>

<h1>產品特色</h1>
```
5. 檢查重複的 H1

有時候 WordPress 會自動把文章標題放進一個 <h1>。如果你在內容裡再次加上 H1，就會產生兩個 H1，並可能讓後面的 H2 跟不上。只要保留一個 H1（通常是頁首），就能避免此問題。

小結

先找出錯誤：用開發者工具或插件確認 H2 真的在最前面。
修正方式多樣：從佈景主題檔案、插件程式碼，到 Gutenberg 區塊，依照自己的熟悉度選擇方法。
持續檢查：每次更新佈景或安裝新插件時，都可以重新跑一次標題層級檢查，確保結構不被破壞。

同一標題太多？別擔心，這裡有對策

你會發現同一個 H1 或 H2 標題在不同頁面或相同頁面內重複出現，造成搜尋引擎抓取不清楚、使用者點擊後又不知道該往哪邊走。別著急，我們先把重複的標題找出來，再一步步給予差異化。

1️⃣ 先定位問題：用瀏覽器 DevTools 或簡易腳本一次抓

在 Chrome 的開發者工具 (F12) → Console，輸入 document.querySelectorAll('h1, h2').forEach(el => console.log(el.textContent.trim(), el)) 就能把所有 H1/H2 及其內容列出來。
如果你想快速過濾重複項，可以用 Notepad++ 或 VS Code 的「搜尋並統計」功能，貼上上述輸出的文字，再看哪些標題重複。

2️⃣ 給每個標題加上獨特的描述：不要只靠『產品介紹』或『服務項目』

在同一頁面如果有兩個「產品介紹」H2，改成「手機產品介紹」和「筆電產品介紹」。
當跨多個子頁面時，保持 H1 的一致性，但在 URL 或 Breadcrumb 裡加入關鍵字，例如：example.com/服務/顧客服務。

3️⃣ 用「Breadcrumbs」或「小標題」做層次提示

在每個頁面頂部放一條麵包屑路徑，像是 首頁 > 產品 > 手機，即使 H1 重複，使用者也能立刻知道所在位置。
小標題（H3/H4）可以補充說明，例如「手機型號」或「配件選項」，不會影響主標題重複的問題。

4️⃣ 快速修復技巧：利用 CMS 或 WordPress 的範本功能

在 WordPress 裡，先把所有頁面匯入一個自訂欄位「Page Title」並使用 {{post.title}} – {{post.category.name}} 來動態生成標題。
如果你用的是純 HTML，可以在每個 <title> 標籤裡加上唯一識別字，例如：<title>手機產品介紹 – Example.com</title>，這樣就能避免搜尋引擎把同一 H1 視為重複。

5️⃣ 檢查結果：用「Google Search Console」或任何 SEO 工具確認標題已唯一

在 GSC 的「覆蓋範圍」報告裡，搜尋 duplicate title 或 missing title 來看是否還有問題。
若工具仍顯示重複，回到第一步再調整，直到所有標題在同一域名內都不同為止。

標題層級結構 (H1~H6)

標題層級結構：H1~H6 的基礎教學

什麼是 H1 到 H6？

HTML 標題標籤的結構

SEO 與可存取性

範例：正確使用標題層級

小技巧

每頁只能有一個 H1，別搞錯了！

為什麼只能有一個 H1？

正確的標題結構範例

錯誤示範：多個 H1

如何在 CMS 裡確保只有一個 H1

小結

標題層級的重要性

排好 H2、H3 的基本規則

實際範例

常見錯誤與修正技巧

快速檢查清單（小工具）

小結

標題最佳實踐：關鍵字與結構的完美結合

關鍵字在標題的妙用

為何把關鍵字塞進標題

好處與風險

如何自然插入

範例對比

常見錯誤

小技巧

小結

1. 為何 H2 與 H3 需要有先後關係

2. 先決條件：了解內容層次

3. 如何設計符合邏輯的標題結構

4. 常見錯誤與修正範例

5. 小技巧：利用編輯器自動補全

6. 練習題：重新排列以下 H2、H3

標題與無障礙：讓螢幕閱讀器也能讀懂

讓螢幕閱讀器聽得見的標題寫法

為什麼標題的語意很重要？

1. 避免冗長與重複的關鍵字

2. 使用層級結構說明內容關係

3. 讓閱讀器能正確辨識語意

實際範例：手機購物頁面

你知道 H1 到 H6 的語意差別嗎？

H1 的語意：整張網頁的核心內容。

H2 是「子主題」，用來把大段文字拆成幾個區塊。

H3 表示更細分的子類別，讓閱讀者快速抓住重點。

H4~H6 用於進一步拆分，常見於文章內部段落、資料表格或清單項目。

為什麼要正確使用？

範例：螢幕閱讀器的語音輸出

實務建議：怎麼排版才能兼顧 SEO 與無障礙？

字體大小的基本規則

行高與字距

對比度的關鍵數值

色彩配合實例

常見錯誤示範

CSS 實作範例

測試工具與方法

進階技巧：動態文字尺寸

小結

排查標題問題：常見錯誤與快速修復技巧

為什麼 H1 重要？

如何檢測頁面是否有 H1？

使用瀏覽器開發者工具

用命令列快速抓取

若沒找到，怎麼補上？

WordPress 範例

Shopify 範例

常見錯誤與修復技巧

多個 H1

空白 H1

重複標題

小結

H2 沒跟著 H1 出現，怎麼辦？

為什麼會發生？

為什麼重要？

如何找出問題？

快速修復技巧

1. 調整佈景主題範本

2. 使用「Snippet」插件插入 PHP

3. Gutenberg 區塊編輯器調整順序

4. 手動修正 HTML