1. 我把標題階層當成搜尋引擎讀懂一頁的第一線索
做 SEO 這二十多年,我養成一個習慣:拿到一頁要優化的內容,我不先看文案,先把它的標題結構單獨拉出來看一遍。因為 H1 到 H6 的層級,就是這頁交給搜尋引擎的目錄。目錄清楚,搜尋引擎才知道哪個是主題、哪些是子題、彼此怎麼從屬;目錄混亂,再好的內容也像一本沒有章節、全部同一個字級的書,讀的人抓不到重點,搜尋引擎也一樣。
標題階層的問題有個特性:它不會報錯,頁面照樣顯示得好好的,所以很容易被當成小事。但它影響的是搜尋引擎對整頁語意的理解,而理解錯了,排名與呈現都會跟著受影響。這篇我把標題階層拆成四個核心原則:每頁一個 H1、逐級不跳級、title 與 H1 一致、description 與內容一致,並附上正確與錯誤的 HTML 對照。
1.1 H1 到 H6 到底在跟搜尋引擎說什麼
HTML 的六級標題本質上是一個階層樹。H1 是這頁的根,代表整頁的主題;H2 是主要段落的章節;H3 是章節底下的小節,依此類推。搜尋引擎讀這棵樹,是為了理解內容的組織方式與主題從屬關係。當它看到 H2「營業時間」底下有 H3「平日」與 H3「假日」,它就能推斷出這三者的關係;若這三個標題都用同一級,關係就消失了。
1.2 排版的大小和語意的層級是兩回事
我很常遇到一種誤解:設計師覺得這行字要大,就直接套 H1;覺得這行字要小,就套 H4。這是把視覺大小和語意層級混為一談。標題標籤選哪一級,依據的應該是它在內容結構裡的角色,不是它看起來多大。字級大小完全可以、也應該交給 CSS 控制。我的原則是:先用正確的標題階層把語意結構定好,再用樣式把它調成想要的視覺效果,而不是反過來用視覺需求決定標籤。
| 常見誤解 | 正確觀念 |
|---|---|
| 字要大所以用 H1 | 語意上是主題才用 H1,大小交給 CSS |
| 字要小所以用 H5 | 依內容從屬關係選層級,不依視覺大小 |
| H1 一定要在最上面最顯眼 | H1 是語意主題,位置與樣式可彈性安排 |
2. 每頁一個 H1:多一個或少一個都在稀釋主題
這是標題階層最基本、也最常被違反的一條。我看過的兩種極端都很多:一頁塞了好幾個 H1,或整頁根本沒有 H1。兩者都會讓搜尋引擎抓不準這頁的核心主題。
2.1 為什麼一頁只該有一個 H1
H1 代表整頁的主題宣告。當一頁只有一個 H1,搜尋引擎的判斷很單純:這就是主題。當一頁出現多個 H1,例如把「最新文章」「熱門推薦」「關於我們」都設成 H1,等於同時宣告了好幾個主題,搜尋引擎得自己猜哪個才是重點,主題訊號就被稀釋了。反過來,完全沒有 H1 的頁面,則是連主題宣告都缺席,搜尋引擎只能退而從 title 或內文去推斷。維持每頁恰好一個 H1,是給搜尋引擎最乾淨的訊號。
2.2 正確與錯誤的 H1 寫法
錯誤的做法是把並列的區塊各設一個 H1:
<!-- 錯誤:一頁多個 H1 -->
<h1>首頁介紹</h1>
<h1>最新文章</h1>
<h1>關於我們</h1>正確的做法是留一個 H1 當主題,其餘降為 H2:
<!-- 正確:單一 H1,其餘為 H2 -->
<h1>範例網站｜專業 SEO 顧問服務</h1>
<h2>最新文章</h2>
<h2>關於我們</h2>我的實務建議是,H1 內容要能單獨回答「這是什麼頁」。一個只寫「歡迎光臨」的 H1 幾乎沒有語意價值;寫成「範例網站｜專業 SEO 顧問服務」才真正描述了主題。
2.3 H1 和網站標誌、橫幅的關係
常有人問我,網站左上角的品牌標誌要不要包在 H1 裡。我的答案是不要,除非那正好是首頁。品牌標誌在每一頁都出現,如果每頁的 H1 都是品牌名,那所有頁面的主題宣告就都一樣了,反而失去區辨性。正確的安排是:標誌用連結加上圖片的替代文字處理即可,H1 留給該頁真正的主題。首頁是唯一的例外,首頁的主題本來就常常等於品牌本身,這時 H1 放品牌加簡短定位是合理的。
3. H2 與 H3 逐級遞進:不跳級,大綱才立得起來
有了唯一的 H1,接下來是它底下的層級要一級一級往下,不能跳。跳級指的是從 H1 直接用到 H3、H4,中間跳過 H2。這在視覺上可能看不出問題,但在語意樹上會出現斷層。
3.1 跳級為什麼是問題
當搜尋引擎讀到 H1 之後直接遇到 H3,它會困惑:H3 應該從屬於某個 H2,但那個 H2 不見了,這個 H3 到底掛在誰底下。這種結構斷層會讓內容的從屬關係變得模糊。輔助技術例如螢幕閱讀器也依賴標題層級讓使用者跳著瀏覽,跳級同樣會破壞它們建立的導覽大綱。層級要遞進,意思是可以 H2 之後接 H3,也可以 H3 之後回到下一個 H2,但不該 H1 之後憑空冒出 H4。
3.2 正確與錯誤的層級範例
錯誤的做法是跳過中間層級:
<!-- 錯誤:H1 直接跳到 H3 -->
<h1>SEO 網站結構完整說明</h1>
<h3>搜尋引擎如何理解網站層級</h3>正確的做法是讓層級連續:
<!-- 正確:逐級遞進 -->
<h1>SEO 網站結構完整說明</h1>
<h2>為什麼網站階層很重要</h2>
<h3>搜尋引擎如何理解網站層級</h3>
<h3>層級太深會發生什麼事</h3>
<h2>如何規劃合理的階層</h2>這樣的結構讀起來就是一份清楚的大綱:主題底下有兩個章節,第一個章節底下有兩個小節。搜尋引擎與螢幕閱讀器都能據此建立正確的內容地圖。
3.3 用大綱檢查法自我驗收
我驗收標題階層有個很簡單的方法,分享給你:把頁面裡所有的 H1 到 H6 標籤按出現順序抽出來,只看標題文字與層級,不看內文。如果單看這份大綱就能理解整頁在講什麼、彼此關係清楚,結構就是對的;如果看到某個 H3 不知道它從屬於誰,或發現有兩個 H1,問題就浮現了。瀏覽器有不少擴充套件能一鍵列出頁面的標題大綱,用它跑一遍比逐行看原始碼快得多。這個方法我用了很多年,幾乎每次都能在一分鐘內抓出跳級或多 H1 的毛病。
4. title 與 H1 要一致,但不必一模一樣
title 和 H1 常被混淆,其實它們是兩個不同位置、服務不同對象的元素。搞清楚分工,才知道「一致」到底指什麼。
4.1 title 與 H1 各自的角色
title 標籤出現在瀏覽器分頁與搜尋結果的藍色標題,主要對象是還沒進站的使用者;H1 出現在頁面內,對象是已經進站的使用者。兩者要「一致」,指的是主題必須一致,不能一個講 A、一個講 B,否則使用者從搜尋結果點進來會有落差感,搜尋引擎也會覺得訊號矛盾。但它們不必逐字相同。title 通常會加上品牌名、控制在較短的字數內以免被截斷;H1 可以寫得更完整、更貼近內文語氣。
<!-- title 與 H1 主題一致,措辭可略有不同 -->
<title>網站 SEO 結構檢查指南｜範例網站</title>
...
<h1>網站 SEO 結構檢查完整說明</h1>4.2 重複與衝突的 title 錯誤
title 有兩種常見錯誤。第一種是一頁放了多個 title 標籤:
<!-- 錯誤:多個 title,搜尋引擎只讀第一個 -->
<title>首頁｜範例網站</title>
<title>品牌介紹</title>搜尋引擎只會採用第一個,後面的被忽略,但這代表你的頁面模板可能有問題,值得追查。第二種更常見的是全站 title 重複,每一頁的 title 都一樣,搜尋引擎無法區辨,也降低了每頁在搜尋結果的點擊誘因。正確做法是每頁有唯一、能描述該頁主題的 title,並與該頁 H1 主題呼應。我在稽核時經常發現,全站 title 重複往往不是內容問題,而是模板沒有把頁面標題正確帶入 title 變數,一改就全站修好。
5. meta description 與內容一致:別讓摘要說一套、內文做一套
meta description 不是排名因素,但它常被搜尋引擎拿來當搜尋結果的摘要,直接影響使用者要不要點進來。它的核心要求是:準確概述這頁的內容,而且與內文一致。
5.1 description 的作用與正確寫法
description 的角色是這頁在搜尋結果的「廣告詞」。它應該用一到兩句話講清楚這頁能幫使用者解決什麼,長度控制在能完整顯示、不被截斷的範圍。寫的時候我會確保它呼應頁面實際內容,把使用者最可能在意的重點放進去。
<!-- 正確:概述內容且與內文一致 -->
<meta name="description"
content="從網站階層、URL、標題結構到結構化資料,一步步教你檢查網站架構是否符合 SEO 標準,附可直接對照的驗收清單。">5.2 缺漏、重複與內容不符三種錯誤
description 的三種典型錯誤我用一張表整理:
| 錯誤情況 | 造成的問題 | 正確做法 |
|---|---|---|
| 完全沒寫 description | 搜尋引擎自行抓內文片段,常不精準 | 每頁補上一句概述 |
| 全站共用同一段 description | 各頁摘要相同,降低點擊誘因 | 每頁依內容寫獨立描述 |
| description 與內文不符 | 使用者點進來有落差,提高跳出 | 描述如實反映頁面內容 |
其中我最在意「與內文不符」這一種。有些人為了衝點擊,把 description 寫得很聳動,但頁面根本沒提供那些內容。使用者被吸引進來卻找不到承諾的東西,很快就離開,這種落差長期反而傷害這頁的表現。description 要吸引人,但吸引的方式是誠實地講清楚頁面真正提供的價值,而不是給一個做不到的承諾。標題階層、title、description 三者一路對齊到內文,才是我認為健康的頁面語意結構。
6. 常見問題
6.1 一頁真的完全不能有兩個 H1 嗎
從語意最乾淨的角度,我的建議是維持每頁一個 H1。雖然 HTML5 的分區元素理論上允許多個 H1 各自屬於不同區塊,但實務上搜尋引擎與輔助技術對這種用法的解讀並不一致,風險大於好處。與其去賭它會不會被正確理解,不如維持單一 H1 這個最穩妥的做法,把並列的區塊標題降為 H2,結果既清楚又不會出錯。
6.2 標題裡一定要塞關鍵字嗎
標題自然地包含主題字是好的,因為它本來就該描述這段在講什麼,而主題字通常就是使用者搜尋的詞。但我不贊成刻意堆疊。一個為了塞關鍵字而讀起來不通順的 H2,對使用者和搜尋引擎都是扣分。原則是先寫出一個準確、好讀的標題,主題字自然會在裡面;如果為了塞字而犧牲了可讀性,那就本末倒置了。
6.3 沒有 H1 但有很大的標題文字,搜尋引擎看得懂嗎
搜尋引擎看的是標籤的語意,不是文字的視覺大小。一段用 CSS 放到很大的 div 文字,在搜尋引擎眼中就只是一段普通文字,不會被當成 H1。所以就算畫面上有個很醒目的大標,只要它不是用標題標籤寫的,這頁在語意上仍然缺少 H1。我在稽核時常遇到這種「看起來有標題、原始碼裡沒標題」的頁面,補上正確的標題標籤是很低成本、效果卻很直接的優化。
6.4 title 被搜尋引擎自己改寫了,還需要好好寫嗎
需要。搜尋引擎有時會依查詢情境改寫顯示的標題,但它改寫的依據仍然是你提供的 title 與頁面內容。你給的 title 寫得清楚、貼題,被改寫的機率就低;你給的 title 模糊或與內容不符,才更容易被系統換掉。與其擔心被改寫,不如把 title 寫準,那本來就是你能掌握的部分。
6.5 description 要多長才對
沒有一個絕對字數,重點是能在搜尋結果完整顯示、不被截斷,同時把重點講清楚。以中文來說,一到兩句、能完整表達這頁價值的長度就足夠。過短會顯得資訊不足,過長則會被截斷,後半段等於白寫。我的做法是先把想傳達的重點寫出來,再修到精簡,而不是為了湊字數硬加內容。
6.6 改了標題階層,多久會看到 SEO 效果
標題階層屬於幫助搜尋引擎理解內容的基礎工程,它通常不是那種改完排名立刻跳動的因素,而是讓內容被正確理解的前提。搜尋引擎需要重新抓取、重新評估這頁,才會反映調整,時間視抓取頻率而定。我的建議是把它當成內容品質的基本功來做,而不是期待它像開關一樣立即見效。結構對了,後續其他優化才站得住腳。