Tenten AIGEO
回到部落格
技術實作手冊評估

讓 AI 好擷取的乾淨 HTML:減少 div 巢狀、把標題階層做對、善用資料屬性

AI 引擎讀網頁時,會先把 HTML 拆成樹、剝成純文字,再決定要不要引用你。這篇拆解如何寫出乾淨 HTML 讓 AI 好擷取:減少 div 巢狀、把標題階層做對、善用語意標籤與資料屬性,並附上一份可以照著做的清理清單。

Tenten GEO 團隊發布於 2026-07-125 分鐘閱讀
以乾淨光影結構象徵 AI 能輕鬆讀取一頁網頁的抽象封面圖。

先講結論:AI 引擎讀你的網頁時,第一步不是欣賞你寫得多好,而是把 HTML 拆成一棵樹,丟掉它判定為雜訊的部分,再把剩下的內容轉成純文字或 Markdown。如果你的頁面是幾十層 div 疊出來的,標題只是放大的粗體字,那在這一步你就已經被切碎、被誤認成側欄,根本擠不進它引用的候選名單。乾淨 HTML 不是工程潔癖,是能不能被 AI 引用的門檻。

關鍵在於,多數 AI 引擎不會像瀏覽器那樣把你的頁面完整渲染出來。它們跑的是一套接近 readability 的擷取流程:找出主內容區、剝掉導覽列與頁尾、把 h1 到 h3 當成骨架、把段落與清單當成血肉。你在 CSS 裡精心排的視覺層級,它一律看不到,它只認 HTML 標籤本身透露的結構。這也是為什麼兩個在螢幕上看起來一模一樣的頁面,一個被反覆引用,另一個怎麼改文案都進不了答案。

div 巢狀太深,擷取器會迷路

現代前端框架很容易長出「div 湯」:每個元件都用一層包裝 div 裹起來,一段本該是完整說明的文字,最後被埋在八到十層沒有任何語意的 div 底下。擷取器判斷「哪裡才是主內容」靠的是文字密度與標籤類型的啟發式規則,巢狀一深、又夾雜著按鈕與標籤這類短文字碎片,它的信心分數就掉下來,可能挑錯區域,也可能把你連續的一段話拆成三段不相關的碎片各自處理。

解法不玄:用語意標籤把主內容包起來。<main> 裝整頁最重要的內容、<article> 裝一篇可以獨立閱讀的文章、<section> 分章節、<figure> 裝圖與說明。這些標籤等於直接對擷取器說「這裡才是重點」。框架產生的包裝層沒辦法全數清掉,但你至少要保證主內容的最外層是 <main> 或 <article>,而不是第十二個 class 叫 wrapper 的 div。能用一層語意標籤解決的事,就別用三層 div 硬堆。

標題階層,是你幫 AI 做好的目錄

擷取器把 h1 到 h6 當成整篇的目錄,拿它來切段(chunking)。切得乾淨,AI 就能精準引用某一段去回答某個問題;切得亂,整篇會被揉成一團,引用時失去脈絡。真正要守的原則其實只有三條。

  1. 一頁只放一個 h1,通常就是文章標題;其餘章節一律從 h2 往下展開。
  2. 階層不要跳級:h2 底下接 h3,不要直接跳到 h4;跳級會讓擷取器誤判段落的從屬關係。
  3. 標題是結構,不是樣式:想放大某行字就用 CSS,別為了字大而硬套 h2,也別為了 SEO 塞一堆同級標題。

最常見的錯誤,是整頁只有一個 h1,其餘全用 div 加粗體做成看起來像標題的「假標題」。在擷取器眼裡,這篇文章沒有章節,只有一大段連續文字,於是它只能整段抓或整段丟。把假標題換回真正的 h2、h3,等於親手把一份目錄交到 AI 手上,它才知道該從哪裡下刀。

亂 div 巢狀與乾淨語意標籤在 AI 擷取結果上的對比示意圖
同一頁內容,div 湯被切成碎片,語意標籤被乾淨擷取。

語意標籤與屬性:讓意義不靠 CSS 也讀得懂

結構解決「抽得乾淨」,屬性解決「抽出來還看得懂」。圖片補上 alt,它在純文字世界裡才有內容;日期用 <time datetime>,才不會被讀成一串沒有意義的字元;表格用 <table> 搭配 <th>,轉成 Markdown 時欄位關係才留得住;名詞與定義用 <dl>、<dt>、<dd> 成對包起來,模型抽出來就是一組乾淨的問答。ARIA 屬性(aria-label、aria-labelledby)本來是為無障礙而生,但它同時也替沒有可見文字的元素補上機器讀得懂的意義。

資料屬性怎麼用才對,別指望它變魔法

這裡要講一句實話:你自訂的 data-* 屬性,多數 AI 擷取器根本不會讀,它們不是為你的私有命名而設計的。真正被廣泛支援的「資料屬性」只有那幾種有標準的——微資料(microdata)的 itemprop、data-nosnippet(告訴引擎這段別拿去當摘要),以及最可靠的機器可讀層 JSON-LD。與其發明一堆 data-geo-* 期待 AI 讀懂,不如把可被引用的關鍵事實,例如作者、發布日期、價格、常見問題,寫進 JSON-LD,讓擷取結果有一份不依賴版面的真相。

data-* 當然還是有用,只是用在別的地方。你可以拿它在自己的分析或內部工具裡標記哪些段落是可引用的、追蹤哪幾塊內容真的被 AI 拿走。它是給你自己看的座標,不是給 AI 的指令。把這兩件事分清楚,你才不會把力氣花在沒有人讀的屬性上。

一份可以照著做的清理清單

  • 主內容用 <main> 或 <article> 包起來,確保它是明確、單一的區域。
  • 砍掉純粹為了排版而存在的巢狀 div,能用語意標籤就用語意標籤。
  • 一頁一個 h1,h2、h3 不跳級,假標題全部換成真標題。
  • 圖片補 alt、日期用 <time>、表格用 <th>、名詞定義用 <dl>。
  • 關鍵事實寫進 JSON-LD,別只靠自訂的 data-* 屬性。
  • 完稿後用網頁轉 Markdown 檢查一次,那份輸出才是 AI 的視角。
AI 不會因為你的頁面在瀏覽器裡好看就引用你;它引用的,是它抽得乾淨、讀得懂的那一個版本。Tenten GEO

乾淨 HTML 是整套 GEO 裡投報率最高、卻最常被跳過的一段。它不必重寫內容,只是把既有內容整理成機器讀得懂的樣子,成本低、見效快。如果你想知道自己的關鍵頁面在 AI 擷取器眼裡到底缺了哪幾塊,我們在 GEO 審計裡會實際跑一遍它們的擷取結果;也可以先預約 30 分鐘 GEO 診斷,用你自己的頁面當場看一次落差在哪。

常見問題

AI 引擎真的讀不到我用 CSS 做的視覺層級嗎?
讀不到。多數 AI 引擎不會完整渲染頁面,只讀 HTML 標籤本身的結構。你用 div 加粗體做的「假標題」在它眼裡只是普通文字,必須換成真正的 h2、h3,它才會當成章節去切段與引用。
自訂的 data-* 屬性能幫助 AI 擷取嗎?
幾乎沒用。AI 擷取器不會讀你私有命名的 data-* 屬性。要讓機器讀懂關鍵事實,請改用 JSON-LD 結構化資料,或標準屬性如 itemprop、data-nosnippet;自訂的 data-* 留給自己的分析工具用。
怎麼快速知道我的頁面被 AI 抽出來長什麼樣?
把網址丟進任何「網頁轉 Markdown」的工具跑一次,很多 AI 抓取器背後就是這類轉換。若轉出的標題層級錯亂、主內容混著導覽列、圖片沒有替代文字,那就是 AI 看到的殘缺版本。

READY WHEN YOU ARE

想知道你的品牌在 AI 答案裡值多少?

30 分鐘 GEO 診斷,我們用你的實際提問,帶你看見在六大 AI 引擎裡的能見度缺口,以及補上它的優先順序。

預約 30 分鐘診斷