目錄產生器 — 從 HTML 標題自動生成
從任何 HTML 內容中掃描標題標籤，生成可複製、可連結的巢狀目錄。
如何從 HTML 建立目錄？
把 HTML 貼進下方的產生器，它會掃描 H2–H6 標題，自動建立帶有錨點連結的巢狀目錄，複製後直接插入文章開頭即可。
範例：貼上 HTML，產出目錄
<h2 id="setup">環境設定</h2> <h3 id="install">安裝套件</h3> <ul><li><a href="#setup">環境設定</a><ul><li><a href="#install">安裝套件</a></li></ul></li></ul>
目錄產生器
已選擇 5 個層級
使用方式
1.貼上 HTML
貼上包含標題標籤（H2-H6）的 HTML。
2.選擇輸出格式
切換 HTML 清單或 Markdown 清單輸出格式。
3.複製與插入
複製產生的目錄並插入到文章開頭。
為什麼目錄有幫助
良好的目錄結構幫助讀者瀏覽長篇內容，提升使用者參與度。搜尋引擎也利用標題結構理解你的內容。
- 有目錄的長篇內容跳出率更低
- 幫助讀者跳至相關章節
- 提升內容結構與可讀性
- 適用於任何支援錨點連結的 CMS
常見問題
支援哪些標題層級？
+
支援 H2 到 H6。H1 通常作為頁面標題，不包含在目錄中。
它會幫我的 HTML 加上錨點連結嗎？
+
目錄輸出本身就包含錨點連結，你需要確認文章裡的標題標籤帶有對應的 id，連結才能正確跳轉。
這個工具免費嗎？
+
是的，完全免費，無需註冊。
我的內容會被傳送到伺服器嗎？
+
不會，所有處理都在你的瀏覽器內完成。
怎麼讓目錄項目變成可點擊的錨點連結？
+
目錄的每一項都是 <a href="#setup"> 這樣的錨點連結，點擊後會跳到 id 相符的標題，例如 <h2 id="setup">。只要幫文章裡的每個標題加上對應 id，目錄就能直接捲動到該章節。
支援巢狀或 H4–H6 標題嗎？
+
支援。產生器會讀取 H2 到 H6 並保留層級：H3 巢狀排在所屬 H2 之下，H4 再往下遞排，產出縮排正確的多層目錄。
目錄可以直接貼進 WordPress 或 Ghost 嗎？
+
可以。把 HTML 輸出貼進 WordPress 的自訂 HTML 區塊，或 Ghost 的 HTML 卡片；若你的編輯器以 Markdown 為主，改用 Markdown 輸出即可，兩種格式都會保留錨點連結。
所有工具
SEO Slug 產生器
AI 將標題轉換為網址 Slug
中英文自動加空格
CJK 與拉丁文字自動間距
HTML 差異檢視器
比對清理前後的 HTML
內容統計工具
字數、閱讀時間與更多數據
無障礙檢查工具
檢查 HTML 無障礙問題
OG 圖片產生器
建立社交分享圖片
Markdown 轉換器
HTML 與 Markdown 雙向轉換
JSON - LD 產生器
為 SEO 建立結構化資料
大小寫轉換
將文字轉換為大寫、小寫、標題大小寫等
文字提取器
從文字中提取網址、Email 和電話號碼
文字比對
比較兩段文字的差異
關鍵字密度
分析詞頻和關鍵字密度
SERP 預覽
預覽 Google 搜尋結果片段
可讀性檢查
檢查 Flesch-Kincaid、Gunning Fog 等分數
或從主要的 HTML 清理工具開始
開啟 Publish Helper