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