語意化 HTML 為什麼影響 SEO？標籤選擇的判斷原則

Q: 一頁可以有幾個 h1？

規格上允許多個，但實務上建議一頁一個。單一 h1 讓頁面主題毫無歧義，也讓大綱結構清楚。真正要避免的是完全沒有 h1，或是把 h1 當成字級樣式在用。

搜尋引擎拿到一份 HTML 之後，要先回答兩個問題：這一頁的主題是什麼，以及 哪一段才是主要內容。語意化 HTML 的作用，就是把這兩個答案直接寫在標籤裡，而不是讓它去猜。

語意化實際幫上什麼

語意標籤不是「比較有品」的寫法，它提供三種搜尋引擎真的會用到的資訊。

提供什麼	靠哪些標籤	搜尋引擎拿它做什麼
頁面大綱	`<h1>` 到 `<h6>`	判斷主題與各段落的層級關係
內容主體	`<main>`、`<article>`	區分主要內容與導覽、頁尾、廣告
連結意圖	`<a>` 的錨點文字	判斷被連結頁面的主題

除此之外還有一層間接效益：語意標籤同時是無障礙的基礎，而無障礙做得好的頁面，通常結構也清楚。

div 濫用的代價

全是 div 不會被扣分，但會失去加分

搜尋引擎沒有「div 太多就降權」這條規則。真正的損失是 它必須改用猜的：靠版面位置、文字量比例、連結密度去推測哪一段是主內容。

猜錯的後果很具體，側邊欄的推薦文章被當成主要內容，摘要就抓錯段落；頁尾的版權宣告被當成內文，頁面主題就模糊掉。

比較一下同一段版面的兩種寫法：

html

<!-- 搜尋引擎只能靠位置猜 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">
  <div class="title">網頁標題</div>
  <div class="post">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

html

<!-- 角色全部寫在標籤裡 -->
<header>...</header>
<nav>...</nav>
<main>
  <h1>網頁標題</h1>
  <article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>

第二段沒有多花任何力氣，卻讓「哪一段是主內容」變成不需要判斷的事實。

挑標籤的三步決策

不必背標籤清單，照這個順序問自己就好：

這段內容在版面上扮演什麼角色？ 是頁首、導覽、主內容、附註還是頁尾？有對應的地標元素就用它，見地標元素。
這段內容有沒有自己的標題？ 有的話用 <h2> 到 <h6> 標出層級，不要跳級，見標題階層。
前兩步都沒有對應標籤嗎？ 才用 <div> 或 <span> 。它們是「沒有語意」的容器，是最後手段而不是預設選項。

最容易選錯的三組

情境	常見錯誤	該用什麼
標題只是想把字放大	用 `<h2>` 當字級	用 `<p>` 加樣式；`<h2>` 留給真的章節
可點擊的操作	用 `<div onclick>`	導頁用 `<a>` ，動作用 `<button>`
一組並列項目	用連續的 `<div>`	用 `<ul>` ，讓「這是一組」被表達出來

第二組尤其關鍵：<div onclick> 不能用鍵盤操作、螢幕閱讀器不會念成可點擊、搜尋引擎也讀不到那是一個連結。三個問題一次來。

這一組還有這些主題

主題	說明
標題階層與 SEO 的關係	單一 `<h1>` 的實務討論、不跳級原則、與網頁標題的分工
地標元素與網頁結構訊號	五個地標元素的使用時機、`<article>` 與 `<section>` 的取捨
內部連結與錨點文字	錨點文字撰寫原則、`nofollow` 用法、孤兒頁面
無障礙與 SEO 的交集	兩者共用的基礎，以及 aria 該補與不該補的界線

和結構化資料的分工

這兩件事常被混在一起，但層次不同：

	語意化 HTML	結構化資料
描述什麼	版面角色（這是導覽、這是主內容）	內容語意（這是一篇文章、一個商品）
寫在哪	HTML 標籤本身	額外的 `ld+json` 區塊
誰該做	所有網頁	有對應內容類型的頁面
沒做的後果	結構要靠猜	拿不到複合式搜尋結果