您的網站有新類型的訪客。部分使用者已從手動導覽轉為將目標導向型歷程委派給 AI 代理程式。這類自治系統可以解讀輸入內容、規劃及代表使用者執行動作。
不過，許多網站的設計都以美觀為目標，因此會使用複雜的懸停狀態、版面配置變化和流暢的動作。這項功能對服務專員來說無法正常運作。
服務專員如何查看您的網站
服務專員不會在螢幕上查看你的網站，這些工具會根據網站的機器可讀表示法運作，這類表示法的品質會決定其效能。
專員可以透過 3 種主要方式查看您的網站：螢幕截圖、原始 HTML 和無障礙樹狀結構。
螢幕截圖
代理程式會擷取算繪頁面的快照，並使用視覺模型識別元素。根據螢幕截圖，代理程式可以辨識右上方的搜尋列是全域搜尋，而中間的方塊可能是表單欄位。視覺提示很有幫助，因為代理商可以根據顏色、大小和鄰近程度判斷重要性。相較於小型「說明」連結，大型「刪除」按鈕可能會讓使用者更加謹慎。不過，分析螢幕截圖可能既緩慢又昂貴 (以使用的權杖而言)，因此如果結構令人困惑，這項功能就比較適合做為備用方案。
HTML
代理會分析 DOM 並讀取 HTML。瞭解元素的巢狀結構、DOM 樹狀結構的邏輯階層、定義結構的 ID 和類別等屬性，以及構成網站資訊主幹的原始資料字串。這有助於代理程式瞭解元素之間的關係。
如果產品容器內有「立即購買」按鈕，代理程式會假設該按鈕屬於該特定產品。
無障礙功能樹狀結構
無障礙樹狀結構是瀏覽器原生 API，可將 DOM 提煉為最重要的項目：互動式元素的角色、名稱和狀態。這是網頁的語意摘要，供輔助技術使用。對 AI 代理程式而言，這項功能就像是高擬真地圖，會忽略 CSS 的視覺「雜訊」，專注於實用性。代理程式解讀這個樹狀結構後，就能瞭解每個切換鈕、滑桿和輸入欄位的功能意圖。
WebMCP 工具
WebMCP 是提議的網路標準，可縮小網站與代理之間的差距，並向代理分享明確的用途和工作。方法是定義 tools，也就是 JavaScript 或 HTML 註解。與標準啟動相比，代理程式能更快且更準確地解讀這些工具。
WebMCP 工具可用於客戶服務、電子商務、探索等。 部分動作屬於敏感動作，例如購物。您可以加入指令，要求使用者透過確認對話方塊互動。
結合多種模態
如果只依據單一輸入內容，會產生語意落差。舉例來說，在 DOM 中，代理程式可能會看到 <div>，但不知道您實際上已使用 CSS 和 JavaScript 將此設定為功能按鈕。如果提供螢幕截圖，代理程式或許能辨識出按鈕在畫面上的位置，但仍無法得知按鈕的預期目的地，或按鈕設計觸發的動作。
因此，現代代理會結合多種模態。他們會使用 DOM 和無障礙樹狀結構，取得互動式元素的簡潔結構化清單，然後與視覺化轉譯交叉比對，瞭解版面配置、分組和視覺提示。
我們的任務是在所有這些管道中提供乾淨的信號。
建構適合代理程式的網站
為協助服務專員瀏覽網站，網站介面應清楚顯示真人或服務專員必須執行的所有動作。以下列舉幾項最佳做法：
- 避免使用虛影元素。避免使用會遮蓋互動元素的透明重疊畫面。即使節點顯示為透明，代理程式執行的視覺分析仍可能會捨棄遭遮蓋的節點。
- 使用語意式 HTML。使用語意式 HTML 設計可執行的元素。舉例來說，請在修改後的
<div>和<span>元素上使用<button>和<a>標記。代理程式會將前者視為互動元素。- 如果無法使用語意式 HTML，請務必為元素提供適當的
role和tabindex。例如：<div role="button">。 - 在
<label>標記中加入for屬性，將標記連結至輸入內容。這有助於 AI 代理瞭解欄位的用途，方法是指出直接附加至動作字串的標籤文字。
- 如果無法使用語意式 HTML，請務必為元素提供適當的
- 使用 CSS 提供視覺提示。在 CSS 中設定
cursor: pointer，這是可操作性的強烈信號。 - 符合影像分析的最低大小規定。請確保完成動作所需的任何互動式元素都可見，且大於 8 平方像素，以免在模型的視覺分析中遭到篩除。
- 確保版面配置穩定。如果網站版面配置不斷變動，例如產品頁面上的「加入購物車」按鈕在每個產品類別中都位於不同位置，負責擷取螢幕截圖的代理商可能會感到困惑。
- 建立 WebMCP 工具 為支援 API 的代理定義明確的工作和動作。
後續步驟
凡是能讓網站具備「AI 代理友善」性質的設計，同樣能提升大家的使用體驗。
讓網站對 AI 代理友善，可促使您重新遵守網站的基礎原則，建構結構良好、易於存取且語意明確的網站。