WebMCP és Agentic Browsing: hogyan töltik ki az AI ágensek az űrlapjaidat

Olvasástól a cselekvésig — mi változott?

Két évvel ezelőtt az AI ágensek elsősorban szövegértők voltak. Befogadtak tartalmat, összegeztek, válaszoltak. Ma már böngészőt vezérelnek: kattintanak, legördülő listákból választanak, szöveget gépelnek be, és elküldik az űrlapot. Ezt hívják agentic browsingnak — az ágensalapú böngészésnek.

Az átállás nem elméleti. Az OpenAI Operator, az Anthropic Computer Use és a Google Project Mariner mind azt célozza, hogy a felhasználó szándéka alapján az AI elvégezzen egy konkrét webes feladatot — regisztrációt, ajánlatkérést, foglalásmegerősítést — anélkül, hogy a felhasználónak a képernyő előtt kellene ülnie.

Ez új terhet ró a weboldalkészítőkre. Egy hagyományos űrlap vizuálisan egyértelmű lehet, de az AI ágensnek fogalma sincs róla, hogy a name mező a teljes nevet vagy a keresztnevet várja-e, és hogy a Submit gomb megnyomása visszafordíthatatlan műveletet indít-e el. A WebMCP erre adja meg a választ.

Mi a WebMCP?

A WebMCP (Model Context Protocol for the Web) egy HTML-kiterjesztési javaslat, amely deklaratív attribútumokat vezet be az űrlapokra és mezőkre. Ezek az attribútumok nem változtatják meg az oldal megjelenését, nem befolyásolják a böngésző normál működését — kizárólag az AI ágenseknek szólnak.

Négy alapattribútumról van szó:

toolname — az űrlap gépi neve, amit az AI ágens azonosítóként használ (pl. send_contact_message).
tooldescription — egyszerű szöveges leírás arról, mit csinál az űrlap. Az AI ágens ebből tudja meg, mikor érdemes használni.
toolautosubmit — logikai attribútum, jelzi, hogy az AI ágens a kitöltés után automatikusan beküldheti-e az űrlapot felhasználói megerősítés nélkül.
toolparamdescription — az egyes mezőkre kerül, és megmondja, milyen értéket vár az a mező.

Miért nem elegendő a placeholder vagy a label?

A placeholder és a label a felhasználónak szóló vizuális súgó. Az AI ágens ezeket is olvassa, de nem tudja belőlük levezetni, hogy az adott mező az elvégzendő feladat szempontjából kötelező-e, milyen formátumot vár, vagy hogy rossz kitöltés esetén mi történik. A toolparamdescription ezt explicit módon közli.

Deklaratív megközelítés — kódpélda

Az alábbi forma az AI ágensnek teljes körű leírást ad a kapcsolatfelvételi űrlapról:

              <!-- Kapcsolatfelvételi űrlap WebMCP-annotációkkal -->
<form id="contact-form"
      method="POST"
      action="/api/contact"
      toolname="send_contact_message"
      tooldescription="Send a contact message to the site owner.
        Provide name, email, and message. All fields required."
      toolautosubmit>

  <input name="name"
         toolparamdescription="Full name of the person sending the message.">

  <input name="email" type="email"
         toolparamdescription="Email address for receiving a reply.">

  <textarea name="message"
            toolparamdescription="Message content to send to the site owner.">
  </textarea>
</form>
            

Imperatív megközelítés — a JavaScript API

Ha az HTML-t nem tudod közvetlenül módosítani, vagy dinamikusan jönnek létre az űrlapok, a navigator.modelContext.registerTool() hívással programozottan is regisztrálhatod az eszközt:

              if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "send_contact_message",
    description: "Send a contact message to the site owner.
      Provide name, email address, and message text.",
    inputSchema: {
      type: "object",
      properties: {
        name:    { type: "string", description: "Full name of the sender" },
        email:   { type: "string", format: "email",
                   description: "Email address for receiving a reply" },
        message: { type: "string",
                   description: "The message content to send" }
      },
      required: ["name", "email", "message"]
    },
    execute: function(params) {
      var f = document.getElementById("contact-form");
      if (!f) return;
      document.getElementById("contact-name").value = params.name || "";
      document.getElementById("contact-email").value = params.email || "";
      document.getElementById("contact-message").value = params.message || "";
      f.submit();
    }
  });
}
            

A két megközelítés kiegészíti egymást. A deklaratív attribútumok a statikus HTML-t gazdagítják, a JavaScript API a dinamikus, SPA-alapú oldalakhoz illik. Érdemes mindkettőt alkalmazni — az AI ágensek ma még különbözőképpen olvassák az oldalakat.

Mi az Agentic Browsing valójában?

Az Agentic Browsing azt jelenti, hogy az AI ágens nem csak értelmezi a weboldalt, hanem önállóan interaktál vele. A böngésző a gépi kliens felülete lesz — ahogy a billentyűzet és egér a tiéd.

A gyakorlatban ez azt jelenti, hogy egy felhasználó azt mondja a saját AI asszisztensének: „Kérj árajánlatot a három legjobb helyi könyvelőirodától". Az ágens megnyitja az irodák weboldalait, megkeresi a kapcsolatfelvételi vagy ajánlatkérő űrlapot, kitölti a releváns adatokkal, és beküldi — mindezt emberi beavatkozás nélkül.

Az átalakulás következménye kettős. Az oldalad forgalmában megjelennek a gépi kliensek, amelyek nem scrolloznak, nem kattintanak a bannerre, és egyenesen a feladathoz szükséges elemet keresik. Egyszerre csökken a „szép dizájn" súlya és nő a gépi érthetőség fontossága.

Ellenőrzőpont

Ha az oldalad egyetlen űrlapjára sem kerül WebMCP-annotáció, az AI ágens vagy találgat — és hibát követ el —, vagy egyszerűen feladja és a konkurens oldalt nyitja meg, amelyik egyértelműbb. A találgatás rosszabb kimenet, mint a kihagyás.

Miért számít az ARIA az AI ágenseknek?

Az ARIA (Accessible Rich Internet Applications) attribútumokat eredetileg a képernyőolvasóknak találták ki. Az AI ágensek azonban ugyanazokat a szemantikai fogódzókat keresik: mi ez az elem, mire való, és hogyan kapcsolódik a többi elemhez.

Ahol az ARIA következetesen van alkalmazva, ott az AI ágens biztonsággal navigál. Ahol hiányzik vagy rosszul van használva, ott a gépi kliens félreérti az oldalt — pont úgy, ahogy egy vak felhasználó is elvész egy rosszul jelölt oldalon.

A leggyakoribb ARIA-hiba, amelyet az AI ágens félreért

Az aria-label attribútum csak akkor értelmes, ha az elem rendelkezik implicit vagy explicit ARIA-szereppel. Egy sima <div>-nek nincs implicit szerepe — a böngésző nem tudja az AI ágensnek közvetíteni, hogy ez az elem egy kép, egy gomb vagy valami más. Az eredmény: a label ott lebeg, de az ágens nem tudja, mihez rendelje hozzá.

              <!-- Rossz: az aria-label nem köthető szerephez -->
<div aria-label="5 csillagos értékelés">★★★★★</div>

<!-- Jó: az explicit role="img" megadja a kontextust -->
<div role="img" aria-label="5 csillagos értékelés">★★★★★</div>
            

A javítás egyetlen sor. De elmaradt formában az AI ágens nem tudja, hogy az öt csillag értékelést jelöl — és ha egy terméket ajánl, kihagyja az értékelési adatot a döntésből.

Ugyanez a logika vonatkozik az összetett komponensekre: egyedi dropdown-ok, slider-ek, tab-ok. Ha ezeken nincs megfelelő role, aria-expanded, aria-selected jelölés, az AI ágens nem tudja megállapítani az aktuális állapotot, és nem tudja helyesen kezelni az elemet.

Az ARIA és a WebMCP kapcsolata

A WebMCP az Mit csináljak ezzel az űrlappal? kérdésre válaszol. Az ARIA az Mi ez az oldal és hogyan van felépítve? kérdésre. Együtt teszik lehetővé, hogy az AI ágens ne csak megtalálja a feladathoz szükséges elemet, hanem helyesen is értse az oldalszerkezetet, amelybe az illeszkedik.

Hogyan auditálja ezt az AI Web teszt?

Az AI Web teszt új auditkategóriája az Agentic Browsing felkészültség nevet viseli. Három területet mér:

WebMCP lefedettség. Hány interaktív űrlap van az oldalon, és hány rendelkezik toolname és tooldescription attribútummal? A lefedettség százalékos aránya adja az alappontszámot. Egy ajánlatkérő vagy kapcsolatfelvételi űrlap annotáció nélkül 0 pontot hoz erre az elemre.
ARIA-megfelelőség. Az audit ellenőrzi az implicit szerep nélküli aria-label használatot, a hiányzó role-attribútumokat egyedi komponenseken, és azt, hogy a fő tartalom szekcióinak van-e aria-labelledby vagy aria-label hivatkozása. Minden talált hiba levon.
Imperatív eszközregisztráció. Az audit megvizsgálja, hogy a JavaScript kód tartalmaz-e navigator.modelContext.registerTool hívást, és ha igen, az inputSchema helyesen definiált-e. Ez bónuszpontokat hoz, mert az imperatív regisztráció a legjobban feldolgozható forrás az AI ágensek számára.

Az összes Agentic Browsing pont az AIO pillér alá kerül. Ez a pillér eddig az AI-válasz-motoroknak szóló tartalomfeldolgozást mérte (Schema.org, FAQPage, HowTo, alt szövegek). Az Agentic Browsing az AIO logikus kiterjesztése: nem elég, hogy az AI ágens olvassa az oldalt, el is kell tudnia végezni a feladatot rajta.

Fontos a toolautosubmit körültekintő alkalmazása

A toolautosubmit attribútum azt engedélyezi, hogy az AI ágens emberi megerősítés nélkül küldje be az űrlapot. Visszafordíthatatlan műveleteknél (megrendelés, törlés, fizetési indítás) ezt soha ne add hozzá. Kapcsolatfelvételi, hírlevél-feliratkozási és ajánlatkérő űrlapoknál általában biztonságos.

Mit tegyél most? Négy konkrét lépés

Ha az oldaladon van legalább egy kapcsolatfelvételi, ajánlatkérő vagy regisztrációs űrlap, az alábbi lépések elvégzése elegendő az Agentic Browsing alappontszámhoz:

Azonosítsd az összes interaktív űrlapot. Nézd meg a forráskódot: minden <form> elem egy potenciális WebMCP-jelölt. Prioritást kapjanak azok, amelyek üzleti értéket hordoznak — kapcsolatfelvétel, ajánlatkérés, foglalás, regisztráció.
Add hozzá a deklaratív attribútumokat. Minden prioritásos <form>-ra kerüljön toolname (egyedi, gépi azonosító, szóközök nélkül) és tooldescription (egy-két mondatos, világos leírás angolul vagy magyarul). Az összes mezőre kerüljön toolparamdescription. Ha a beküldés visszafordíthatatlan, ne add hozzá a toolautosubmit-ot.
Javítsd az ARIA-hibákat. Keress aria-label-t olyan elemeken, amelyeken nincs role, és amelyeknek nincs implicit ARIA-szerepük (például <div>, <span>). Add hozzá a megfelelő szerepet. Az AI Web teszt auditja megmutatja a konkrét elemeket és sorokat.
Opcionálisan add hozzá az imperatív regisztrációt. Ha JavaScript keretrendszert használsz (React, Vue, Angular), a navigator.modelContext.registerTool() hívás az oldal betöltésekor fuss le. Az execute függvény töltse ki és küldje be az űrlapot a kapott paraméterekkel.

Mintafájl elérhető

Az AI Web teszt Optimalizálási Sablon HTML-je tartalmaz egy teljes WebMCP-példát: deklaratív attribútumokkal ellátott kapcsolatfelvételi űrlapot és az imperatív registerTool regisztrációt is. A fájlban megjegyzések magyarázzák el, mit miért és hogyan kell módosítani.

A lényeg egy mondatban

Az AI ágensek böngésznek, és ha az oldalad nem mondja el nekik, mire valók az űrlapjai, a gépi kliens nem fogja őket használni — és az, amelyik elmondja, versenyelőnybe kerül.

A WebMCP nem bonyolult. Négy HTML-attribútum, amelyek vizuálisan láthatatlanok, de a gépi klienseknek egyértelmű utasítást adnak. Az ARIA-megfelelőség sem új elvárás — a képernyőolvasók évtizedek óta ugyanezeket a jelöléseket igénylik. Az AI ágensek csupán újabb fogyasztói lesznek ennek a szemantikus rétegnek.

Az AI Web teszt auditja most megmutatja, hol áll az oldalad. Ahol hiány van, ott a sablon és a négy lépés elegendő a felzárkózáshoz. A gépi kliensek aránya a webes forgalomban csak nőni fog — megéri most felkészülni.

Auditáld az oldaladat most

Futtasd az ingyenes AI Web teszt auditot, és nézd meg, hogyan teljesít az oldalad az új Agentic Browsing kategóriában — WebMCP lefedettség, ARIA-megfelelőség, és imperatív eszközregisztráció alapján.

Ingyenes Audit Sablon letöltése

Az Optimalizálási Sablon HTML tartalmazza a teljes WebMCP-példát, az összes szükséges meta tag-gel és Schema.org jelöléssel együtt.