Tworzenie witryn przyjaznych dla agentów

Kasper Kulikowski

Omkar More

W Twojej witrynie pojawił się nowy typ odwiedzającego. Niektórzy użytkownicy rezygnują z ręcznego wyszukiwania informacji i przekazują zadania związane z osiąganiem celów agentom AI. Te autonomiczne systemy mogą interpretować dane wejściowe, planować i wykonywać działania w imieniu użytkownika.

Wiele naszych witryn jest jednak zaprojektowanych tak, aby były atrakcyjne dla użytkowników, z złożonymi stanami najechana, zmieniającymi się układami i płynnymi animacjami. W przypadku pracowników obsługi klienta ta funkcja nie działa.

Jak agenci widzą Twoją witrynę

Pracownicy nie sprawdzają Twojej witryny na monitorze. Działają one na podstawie zrozumiałej dla maszyn reprezentacji Twojej witryny. Jakość tej reprezentacji określa ich skuteczność.

Agenci mogą wyświetlać Twoją witrynę na 3 główne sposoby: za pomocą zrzutów ekranu, kodu HTML i drzewa dostępności.

Zrzuty ekranu

Agent robi zrzut renderowanej strony i używa modelu wizyjnego do identyfikowania elementów. Na podstawie zrzutu ekranu agent może rozpoznać, że pasek wyszukiwania w prawym górnym rogu to wyszukiwanie globalne, a pole na środku to prawdopodobnie pole formularza. Wskazówki wizualne mogą być przydatne, ponieważ agenci mogą określać ważność na podstawie koloru, rozmiaru i bliskości. Duży przycisk Usuń prawdopodobnie będzie interpretowany z większą ostrożnością niż mały link „Pomoc”. Analizowanie zrzutów ekranu może być jednak powolne i kosztowne (pod względem zużytych tokenów), dlatego lepiej używać go jako kopii zapasowej, gdy struktura jest niejasna.

HTML

Agent analizuje DOM i odczytuje kod HTML. Rozumie, jak elementy są zagnieżdżone, logiczną hierarchię drzewa DOM, atrybuty takie jak identyfikatory i klasy, które definiują strukturę, oraz ciągi danych pierwotnych, które stanowią podstawę informacyjną witryny. Pomaga to agentowi zrozumieć relacje między elementami. Jeśli przycisk „Kup teraz” znajduje się w kontenerze produktu, agent zakłada, że należy on do tego konkretnego produktu.

Drzewo ułatwień dostępu

Drzewo dostępności to natywny interfejs API przeglądarki, który wyodrębnia z DOM najważniejsze informacje: role, nazwy i stany elementów interaktywnych. Jest to semantyczne podsumowanie strony używane przez technologie wspomagające osoby z niepełnosprawnością. W przypadku agenta AI działa ona jako mapa o wysokiej wierności, która ignoruje wizualny „szum” CSS, aby skupić się na czystej użyteczności. Interpretując to drzewo, agent może poznać funkcjonalne przeznaczenie każdego przełącznika, suwaka i pola do wprowadzania danych.

Połączone metody

Korzystanie z jednego rodzaju danych wejściowych powoduje powstanie luki semantycznej. Na przykład w DOM agent może widzieć <div>, nie wiedząc, że w rzeczywistości skonfigurowano go jako funkcjonalny przycisk za pomocą CSS i JavaScriptu. Na podstawie zrzutów ekranu agent może zidentyfikować miejsce, w którym znajduje się przycisk, ale nie wie, do czego ma on prowadzić ani jakie działanie ma wywoływać.

Nowoczesne modele łączą więc wiele modalności. Korzystają z DOM i drzewa ułatwień dostępu, aby uzyskać przejrzystą, uporządkowaną listę elementów interaktywnych, a następnie porównują dane z różnych kanałów z renderowaniem wizualnym, aby zrozumieć układ, grupowanie i wskazówki wizualne.

Naszym zadaniem jest dostarczanie czystych sygnałów we wszystkich tych kanałach.

Tworzenie witryn przyjaznych dla agentów

Aby ułatwić agentom poruszanie się po Twojej witrynie, możesz:

• Wszystkie niezbędne działania podejmowane przez człowieka lub agenta powinny być wyraźnie widoczne w interfejsie.
• Zapewnij stabilny układ. Jeśli układ Twojej witryny ciągle się zmienia, np. przycisk Dodaj do koszyka na stronie produktu znajduje się w różnych miejscach w zależności od kategorii produktu, może to dezorientować programy, które robią zrzuty ekranu.
• Unikaj „duchów” lub przezroczystych nakładek, które mogą ukrywać elementy interaktywne. Analiza wizualna przeprowadzana przez agenta może odrzucać węzły, które są zakryte, nawet jeśli wydają się przezroczyste.
• Projektuj elementy, które można kliknąć, za pomocą semantycznego kodu HTML. Preferuj tagi <button> i <a> od zmodyfikowanych elementów <div> i <span>. Agenci rozpoznają je jako interaktywne.
  • Jeśli nie możesz używać semantycznego kodu HTML, zawsze podawaj odpowiednie atrybuty role i tabindex. Na przykład: <div role="button">.
• Ustaw cursor: pointer w CSS, co jest silnym sygnałem wskazującym możliwość podjęcia działania.
• Dodaj atrybut for do tagów <label>, aby połączyć je z polami wejściowymi. Pomaga to agentowi AI zrozumieć przeznaczenie pola, wskazując tekst etykiety bezpośrednio dołączonej do ciągu działania.
• Upewnij się, że wszystkie elementy interaktywne wymagane do kontynuowania ścieżki użytkownika mają widoczny obszar większy niż 8 pikseli kwadratowych, aby uniknąć odfiltrowania przez analizę wizualną.

Dalsze kroki

Wszystkie nasze sugestie dotyczące przygotowania witryny pod kątem agentów sprawiają, że staje się ona lepsza także dla ludzi.

Dostosowanie witryn do agentów AI zachęca do ponownego zaangażowania się w podstawowe zasady tworzenia dobrze skonstruowanych, dostępnych i semantycznych witryn.

• Dowiedz się więcej o WebMCP, proponowanym standardzie internetowym, który ma ułatwiać witrynom interakcję z agentami, i zarejestruj się w programie wczesnego dostępu, aby rozpocząć eksperymentowanie.
• Sprawdź drzewo dostępności: użyj istniejących narzędzi, aby upewnić się, że hierarchia witryny jest czytelna dla maszyn i stabilna.