什麼是標題結構分析器?
標題結構分析器能解析 HTML 並以樹狀圖形式呈現 H1 至 H6 的層級關係。它會顯示跳級標題、重複的 H1 標籤以及影響 SEO 排名和螢幕閱讀器導覽的結構性問題。
貼上完整 HTML 文件或單篇文章,分析器會按照文件順序抽出全部 h1 到 h6 標籤,並標出跳級(h2 直接跳到 h4)、多餘的 h1、空標題、藏在腳本中的標題等問題。樹狀視圖讓混亂的層級一眼可見。
使用方法
- 步驟 1 — 貼上 HTML 原始碼,或使用 # 標記標題的 Markdown。
- 步驟二 — 工具提取所有標題標籤,並以帶層級標示的巢狀樹狀結構展示。
- 步驟三 — 審查標記的問題(如跳級或缺少 H1),然後匯出分析報告。
何時使用
- 部落格發佈前自我審查,確保螢幕閱讀器與爬蟲能乾淨地解析大綱。
- 研究競爭對手文章的結構,了解他們怎麼安排頁面主題。
- 抓出 WordPress 或 CMS 佈景主題在主內容之外塞進側欄的多餘 h2。
結果
將部落格文章的 HTML 貼進來,看看側邊欄是不是從 H2 直接跳到了 H4。這種斷層會讓螢幕閱讀器和搜尋爬蟲扣分。
常見問題
- 標題跳級真的會影響 SEO 嗎?
- 間接影響。Google 自己說標題順序不是排名因素,但跳級會讓螢幕閱讀器搞不清楚層級,降低可讀性,也常是頁面結構不佳的訊號。讀起來順暢的頁面,在意圖匹配與停留時間上往往表現比較好。
- 一個頁面有多個 h1 不好嗎?
- HTML5 在 sectioning 元素裡技術上允許多個 h1,但大多數 CMS 樣板與 SEO 工具仍預期頁面只有一個 h1 代表頁面名稱。出現兩個 h1 通常是樣板 bug 或元件誤用,而不是刻意設計。
- 隱藏或摺疊元素裡的標題也算嗎?
- 算。只要在 HTML 裡,爬蟲與螢幕閱讀器都能讀到。手風琴展開區、行動裝置專屬區塊、Tab 切換內容都會列入大綱,即使使用者當下在畫面上看不到。
- AMP、MDX 或 JSX 的原始碼能直接分析嗎?
- 工具解析的是原始 HTML,AMP 可直接用。MDX 或 JSX 請先在瀏覽器看渲染後的輸出(開發者工具 > 元素 > 複製 body 的 outerHTML),再貼進來。Heading 之類元件標籤在渲染成真正的 h1-h6 之前是看不到的。
- 怎麼把報告匯出做內容稽核表?
- 點「匯出報告」即可下載純文字大綱,可直接貼到試算表欄位;也可以直接複製樹狀視圖。報告會列出每個標題的層級、文字以及偵測到的問題,方便交給編輯團隊。