Tworzenie witryn przyjaznych dla agentów

Kasper Kulikowski

Omkar More

Twoja witryna ma nowy typ użytkownika. Niektórzy użytkownicy rezygnują z ręcznej nawigacji i powierzają realizację zadań 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 ludzi. Mają złożone stany najechania kursorem, zmieniające się układy i płynne animacje. Dla agentów jest to funkcjonalnie nieprawidłowe.

Jak agenci widzą Twoją witrynę

Agenci nie przeglądają Twojej witryny na monitorze. Działają na podstawie reprezentacji witryny, którą można odczytać maszynowo. Jakość tej reprezentacji decyduje o ich skuteczności.

Agenci mogą wyświetlać Twoją witrynę na 3 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 pośrodku to prawdopodobnie pole formularza. Wskazówki wizualne mogą być przydatne, ponieważ agenci mogą używać koloru, rozmiaru i bliskości, aby określić ważność. Duży przycisk Usuń będzie prawdopodobnie 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 sprawdza się jako kopia zapasowa, 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 surowe ciągi danych, które tworzą informacyjny szkielet witryny. Pomaga to agentowi zrozumieć relacje między elementami. Jeśli przycisk „Kup teraz” znajduje się w kontenerze produktu, agent zakłada, że ten przycisk należy do tego konkretnego produktu.

Drzewo dostępności

Drzewo dostępności to natywne API przeglądarki, które przekształca DOM w to, co najważniejsze: role, nazwy i stany elementów interaktywnych. Jest to semantyczne podsumowanie strony używane przez technologie wspomagające osoby z niepełnosprawnością. Dla agenta AI działa 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 modalności

Ograniczanie się do jednego źródła danych wejściowych tworzy lukę semantyczną. Na przykład w DOM, agent może zobaczyć element <div>, nie wiedząc, że został on skonfigurowany jako funkcjonalny przycisk za pomocą CSS i JavaScriptu. W przypadku zrzutów ekranu agent może zidentyfikować, gdzie ten przycisk znajduje się na ekranie, ale nadal nie wie, jakie jest jego przeznaczenie ani jakie działanie ma wywołać.

Dlatego nowoczesne agenty łączą wiele modalności. Używają DOM i drzewa dostępności, aby uzyskać czystą, uporządkowaną listę elementów interaktywnych, a następnie porównują ją 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, rozważ wykonanie tych czynności:

• Wszystkie niezbędne działania podejmowane przez człowieka lub agenta powinny być wyraźnie widoczne w interfejsie.
• Zadbaj o stabilny układ. Agenci, którzy robią zrzuty ekranu, mogą być zdezorientowani, jeśli układ Twojej witryny ciągle się zmienia, np. gdy przycisk Dodaj do koszyka na stronie produktu znajduje się w innym miejscu w każdej kategorii produktów.
• Unikaj elementów „duchów” lub przezroczystych nakładek, które mogą ukrywać elementy interaktywne. Analiza wizualna przeprowadzana przez agenta może odrzucić węzły, które są zakryte, nawet jeśli węzeł wydaje się przezroczysty.
• Projektuj elementy interaktywne za pomocą semantycznego kodu HTML. Zamiast zmodyfikowanych elementów <div> i <span> używaj tagów <button> i <a>. Agenci rozpoznają je jako interaktywne.
  • Jeśli nie możesz używać semantycznego kodu HTML, zawsze podaj elementowi odpowiednią role i tabindex. Na przykład <div role="button">.
• Ustaw w CSS cursor: pointer, co jest silnym sygnałem, że element jest interaktywny.
• 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, który jest bezpośrednio powiązany z ciągiem 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 nie zostały odfiltrowane przez analizę wizualną.

Dalsze kroki

Wszystko, co sugerujemy, aby witryna była „przygotowana na agentów”, sprawia też, że jest ona lepsza dla ludzi.

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

• Przeczytaj o WebMCP – proponowanym standardzie internetowym, który ma ułatwić 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 Twojej witryny jest czytelna dla maszyn i stabilna.