AI 代理讀你的頁面時，看的不是畫面，而是 DOM 樹。你用一層層 <div> 疊出來的漂亮版面，在剖析器眼裡只是一堆沒有意義的容器；同一段文字，換成語意化標籤，抽取的準確度就是兩回事。語意化 HTML 不是無障礙的加分題，而是你讓 AI 引擎乾淨引用你的最低成本手段。
為什麼 AI 代理特別吃語意化標籤
當 Google 的 AI 總覽、Perplexity 或 ChatGPT 去抓一個網址，背後跑的是一條把 HTML 轉成純文字的管線。這條管線會丟掉樣式、保留結構：<h1> 告訴它這頁在談什麼，<article> 圈出正文範圍，<nav> 和 <footer> 被當成樣板丟掉。標籤選得對，等於直接幫模型把重點畫好；標籤全是 div，模型就得靠字數、位置和運氣去猜哪一段值得引用。
差別在抽取的信心。一段內容包在 <main><article> 裡、配上連續的 <h2> 階層，對剖析器來說是一個邊界清楚、可以整塊拿走的單元；換成 <div class="content-wrapper-2">，同一段文字就失去所有訊號。我們替客戶做 GEO 審計時，最常見的能見度問題不是內容不夠好，而是好內容被埋在沒有語意的巢狀 div 裡，AI 引擎根本切不出一段乾淨的引用。
標籤對應的是「意義」，不是外觀
語意化的核心觀念只有一條：每一個標籤都在宣告一段內容的『角色』，而不是它長什麼樣子。<button> 代表可以觸發動作，<a> 代表可以前往別處，<ul> 代表一組並列項目，這些意義會被瀏覽器、螢幕閱讀器和 AI 剖析器同時讀到。選標籤的時候不要問『我想要它看起來怎樣』，而要問『這段內容本質上是什麼』。
- <main>：整頁只有一個，圈出「這就是這一頁真正要講的內容」，讓剖析器直接跳過頁首、側欄和頁尾。
- <article>：可獨立抽取、被拿走仍能自足的內容單元，例如一篇文章、一則 FAQ、一張產品卡。
- <h1> 到 <h6>：頁面的目錄。層級要連續，別為了字級大小跳著用。
- <nav>：導覽連結。標了它，引擎才知道這一區是選單而非正文。
- <section> 搭配標題：一個有主題的段落群，通常配一個 heading。
- <table>、<thead>、<th>：真正的表格資料就用表格標籤，別用 div 排版；AI 能抽表格靠的就是這些。
- <time datetime> 與 <address>：把日期和聯絡資訊變成機器可直接讀取的欄位。
一個好用的自我檢查：把標籤名稱唸出來，它有沒有描述內容的本質？如果你為了一個可點擊的動作寫了 <div>，唸出來只是『一個容器』，那就錯了，它應該是 <button>。外觀交給 CSS，標籤只負責講清楚意義，兩者分開，機器才讀得準。
最常見的坑：div 湯與標題亂序
實務上重複出現的問題就那幾種。整頁只有 div 和 span、沒有一個語意標籤，我們叫它『div 湯』。一頁出現好幾個 <h1>，或是為了字級大小把 <h4> 當 <h2> 用，標題階層一亂，模型建出來的大綱就是錯的。還有用 <br> 換行硬排出來的『清單』、用 <div onclick> 假裝的按鈕，這些在畫面上看不出差別，在 DOM 裡卻是一片空白。
一頁語意化改造的實作順序
不用一次重寫整個網站。挑一個對能見度最重要的頁面，照下面的順序改一遍，你很快就會抓到手感。
- 先畫大骨架：確認整頁有且只有一個 <main>，把頁首、導覽、頁尾分別包進 <header>、<nav>、<footer>。
- 修標題階層：一頁一個 <h1>，<h3> 只出現在 <h2> 之下，不跳級。用瀏覽器外掛或指令列出大綱檢查。
- 把正文包進 <article>：讓每個可獨立引用的段落，例如 FAQ、步驟、定義，都有清楚的邊界。
- 換掉假元件：<div onclick> 改成 <button>，導覽用的假按鈕改成 <a href>。
- 資料結構化：表格用 <table>、清單用 <ul> 或 <ol>、日期用 <time>。
- 補上 label 與 alt：表單控制項配 <label for>，圖片配 alt，讓機器與螢幕閱讀器讀到同一份語意。
怎麼驗證機器真的讀懂了
改完不要靠感覺。最快的一招是打開瀏覽器的『閱讀器模式』，Safari 或 Firefox 的閱讀視圖能不能乾淨抽出你的正文？抽得出來，AI 剖析器多半也抽得出來。第二招是用指令列把原始 HTML 抓下來，確認正文不是靠 JavaScript 才長出來。第三招是打開開發者工具的無障礙樹，那份樹狀結構很接近機器眼中的頁面。三招都過，這一頁才算真的可被讀懂。
關掉整站的 CSS，你的頁面還讀得下去嗎？如果順序清楚、標題分明、清單還是清單，AI 代理就讀得懂；如果變成一團無序的文字，機器也一樣看不懂。
語意化之後，再疊結構化資料
語意化 HTML 是地板，不是天花板。把它做對之後，再疊上 Schema.org 的 JSON-LD，用 Article、FAQPage、Product 這些型別，把日期、作者、價格這些事實明講給機器聽。但順序不能反：在 div 湯上貼 schema 只是化妝，因為爬蟲會拿你標記的內容去對照畫面上真正的 DOM，對不起來反而扣分。先把 HTML 的語意修對，schema 才站得住。想知道自己的頁面在 AI 剖析器眼中長什麼樣、缺口在哪，可以預約一場 30 分鐘 GEO 診斷，我們用實際的抽取結果帶你走一遍。
