h1 到 h6 怎麼排？標題階層與 SEO 的關係
標題標籤 是搜尋引擎推導 頁面大綱 的主要依據。它讀 <h1> 到 <h6> 的順序與層級，得到的就是一份目錄，這一頁講什麼、分成哪幾個部分、每個部分下面又有哪些細項。
寫對了，這份目錄免費送上；寫錯了，它得改用猜的。
標題建立的是大綱
<h1>網頁效能優化</h1>
<h2>圖片</h2>
<h3>格式選擇</h3>
<h3>響應式尺寸</h3>
<h2>字型</h2>
<h3>中文字型的體積</h3>
<h2>程式碼</h2>搜尋引擎從這段標記讀到的大綱是：
網頁效能優化
├─ 圖片
│ ├─ 格式選擇
│ └─ 響應式尺寸
├─ 字型
│ └─ 中文字型的體積
└─ 程式碼這份大綱有兩個用途
- 判斷頁面涵蓋哪些子題：每個
<h2>都可能對應一組搜尋需求。 - 抓取搜尋結果的摘要：使用者搜「中文字型太大」時，搜尋引擎可能直接摘出那個
<h3>底下的段落。
所以標題該用 讀者會搜尋的說法 來寫，而不是「介紹」、「說明」、「其他」這類看不出主題的詞。
一頁一個 h1
規格上允許多個 <h1>，搜尋引擎也不會因為多個而扣分。但實務上建議 一頁一個：
| 理由 | 說明 |
|---|---|
| 主題毫無歧義 | 只有一個最上層標題，這一頁在講什麼很明確 |
| 大綱結構最清楚 | 樹狀結構只有一個根 |
與 <title> 呼應 | 兩者主題一致，訊號互相強化 |
真正該避免的是完全沒有 h1
比「有兩個 <h1>」嚴重得多的是 一個都沒有。這在用元件拼裝頁面時很常見，每個元件都用 <h2> 起頭，結果整頁沒有主標題。
不要跳級
從 <h1> 直接跳到 <h4> 時，中間少了兩層，搜尋引擎與螢幕閱讀器都無法判斷這一段究竟屬於哪一層。
<!-- 跳級：大綱出現斷層 -->
<h1>網頁效能優化</h1>
<h4>圖片格式選擇</h4>
<!-- 正確 -->
<h1>網頁效能優化</h1>
<h2>圖片格式選擇</h2>往下只能一級一級，往上可以跳
<h1>主題</h1>
<h2>第一節</h2>
<h3>細項</h3>
<h4>更細的項目</h4>
<h2>第二節</h2> <!-- 從 h4 跳回 h2 是合理的 -->從 <h4> 回到 <h2> 表示「這一節結束了，開始新的一節」，完全正常。限制只在往下開新層級時不能跨級。
不要拿標題當字級用
這是最常見的誤用
<!-- 錯誤：只是想讓這行字大一點 -->
<h3>限時優惠</h3>
<!-- 錯誤：真正的章節標題卻因為視覺上小就用 p -->
<p class="section-title">付款方式</p>標題標籤表達的是 結構層級，不是視覺大小。
判斷方式很單純，問一句話：這段文字是不是一個章節的名字？
| 是章節名字 | 不是章節名字 |
|---|---|
用 <h2> 到 <h6> | 用 <p> 或 <span> 加樣式 |
視覺大小完全交給 CSS：
/* 章節標題，但視覺上不需要很大 */
h3 {
font-size: 1.1rem;
}
/* 只是想強調的文字，不是章節 */
.highlight {
font-size: 1.5rem;
font-weight: 700;
}h1 和 title 的分工
<title> | <h1> | |
|---|---|---|
| 給誰看 | 還沒進站的人（搜尋結果） | 已經進站的人 |
| 可以加品牌名 | 是 | 通常不必 |
| 長度 | 中文 30 字內 | 較彈性 |
| 主題 | 必須一致 | 必須一致 |
<title>網頁效能優化：從圖片、字型與程式碼三個方向下手｜某某公司</title><h1>網頁效能優化</h1>主題不一致會有兩個後果
- 使用者覺得被騙：標題承諾的東西頁面上沒有，跳出率上升。
- 搜尋引擎可能改寫標題：當它認為
<h1>比<title>更貼切時，會改用<h1>。
所以 <h1> 也是標題的 第二道防線，值得一樣寫好。
側邊欄與頁尾的標題
它們同樣算在文件大綱裡。處理方式是用 地標元素 區分區塊歸屬：
<main>
<h1>文章標題</h1>
<h2>第一節</h2>
<h2>第二節</h2>
</main>
<aside>
<h2>熱門文章</h2>
<!-- 這個 h2 屬於側邊欄，不是文章的第三節 -->
</aside>
<footer>
<h2>關於我們</h2>
</footer>用地標元素而不是降級
有人會把側邊欄的標題寫成 <h4> 來「避開」文章的階層，那反而讓大綱更亂。正確做法是讓 <main>、<aside>、<footer> 各自成為獨立的區塊，裡面的標題層級自成一套。
一份完整的頁面範例
<body>
<header>
<nav aria-label="主要導覽">
<!-- 導覽連結，通常不需要標題 -->
</nav>
</header>
<main>
<article>
<h1>網頁效能優化</h1>
<p>導言……</p>
<h2>圖片</h2>
<h3>格式選擇</h3>
<h3>響應式尺寸</h3>
<h2>字型</h2>
<h3>中文字型的體積</h3>
<h2>常見問題</h2>
</article>
</main>
<aside>
<h2>延伸閱讀</h2>
</aside>
<footer>
<h2>聯絡方式</h2>
</footer>
</body>檢查清單
| 項目 | 標準 |
|---|---|
每頁有一個 <h1> | 必備 |
| 標題階層沒有往下跳級 | 必備 |
| 沒有為了字級大小挑標籤 | 必備 |
<h1> 與 <title> 主題一致 | 必備 |
| 標題文字帶得出主題（非「介紹」、「其他」） | 建議 |
| 主內容、側邊欄、頁尾用地標元素分開 | 建議 |
用瀏覽器擴充功能快速檢查
無障礙檢查工具通常都能列出頁面的標題大綱，一眼就看出有沒有跳級或缺少 <h1>。Lighthouse 的無障礙類別也會檢查標題順序。
常見問題
一頁真的只能有一個 h1 嗎？
規格上允許多個，搜尋引擎也不會因為多個而扣分。但實務上建議一頁一個，因為那讓頁面主題毫無歧義，也讓大綱結構最清楚。真正該避免的是完全沒有主標題。
標題跳級會有什麼問題？
從第二級直接跳到第四級會讓大綱出現斷層，搜尋引擎與螢幕閱讀器都無法判斷這一段究竟屬於哪一層。它不會直接影響排名，但會讓頁面結構的表達失準，也是 無障礙檢查 會標記的問題。
為了字級大小挑標籤可以嗎？
不可以，這是最常見的誤用。標題標籤表達的是結構層級，不是視覺大小。想要某段文字比較大就用樣式調整，把標題標籤留給真正的章節。反過來說，真正的章節即使視覺上很小，也該用標題標籤。
h1 要和 title 寫一樣嗎？
不必一樣，但主題要一致。網頁標題 面向搜尋結果，可以加上品牌名與更多修飾語；主標題面向已經進站的讀者，通常寫得更簡潔。兩者主題不一致才是問題，那會讓點進來的人覺得被騙。
側邊欄與頁尾的標題算在階層裡嗎？
算，它們同樣是文件大綱的一部分。做法是把主要內容包在 <main> 裡、側邊欄放在 <aside> 裡，用 地標元素 區分區塊歸屬，這樣即使兩邊都有同層級的標題，結構也不會混淆。
延伸閱讀
參考資料：MDN：標題元素 h1 到 h6