一句話總結

ChatGPT、Gemini、Claude 等 AI 代理在瀏覽網站時，不看你設計得多漂亮，而是讀取瀏覽器底層的「可存取性樹」（Accessibility Tree）——一個原本為螢幕閱讀器設計的結構化語意層。香港品牌若能優化這個層面，就能大幅提高被 AI 正確理解與引用的機率。

為什麼 AI 代理讀的是 Accessibility Tree？

本週 Search Engine Land 刊登了一篇極具實戰價值的深度文章，詳細拆解了 SEO 與 GEO 從業員如何利用 Accessibility Tree audit 來優化網站對 AI 代理的可讀性。這篇文章引用了 OpenAI 最新的開發者 FAQ 與 Microsoft 的 Playwright MCP 框架，確認了以下重點：

  1. ChatGPT Atlas（OpenAI 的瀏覽代理）透過 ARIA 角色與標籤來理解頁面結構和互動元素。OpenAI 明確表示，讓網站更容易存取（accessible），也同時讓 AI 代理更容易理解。
  2. Microsoft 的 Playwright MCP——目前最廣泛使用的代理瀏覽框架——基於 Accessibility Snapshot 而非螢幕截圖。這不是巧合：AI 代理讀的是語意層，不是像素層。
  3. Google 與 Microsoft 共同起草的 WebMCP 標準正在 Chrome 進行 Origin Trial，未來網站可以直接向代理暴露功能接口，而不只是被動被讀取。

簡單來說：如果你的 Accessibility Tree 混亂、缺漏、或充滿未命名的按鈕和空白連結，AI 代理看到的你的網站就會像一本缺頁、亂碼、沒有章節標題的書。

對香港品牌的 GEO 含意

這不是一個「將來才需要擔心」的話題。Google 的 AI Overviews、ChatGPT 的 Browse、Perplexity 的 Pro Search——所有主流 AI 搜尋產品都依賴某種形式的頁面理解機制來決定是否引用你的內容。如果連結構化的 Accessibility Tree 都無法正確傳達你的產品資訊和服務價值，AI 自然不會在你的競爭對手中選擇你。

5 步實戰：讓你的網站更容易被 AI 理解

以下步驟改編自該篇詳盡指南，專為香港中小企簡化為可立即執行的行動清單：

步驟 1：對你的主力頁面做一次「代理就緒審計」

選取你網站上流量最高或轉換價值最大的 10-20 個頁面（例如：首頁、產品頁、服務報價頁、聯絡頁、關於我們），然後問以下問題：

  • 最重要的用戶操作（例如「立即購買」「預約諮詢」「獲取報價」）在 Accessibility Tree 中是否顯示為正確的角色（button）並有清晰的描述名稱？
  • 每個表單輸入欄位是否都有程式關聯的標籤（label）？
  • 導航是否被包裝在 navigation landmark 中？主要內容是否在 main landmark 中？
  • 關鍵內容（價格、產品詳情、聯絡資訊）是否在 Tree 中呈現為可閱讀的文字？

如何檢查：使用 Chrome DevTools → Elements 面板 → Accessibility 側欄 → 啟用 Full-page accessibility tree。或使用免費的 AXray Extractor（johnmcalpin.com/tools/axray-extractor/）一鍵抓取。

步驟 2：修復常見的「AI 看不見」問題

香港企業網站最常見的三個問題：

  • 按鈕是 div 而非 button：開發人員常寫 <div onclick="...">立即查詢</div>，但 Accessibility Tree 看到的是 role generic，沒有互動提示。改為 <button type="button">立即查詢</button>，Tree 就能正確讀取。
  • 圖標按鈕沒有名字：社交媒體圖標、購物車圖標、搜尋放大鏡圖標如果只用圖像而沒有 aria-label，Tree 會顯示為空白節點。加上 aria-label="搜尋" 或 aria-label="購物車" 即可。
  • Heading 跳層或缺失：檢查頁面上的 H1 → H2 → H3 順序是否連續。跳過 H1 直接 H3、或用 styled div 冒充 heading——都會讓 AI 無法理解你的內容架構。

步驟 3：優化圖片 Alt Text 以利 AI 抽取

AI 代理不一定能「看」圖片，但能讀取圖片的 accessible name（即 alt text）。在你的主力頁面上：

  • 確保每個有意義的圖片都有描述性的 alt text（例如「香港中環辦公室外觀」，而非只是「photo123」）
  • 裝飾性圖片使用 alt=""（空 alt）讓它們從 Tree 中完全消失，減少噪訊
  • 數據圖表或資訊圖表：把關鍵數據點直接寫在 alt text 或旁邊的文字段落中
  • 使用 <figure> 和 <figcaption> 把圖片與說明文字語意關聯

步驟 4：審查內部連結的可存取名稱

你的內部連結策略只在名稱能夠正確抵達 Accessibility Tree 的情況下才有效。常見陷阱：

  • 「了解更多」「按此」「Read more」等通用連結文字重複出現在同一個頁面——AI 無法區分它們
  • aria-label 覆蓋了原本有意義的可見連結文字（例如可見文字是「比較企業版定價計劃」，但 aria-label 寫了「鏈接」—Tree 中只剩下「鏈接」）
  • 純圖標連結完全沒有名稱

快速審計：抓取任一頁面的 Accessibility Tree，過濾所有 link role 節點，逐個檢查名稱是否真正描述了目標。

步驟 5：把 Accessibility Tree 納入 QA 流程

上述步驟做完後，最常見的悲劇是下一次網站改版或開發更新就把所有修復歸零。解決方法：

  • 使用 Playwright 的 toMatchAriaSnapshot() 約 15 行程式碼就能把主要模板的 Accessibility Tree 納入 CI/CD 測試
  • 每次部署自動對比 Tree 快照——如果有人不小心把 button 又改回 div，建置失敗，部署阻擋
  • 遷移或重新設計後，在傳統的 301 重定向和 Meta 標籤檢查清單上加上一條：比對前後 Accessibility Tree

這是整份指南回報率最高的步驟——它讓前四個步驟的成果不會因一次開發失誤而歸零。

結語：AI 代理「讀」的不是你的設計，是你的結構

當 AI 搜尋與代理瀏覽逐步成為用戶接觸品牌的主要入口之一，你的網站結構是否「被 AI 讀懂」就不再只是技術問題，而是直接影響品牌曝光與轉化的商業問題。

這不是要求香港中小企馬上變成 WCAG 合規專家——你只需要從今天開始，為你最重要的 10 個頁面做一次 Accessibility Tree 審計，修復最明顯的問題，然後把檢查機制放進開發流程。

想在 AI 搜尋時代確保你的網站能被正確理解與引用？到 /contact 聯絡我們，安排一次網站 GEO 技術盤點。