為什麼你的 WordPress 網站需要文章目錄？
如果你經營部落格、知識庫或電商網站，一定遇過這個問題——文章越寫越長，讀者卻找不到重點。
根據 Google 的 Search Quality Evaluator Guidelines，「良好的頁面體驗」是排名的重要因素之一。而一個結構清晰的文章目錄（Table of Contents，簡稱 TOC），不僅能幫助讀者快速跳轉到感興趣的段落，更能讓搜尋引擎更好地理解你的內容架構。
事實上，你在 Google 搜尋結果中看到的「跳至」連結（Jump to Links），正是 Google 從頁面中的錨點連結擷取而來——而文章目錄就是產生這些錨點最直接的方式。
本文將介紹 ORCA Admin 外掛內建的文章目錄功能，以及它如何幫助你用最簡單的方式，為 WordPress 區塊編輯器撰寫的文章加上 SEO 友善的目錄。
文章目錄對 SEO 的 3 大好處
1. 產生錨點連結，爭取 Google「跳至」精選片段
當你的頁面有結構化的目錄連結時，Google 可能會在搜尋結果中顯示額外的「跳至」連結，讓使用者直接跳到特定段落。這意味著：
- 更大的搜尋結果版面：佔據更多 SERP 空間
- 更高的點擊率（CTR）：使用者能精準找到需要的資訊
- 更好的使用者體驗信號：降低跳出率，增加停留時間
2. 改善內容結構，幫助搜尋引擎理解頁面
文章目錄本質上是頁面標題階層的濃縮摘要。當搜尋引擎爬蟲（Crawler）解析你的頁面時，目錄中的錨點連結提供了一份清晰的內容地圖，讓爬蟲更有效率地理解文章架構與主題分佈。
3. 提升使用者體驗指標
良好的使用者體驗是 SEO 的基石。文章目錄帶來的效益包括：
- 降低跳出率：讀者能快速判斷文章是否包含所需資訊
- 增加頁面停留時間：方便跳轉讓讀者更願意深入閱讀
- 提升行動裝置體驗：在小螢幕上快速導航尤其重要
ORCA Admin 文章目錄功能介紹
ORCA Admin 外掛內建了一套完整的文章目錄解決方案，專為 SEO 效能最佳化而設計。
核心特色一覽
為什麼選擇伺服器端渲染（SSR）的目錄？
這是 ORCA Admin 目錄功能與市面上多數外掛最大的差異。
許多熱門的文章目錄外掛（包括 Elementor Pro 內建的目錄小工具）採用前端 JavaScript 渲染——也就是目錄的 HTML 是在瀏覽器載入頁面後，由 JavaScript 動態生成的。
這會帶來兩個 SEO 問題：
- 搜尋引擎可能無法完整爬取：雖然 Googlebot 可以執行 JavaScript，但並非所有搜尋引擎都能（例如部分社群媒體爬蟲、Bing 的初次爬取）。JS 渲染的目錄在這些情況下是「不可見」的。
- 延遲渲染影響 CLS 指標：JavaScript 動態插入的目錄會造成頁面內容位移（Cumulative Layout Shift），這是 Google Core Web Vitals 的重要指標之一。
ORCA Admin 的文章目錄完全在伺服器端生成 HTML，當搜尋引擎爬蟲收到頁面原始碼時，目錄和所有錨點連結都已經存在，無需執行任何 JavaScript。這確保了：
- 100% 的搜尋引擎可見性
- 零 CLS 影響（目錄在初始渲染時就在定位）
- 更快的首次內容繪製（FCP）
使用教學：在區塊編輯器中加入文章目錄
步驟一：啟用文章目錄功能
- 進入 WordPress 後台
- 前往 ORCA Admin → 文章目錄設定
- 確認「啟用目錄功能」為開啟狀態
- 選擇要爬取的標題階層（建議選擇 H2 和 H3）
- 選擇要啟用的文章類型（如文章、頁面）
- 儲存設定
步驟二：在文章中撰寫結構化標題
在 WordPress 區塊編輯器（Gutenberg）中，使用標題區塊（Heading Block）來組織你的文章結構：
H2：主要段落標題
H3：子段落標題
H4：更細的分項（如有啟用）
H2：下一個主要段落
H3：子段落標題SEO 小提醒：
- H1 留給文章標題（WordPress 預設行為）
- 使用 H2 作為主要段落分隔
- H3 用於 H2 底下的子主題
- 標題要簡潔有力，包含相關關鍵字
- 避免跳級（例如 H2 直接跳到 H4）
步驟三：插入目錄短代碼
在你希望目錄出現的位置，新增一個短代碼區塊（Shortcode Block），輸入：
[orca_toc]建議放置位置：文章開頭的第一個 H2 標題之前。
進階短代碼參數
你可以透過參數自訂目錄的行為：
[orca_toc height="400px"] → 自訂目錄列表最大高度
[orca_toc collapsed="yes"] → 預設收合目錄
[orca_toc height="500px" collapsed="true"] → 組合使用| 參數 | 預設值 | 說明 |
|---|---|---|
height | 300px | 目錄列表最大高度，超出會顯示捲軸 |
collapsed | no | 是否預設收合（接受 yes / true / 1） |
title | 目錄 | 自訂目錄標題文字 |
桌面版與手機版的體驗設計
桌面版：內嵌式目錄
在桌面瀏覽器上，目錄以內嵌區塊的形式顯示在文章內容中：
- 簡潔的標題列與收合按鈕
- 目錄項目以縮排呈現層級關係
- 滾動閱讀時，當前段落自動高亮並顯示左側指示條
- 內容過長時目錄區域可獨立滾動
手機版：浮動按鈕 + 滑出面板
行動裝置上的設計完全不同，避免目錄佔據寶貴的螢幕空間：
- 螢幕角落出現一個浮動導航按鈕（位置可自訂：右下、左下、右上、左上）
- 點擊後從底部滑出全螢幕目錄面板
- 點擊目錄項目後自動平滑滾動至對應標題，並關閉面板
- 支援 ESC 鍵或點擊背景遮罩關閉
- 觸控友善的滾動與點擊區域
自訂樣式：讓目錄融入你的品牌
在後台設定頁面，你可以完全自訂目錄的視覺風格：
| 設定項目 | 說明 | 預設值 |
|---|---|---|
| 主色調 | 連結文字與高亮顏色 | #333333 |
| 次要色調 | 懸停效果、按鈕背景 | #000000 |
| 桌面版背景色 | 目錄區塊底色 | #fafafa |
| 桌面版邊框色 | 目錄外框 | #e5e5e5 |
| 標題文字色 | 「目錄」標題顏色 | #333333 |
如果你是開發者，也可以透過 CSS 變數進行更精細的控制：
:root {
--orca-toc-primary: #1a73e8;
--orca-toc-secondary: #174ea6;
--orca-toc-desktop-bg: #f8f9fa;
--orca-toc-desktop-border: #dadce0;
--orca-toc-heading-color: #202124;
}SEO 最佳實踐：搭配文章目錄的寫作技巧
安裝好文章目錄後，搭配以下寫作技巧可以最大化 SEO 效果：
1. 標題包含目標關鍵字
每個 H2、H3 標題都是向搜尋引擎傳達主題信號的機會。確保標題自然地包含目標關鍵字或語意相關詞彙。
不好的寫法：
H2：第一部分
H2：第二部分好的寫法：
H2：WordPress 文章目錄的 SEO 優勢
H2：如何在區塊編輯器中安裝文章目錄外掛2. 善用問句式標題
問句式標題更容易出現在 Google 的「People Also Ask」精選區塊：
H2：什麼是文章目錄（Table of Contents）？
H2：文章目錄如何幫助 SEO 排名？
H2：WordPress 哪個文章目錄外掛最好用？3. 控制標題數量
一篇 2,000 字的文章，建議有 5-8 個 H2 標題與適量的 H3 子標題。過多的標題會稀釋頁面主題信號，過少則無法充分展現內容結構。
4. 確保標題反映段落內容
目錄中的標題就是讀者與搜尋引擎的「閱讀預覽」。每個標題都應該準確概括該段落的核心內容，讓人一眼就知道段落在講什麼。
與其他外掛的比較
| 功能 | ORCA Admin TOC | Elementor Pro TOC | Easy TOC |
|---|---|---|---|
| 渲染方式 | 伺服器端（SSR） | 前端 JavaScript | 伺服器端 |
| 搜尋引擎可見性 | ✅ 100% | ⚠️ 依賴 JS 執行 | ✅ 100% |
| CLS 影響 | ✅ 無 | ❌ 有 | ✅ 無 |
| 手機浮動面板 | ✅ 內建 | ❌ 無 | ❌ 無 |
| 滾動自動高亮 | ✅ 內建 | ✅ 有 | ❌ 無 |
| 深色模式 | ✅ 自動適配 | ❌ 手動設定 | ❌ 無 |
| AJAX 載入支援 | ✅ 內建 | ❌ 無 | ❌ 無 |
| 後台自訂顏色 | ✅ 有 | ✅ 有 | ✅ 有 |
| 額外外掛依賴 | ❌ 無需額外安裝 | 需要 Elementor | 獨立外掛 |
常見問題 FAQ
Q：文章目錄支援哪些文章類型？
預設支援「文章」與「頁面」，你可以在後台設定中啟用任何公開的自訂文章類型，包括 WooCommerce 商品頁。
Q：我可以在同一篇文章中放多個目錄嗎？
技術上可以，但不建議。一篇文章放一個目錄即可，放在第一個標題之前是最佳位置。
Q：目錄會影響網站載入速度嗎？
不會。目錄的 CSS 和 JavaScript 檔案極為輕量，且僅在有目錄的頁面才會載入。伺服器端渲染也意味著不會有額外的 API 請求。
Q：目錄可以和 Elementor 一起使用嗎？
完全可以。ORCA Admin 的目錄功能與 Elementor 及 Elementor Pro 完美相容，你可以在 Elementor 的編輯器中使用短代碼小工具來插入目錄。
Q：我使用 RankMath / Yoast 等 SEO 外掛，會衝突嗎？
不會衝突。文章目錄功能獨立運作，產生的錨點連結完全符合 HTML 標準，與所有主流 SEO 外掛相容。
Q：標題中有特殊字元或表情符號怎麼辦？
外掛會自動處理特殊字元，將標題轉換為安全的 URL 錨點 ID。你不需要做任何額外處理。
Q：支援多語系網站嗎？
支援。外掛的介面文字已支援繁體中文、英文、日文，目錄內容會根據文章實際的標題語言顯示。
結語
文章目錄看似是一個小功能，卻能同時帶來SEO 排名提升與使用者體驗改善的雙重效益。ORCA Admin 外掛的文章目錄功能，以伺服器端渲染確保搜尋引擎 100% 可見，搭配手機浮動面板與滾動高亮等貼心設計，讓你的讀者在任何裝置上都能輕鬆導航長篇內容。
只需要一行短代碼
本文使用的 ORCA Admin 文章目錄功能，適用於 WordPress 區塊編輯器（Gutenberg）及 Elementor 頁面編輯器。
