官網『文章目錄』(Table of Contents / TOC) 設計完整攻略：中小企業如何用一塊小區塊讓長文章有人願意讀完、順便幫 SEO 加分

先講結論：一篇 3,000 字的文章，沒有目錄就是在挑戰讀者的耐心

你有沒有發現：自己在 Google 找答案的時候，點進一篇看起來很專業的長文，滑了兩下沒看到重點，就直接按上一頁？

訪客在你的官網也是這樣。

中小企業經營部落格、服務頁、案例頁，很努力寫了 2,000、3,000 字的長內容，想把專業講清楚。但如果整篇從頭到尾就是一整片文字牆，訪客只會做兩件事：一是快速往下滾找他要的段落，二是找不到就直接離開。

今天要講的『文章目錄』（Table of Contents，簡稱 TOC）就是解這件事的：在文章開頭放一塊小小的清單，把段落標題列出來，訪客一點就能跳到對應段落。看起來只是一塊小區塊，但它同時做了三件事——降低跳出率、提升閱讀完成率，還順便幫 Google SEO 加分。

Photo by Joel Muniz on Unsplash

TOC 到底能帶來什麼具體效益？

訪客一進來看到目錄，能直接判斷「這頁有沒有我要的答案、答案在哪一段」，願意留下來看的機率就高很多。相對的，跳出率會降低，Google Analytics 上的平均停留時間也會拉長。

再來是 SEO——目錄裡的錨點連結能幫 Google 理解文章結構。而且 Google 搜尋結果會抓 TOC 當作『Sitelinks』（子連結），顯示在主結果下方多幾行曝光，對點擊率是實打實的加分。

TOC 的四種常見形式，該選哪一種？

1. 靜態目錄（文章開頭固定區塊）

最單純的版本：在文章第一段之後，放一塊區塊列出所有 H2 標題，每個都是可以點的錨點連結。優點是簡單、不需要 JavaScript、SEO 友善。缺點是訪客滑到文章中段之後，就看不到目錄了。

適用場景：短到中等長度的文章（1,500~2,500 字），或行動裝置優先的網站。

2. 黏性側邊欄目錄（Sticky Sidebar TOC）

把目錄放在文章左側或右側，隨著頁面滾動而固定在視窗邊緣。訪客滑到哪一段，對應的項目會自動 highlight。這是目前中大型內容網站最主流的做法，讀者體驗最好。

缺點是要寫一點 JavaScript 做滾動偵測，而且在手機版通常會直接隱藏，或改成上方摺疊式。

適用場景：3,000 字以上長文、教學文、深度分析。中小企業如果部落格內容以「攻略類」為主，很值得投資這個功能。

3. 摺疊式目錄（Collapsible TOC）

目錄預設是收起來的，只顯示一個「目錄」按鈕，點開才展開。這個做法特別適合手機版，也常見於維基百科式的內容。

好處是不佔版面，訪客有需要才展開。壞處是——訪客可能根本不會注意到目錄的存在。要用這個做法，記得目錄按鈕要夠明顯，最好在標題下方顯眼位置。

4. 浮動目錄按鈕（Floating TOC Button）

右下角放一個圓形按鈕，點了才彈出目錄面板，適合內容非常長、想保留閱讀沉浸感的頁面。中小企業官網通常用不到這麼複雜的做法，除非內容常常超過 5,000 字，否則靜態或摺疊式就夠了。

Photo by Amper on Unsplash

TOC 設計的五個關鍵細節

細節一：只列 H2，最多再加 H3

目錄的重點是「快速掃描」，不是把整篇文章大綱都放上去。一般建議只列 H2 標題，如果段落非常長，可以把 H3 用縮排的方式加進去。層次超過三層就是災難——訪客會覺得這篇文章太複雜，直接放棄。

細節二：每個項目要有錨點（Anchor）

技術上，就是每個 H2、H3 標籤要有 id 屬性，例如 <h2 id="why-toc-matters">，然後目錄裡的連結指向 #why-toc-matters。點下去頁面會自動捲動到那一段。

錨點命名用英文短字加連字符最好，這對 SEO 也有幫助——因為 Google 搜尋結果中，錨點會出現在網址後面，語意清楚的錨點會提高點擊意願。

細節三：加上平滑捲動（Smooth Scroll）

點錨點的時候，如果頁面「啪」一聲直接跳過去，訪客會很錯亂——他不知道發生什麼事。加上 CSS 的 scroll-behavior: smooth，讓頁面平滑滑動過去，體驗會好非常多。這一行 CSS 就搞定，沒有藉口不做。

細節四：黏性目錄要有滾動偵測（Scroll Spy）

如果做 Sticky Sidebar TOC，一定要搭配「滾動偵測」——訪客滑到哪一段，目錄裡對應的項目就自動變粗體或變色。沒有這個功能的黏性目錄，就只是佔版面而已，對訪客沒有幫助。

細節五：手機版一定要處理

Sticky Sidebar 在手機上完全沒空間放，這時候有兩個選擇：一是隱藏目錄，二是改成「上方摺疊區塊」，讓訪客點開才看到。千萬不要把電腦版的側邊欄直接塞到手機版——畫面會被擠爛，UX 直接歸零。

SEO 加分：讓 Google 把 TOC 顯示在搜尋結果

Google 抓取 TOC 有幾個訊號：HTML 用 <nav> 或 <ul> 包起來讓爬蟲知道是導覽區塊、錨點連結要正常運作。進階做法是加上「HowTo」或「Article」Schema 結構化資料，這對攻略型、教學型內容特別有效。

要注意：Google 的 TOC Sitelinks 不是「加了就有」——文章要有一定排名和點擊率才會被拉出來顯示。TOC 是加分項，不是排名直接因素。

Photo by Anete Lūsiņa on Unsplash

常見錯誤：這樣做的 TOC 只會扣分

錯誤一，用圖片當目錄。有些設計圖漂亮，把目錄設計成圖片放上去。爬蟲讀不到、點不了、複製不了，等於零效益。目錄一定要是「可點的文字連結」。

錯誤二，目錄項目寫得太文青。標題應該直白告訴訪客「這段在講什麼」，不要用抽象的比喻或詩意的短句。「五個 TOC 設計細節」比「化繁為簡的藝術」好一百倍。

錯誤三，錨點連結壞掉。改版時 H2 的 id 被改掉，但目錄連結沒有跟著更新，訪客點下去沒反應。這種問題只有訪客會發現，站長自己完全看不到。建議發布前用開發者工具檢查一遍。

錯誤四，Sticky TOC 擋到內容。有些側邊欄目錄設計太寬，把內文擠到只剩半個螢幕，或在某些解析度會蓋住圖片。這種情況比沒有 TOC 更糟糕。

WordPress 有現成外掛可以用嗎？

WordPress 官網可以直接裝 TOC 外掛，例如 Table of Contents Plus、Easy Table of Contents、LuckyWP Table of Contents，設定幾分鐘就能全站啟用。優點是快、免寫程式；缺點是外觀制式，跟品牌調性不一定合，在意的話要客製 CSS。

更進階是自己寫一段 JavaScript，在文章載入後自動抓 H2 產生目錄，樣式跟品牌完全一致，也不受外掛更新影響，適合有工程能力的公司。

什麼時候該加 TOC？什麼時候不用加？

該加的情境：文章超過 1,500 字、內容分成三個以上大段、屬於「攻略型」「教學型」「深度分析型」的部落格、服務頁或方案頁很長。這些頁面加了 TOC 效果立竿見影。

不用加的情境：首頁、短文（800 字以內）、宣傳型的活動頁、Landing Page。這些頁面本來就要引導訪客一路往下讀完，中途放個目錄反而會讓訪客跳段，錯過品牌想傳達的節奏。

行動建議：先從一篇文章開始試

與其一次全站改造，我會建議先挑一篇流量最高、字數最多的文章，加上 TOC 試三個月。用 GA4 對比「改造前 vs 改造後」的三個指標：平均停留時間、跳出率、頁面滾動深度。有效再全站推廣。

執行清單：一、找出流量最高的三篇長文；二、選一個適合的 TOC 樣式（靜態 or Sticky）；三、確保每個 H2 都有 id 錨點；四、加上 scroll-behavior: smooth；五、手機版另外測試一次；六、發布後追蹤 GA4 兩到三週。

官網的每一塊小元件都在幫你決定「訪客留不留」，TOC 只是其中一塊。但這塊做對了，長內容就能真正發揮它應該有的價值——把陌生訪客變成願意讀完、願意信任、最後願意詢問的準客戶。

如果你的官網有經營部落格、有寫長篇服務說明，但文章卻沒有目錄，那你就是把辛苦寫出來的內容，白白丟掉一半的價值。