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 di AI. Questi sistemi autonomi possono interpretare gli input, pianificare ed eseguire azioni per conto di un utente.

Tuttavia, molti dei nostri siti web sono progettati per essere belli per gli utenti, con stati di passaggio del mouse complessi, layout variabili e movimento fluido. Per gli agenti, questa funzionalità non è disponibile.

Come gli agenti visualizzano il tuo sito

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

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

Screenshot

L'agente acquisisce uno snapshot della pagina di cui è stato eseguito il 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. Gli indizi visivi possono essere utili, in quanto gli agenti possono utilizzare il colore, le dimensioni e la prossimità per determinare l'importanza. Un pulsante Elimina di grandi dimensioni verrà probabilmente 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 l'HTML. Comprende come sono nidificati gli 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 comprende 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 di accessibilità è un'API nativa del browser che distilla il DOM in ciò che è più importante: ruoli, nomi e stati degli elementi interattivi. È il riepilogo semantico della pagina, utilizzato dalle tecnologie per la disabilità. Per un agente AI, funziona come una mappa ad alta fedeltà che ignora il "rumore" visivo del CSS per concentrarsi sulla pura utilità. Interpretando questo albero, un agente può apprendere l'intento funzionale di ogni pulsante di attivazione/disattivazione, cursore e campo di immissione.

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 prevista o dell'azione che è progettato per attivare.

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

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

Creare siti web ottimizzati per gli agenti

Per aiutare gli agenti a navigare nel tuo sito web, ti consigliamo di:

• Tutte le azioni necessarie, intraprese da un utente o da un agente, devono essere chiaramente visibili nell'interfaccia.
• Garantire un layout stabile. Gli agenti che acquisiscono screenshot probabilmente si confonderanno se il layout del tuo sito web cambia costantemente, ad esempio quando un pulsante Aggiungi al carrello nella pagina del prodotto si trova in una posizione diversa per ogni categoria di prodotti.
• Evitare elementi "fantasma" o overlay trasparenti che potrebbero nascondere elementi interattivi. L'analisi visiva eseguita dall'agente potrebbe ignorare i nodi coperti, anche se il nodo appare trasparente.
• Progettare elementi interattivi con HTML semantico. Preferisci i tag <button> e <a> agli elementi <div> e <span> modificati. Gli agenti li riconoscono come interattivi.
  • Se non puoi utilizzare l'HTML semantico, fornisci sempre all'elemento il role e il tabindex appropriati. Ad esempio, <div role="button">.
• Imposta cursor: pointer in CSS, che è un indicatore forte di interattività.
• 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 collegato direttamente alla stringa di azione.
• Assicurati che tutti gli elementi interattivi necessari per continuare il percorso utente abbiano un'area visibile maggiore di 8 pixel quadrati, per evitare che vengano esclusi dall'analisi visiva.

Passaggi successivi

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

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

• Scopri di più su WebMCP, uno standard web proposto per aiutare i siti web a interagire con gli agenti, e registrati al programma di anteprima per iniziare a sperimentare.
• Esegui un audit dell'albero di accessibilità: utilizza gli strumenti esistenti per assicurarti che la gerarchia del tuo sito sia leggibile dalla macchina e stabile.