Creare siti web ottimizzati per gli agenti

Kasper Kulikowski

Omkar More

Il tuo sito web ha un nuovo tipo di visitatore. Alcuni utenti umani stanno passando dalla navigazione manuale alla delega di percorsi orientati agli obiettivi agli agenti AI. Questi sistemi autonomi possono interpretare l'input, pianificare ed eseguire azioni per conto di un utente.

Tuttavia, molti dei nostri siti web sono progettati per essere belli per gli esseri umani, con stati di passaggio del mouse complessi, layout variabili e movimento fluido. Questa funzionalità non funziona per gli agenti.

Come gli agenti visualizzano il tuo sito

Gli agenti non visualizzano il tuo sito web su un monitor. Operano su una rappresentazione leggibile dalla macchina del tuo sito. La qualità di questa rappresentazione determina il rendimento.

Gli agenti possono visualizzare il tuo sito web in tre modi principali: screenshot, HTML non elaborato e l'albero dell'accessibilità.

Screenshot

L'agente acquisisce uno snapshot della pagina sottoposta a rendering e utilizza un modello di visione per identificare gli elementi. In base allo screenshot, l'agente può riconoscere che una barra di ricerca in alto a destra è una ricerca globale, mentre una casella al centro è probabilmente un campo del modulo. I segnali visivi possono essere utili, in quanto gli agenti possono utilizzare colore, dimensione e prossimità per determinare l'importanza. Un pulsante Elimina grande probabilmente verrà interpretato con maggiore cautela rispetto a un piccolo link "Guida". Tuttavia, l'analisi degli screenshot può essere lenta e costosa (in termini di token utilizzati), il che la rende più adatta come backup quando la struttura è confusa.

HTML

L'agente analizza il DOM e legge il codice HTML. Comprende la nidificazione degli elementi, la gerarchia logica dell'albero DOM, gli attributi come ID e classi che definiscono la struttura e le stringhe di dati non elaborati che formano la spina dorsale informativa del sito. In questo modo, l'agente può comprendere la relazione tra gli elementi.

Se un pulsante Acquista ora si trova all'interno di un contenitore di prodotti, l'agente presuppone che il pulsante appartenga a quel prodotto specifico.

Albero di accessibilità

L'albero dell'accessibilità è un'API nativa del browser che estrae dal DOM gli elementi più importanti: ruoli, nomi e stati degli elementi interattivi. È il riepilogo semantico della pagina, utilizzato dalle tecnologie per la disabilità. Per un agente AI, funge da mappa ad alta fedeltà che ignora il "rumore" visivo del CSS per concentrarsi sull'utilità pura. Interpretando questo albero, un agente può apprendere l'intento funzionale di ogni pulsante di attivazione/disattivazione, cursore e campo di immissione.

Strumenti WebMCP

WebMCP è uno standard web proposto per colmare il divario tra siti web e agenti, per condividere con gli agenti scopo e attività espliciti. Ciò avviene definendo strumenti, ovvero annotazioni JavaScript o HTML. Gli agenti interpretano questi strumenti più rapidamente e con maggiore precisione rispetto all'azionamento standard.

Gli strumenti WebMCP possono essere utilizzati per l'assistenza clienti, l'e-commerce, la scoperta e altro ancora. Alcune azioni sono sensibili, ad esempio effettuare un acquisto. Puoi includere un comando per richiedere l'interazione dell'utente con una finestra di dialogo di conferma.

Scopri i casi d'uso di WebMCP e come creare strumenti efficaci.

Modalità combinate

Affidarsi a un singolo input crea un divario semantico. Ad esempio, nel DOM, un agente potrebbe vedere un <div> senza sapere che in realtà l'hai configurato come un pulsante funzionale con CSS e JavaScript. Con gli screenshot, è possibile che un agente identifichi la posizione del pulsante sullo schermo, ma non è ancora a conoscenza della destinazione o dell'azione che il pulsante è progettato per attivare.

Gli agenti moderni, quindi, combinano più modalità. Utilizzano il DOM e l'albero dell'accessibilità per ottenere un elenco pulito e strutturato di elementi interattivi, quindi fanno un controllo incrociato con un rendering visivo per comprendere il layout, il raggruppamento e gli indicatori visivi.

Il nostro compito è fornire segnali puliti in tutti questi canali.

Crea siti web ottimizzati per gli agenti

Per aiutare gli agenti a navigare nel tuo sito web, tutte le azioni che una persona o un agente deve intraprendere devono essere chiaramente indicate nell'interfaccia del sito. Ecco alcune best practice:

• Evita elementi fantasma. Evita overlay trasparenti che nascondono elementi interattivi. L'analisi visiva eseguita dall'agente potrebbe scartare i nodi coperti, anche se il nodo appare trasparente.
• Utilizza l'HTML semantico. Progetta elementi interattivi con HTML semantico. Ad esempio, utilizza i tag <button> e <a> anziché gli elementi <div> e <span> modificati. Gli agenti riconoscono i primi come elementi interattivi.
  • Se non puoi utilizzare l'HTML semantico, fornisci sempre all'elemento gli attributi role e tabindex appropriati. Ad esempio: <div role="button">.
  • Aggiungi l'attributo for ai tag <label> per collegarli agli input. In questo modo l'agente AI comprende lo scopo di un campo indicando il testo dell'etichetta direttamente collegato alla stringa di azione.
• Utilizza CSS per gli indicatori visivi. Imposta cursor: pointer in CSS, che è un indicatore forte di azionabilità.
• Raggiungere le dimensioni minime per l'analisi visiva. Assicurati che tutti gli elementi interattivi necessari per completare un'azione siano visibili e più grandi di 8 pixel quadrati, per evitare che vengano esclusi dall'analisi visiva del modello.
• Garantire un layout stabile. Gli agenti che acquisiscono screenshot probabilmente si confonderanno se il layout del tuo sito web cambia continuamente, ad esempio quando un pulsante Aggiungi al carrello nella pagina di prodotto si trova in una posizione diversa per ogni categoria di prodotto.
• Crea strumenti WebMCP per definire attività e azioni esplicite per gli agenti che supportano l'API.

Passaggi successivi

Tutto ciò che suggeriamo per rendere un sito "pronto per l'agente" lo rende anche migliore per gli utenti.

Rendere i siti web compatibili con gli agenti AI è un incentivo a riaffermare i principi fondamentali della creazione di siti web ben strutturati, accessibili e semantici.

• Controlla la struttura di accessibilità: utilizza gli strumenti esistenti per assicurarti che la gerarchia del tuo sito sia leggibile e stabile.
• Scopri di più su WebMCP, uno standard web proposto per aiutare i siti web a interagire con gli agenti. Le API sono disponibili per la sperimentazione in produzione in Chrome, con un origin trial.