Jak připravit web pro AI agenty: Průvodce pro vývojáře a SEO

Vaše webové stránky mají nový typ návštěvníka. Někteří uživatelé už neprocházejí web ručně, ale delegují své cíle na AI agenty - autonomní systémy, které interpretují vstup, plánují a provádějí akce jménem uživatele.

Mnoho našich webů je však navržených tak, aby byly krásné pro lidi - se složitými hover efekty, pohyblivými layouty a plynulými animacemi. Pro agenty je to funkčně rozbité.

Co je AI agent?

AI agent je systém, který přijímá vstup, interpretuje jej a následně plánuje a provádí akce jménem uživatele. Klíčové vlastnosti agentů v kontextu webu:

• Autonomie: Agenti mohou fungovat bez přímého lidského zásahu.
• Interaktivita: Mohou komunikovat s jinými agenty i lidmi.
• Reaktivita: Vnímají své prostředí a reagují na změny.
• Proaktivita: Sami přebírají iniciativu k dosažení cílů.

Představte si například online knihkupectví. Uživatel může získat doporučení na novou knihu interakcí s LLM. Agent pak může uživatele odvést na stránku doporučené knihy a zahájit proces nákupu. Pokud je kniha vyprodána, agent může uživatele přesměrovat k jinému obchodu.

Jak agenti vnímají váš web

Agenti se na váš web nedivaji na monitoru. Pracují se strojově čitelnou reprezentací vašeho webu. Kvalita této reprezentace určuje jejich výkon.

1. Screenshoty

Agent pořídí snímek vyrenderované stránky a použije vizuální model k identifikaci prvků. Na základě snímku může rozpoznat, že vyhledávací pole v pravém horním rohu je globální vyhledávání, zatímco pole uprostřed je pravděpodobně formulářové pole. Vizuální vodítka pomáhají – velké tlačítko Smazat bude interpretováno s větší opatrností než malý odkaz Napoveda.

Analyza screenshotů je vsak pomalá a nákladná (z hlediska použitých tokenů), proto slouží spíše jako záloha, když je struktura matoucí.

2. HTML a DOM

Agent analyzuje DOM a čte HTML. Rozumí vnoření elementů, logické hierarchii DOM stromu, atributům jako ID a třídy, které definují strukturu, a surovým datovým řetězcům. To agentovi pomáhá pochopit vztahy mezi prvky - pokud je tlačítko Koupit uvnitř kontejneru produktu, agent předpokládá, že tlačítko patří k tomuto konkrétnímu produktu.

3. Strom přístupnosti (Accessibility Tree)

Strom přístupnosti je nativní API prohlížeče, které destiluje DOM na to nejdůležitější: role, názvy a stavy interaktivních prvků. Je to sémantické shrnutí stránky, používané asistivními technologiemi. Pro AI agenta funguje jako mapa s vysokou věrností, která ignoruje vizuální šum CSS a soustředí se na čistou funkčnost.

4. Kombinace modalit

Spoléhání na jediný vstup vytvoří sémantickou mezeru. Například v DOM může agent vidět <div>, aniž by věděl, že jste jej nakonfigurovali jako funkční tlačítko pomocí CSS a JavaScriptu.

Moderní agenti proto kombinují více modalit. Používají DOM a strom pristupnosti k získání čistého seznamu interaktivních prvků a následně je křížově odkazují s vizuálním renderingem, aby pochopili layout a vizuální vodítka.

Praktické kroky: Jak udělat web přátelský pro agenty

Používejte sémantické HTML

Navrhujte interaktivní prvky se sémantickým HTML. Preferujte tagy <button> a <a> před upravenými <div> a <span> elementy. Agenti je rozpoznají jako interaktivní.

Pokud nemůžete použít sémantické HTML, vždy elementu přidejte příslušný atribut role a tabindex. Například: <div role="button">.

Zajistěte stabilní layout

Agenti, kteří pořizují screenshoty, budou pravděpodobně zmateni, pokud se layout vašeho webu neustále mění. Například když je tlačítko Přidat do košíku na produktové stránce na jiném místě pro každou kategorii produktů.

Vyhýbejte se neviditelným prvkům

Nepoužívejte průhledné překryvy (overlays), které by mohly skrýt interaktivní prvky. Vizuální analýza agenta může zahodit uzly, které jsou překryté, i když je překryv průhledný.

Propojte štítky s formuláři

Přidejte atribut for na tagy <label>, abyste je propojili se vstupy. To pomáhá AI agentovi pochopit účel pole tím, že indikuje text štítku přímo připojený k akci.

Dostatecna velikost interaktivních prvků

Ujistěte se, že všechny interaktivní prvky potřebné pro pokračování uživatele mají viditelnou plochu větší než 8 čtverečních pixelů, aby nebyly odfiltrovány vizuální analýzou. Nastavení cursor: pointer v CSS je silný signál pro akcionovatelnost.

WebMCP: Nový standard pro interakci agentů s weby

Google představil WebMCP - navrhovaný webový standard, který pomáhá webovým stránkám interagovat s agenty. WebMCP navrhuje dvě nová API:

• Deklarativní API: Pro standardní akce, které lze definovat přímo v HTML formulářích.
• Imperativní API: Pro složitější, dynamičtější interakce vyžadující spuštění JavaScriptu.

Tato API slouží jako most, který dělá váš web připravený na agenty a umožňuje spolehlivější a výkonnější pracovní postupy agentů ve srovnání se surovým ovládáním DOM.

Vše, co navrhujeme pro přípravu webu na agenty, zároveň dělá weby lepšími pro lidi. Příprava webu pro AI agenty je motivací k návratu k základním principům budování dobře strukturovaných, přístupných a sémantických webů.

Chcete poradit, jak připravit váš web na eru AI agentu? Neváhejte mě kontaktovat, rád s vámi proberu strategii.