Agent-freundliche Websites erstellen

Kasper Kulikowski

Omkar More

Ihre Website hat eine neue Art von Besucher. Einige Nutzer*innen wechseln von der manuellen Navigation zur Delegation zielorientierter Routen an KI-Agents. Diese autonomen Systeme können Eingaben interpretieren, Aktionen planen und im Namen eines Nutzers ausführen.

Viele unserer Websites sind jedoch so gestaltet, dass sie für Menschen ansprechend sind. Sie haben komplexe Hover-Zustände, sich ändernde Layouts und flüssige Bewegungen. Für Agents ist diese Funktion nicht verfügbar.

So sehen Agents Ihre Website

KI-Agenten sehen sich Ihre Website nicht auf einem Monitor an. Sie basieren auf einer maschinenlesbaren Darstellung Ihrer Website. Die Qualität dieser Darstellung bestimmt die Leistung.

KI-Agents können Ihre Website auf drei Arten aufrufen: über Screenshots, über den Roh-HTML-Code und über den Barrierefreiheitsbaum.

Screenshots

Der Agent erstellt einen Snapshot der gerenderten Seite und verwendet ein Vision-Modell, um Elemente zu identifizieren. Anhand des Screenshots kann der Kundenservicemitarbeiter erkennen, dass es sich bei der Suchleiste oben rechts um eine globale Suche handelt, während es sich bei dem Feld in der Mitte wahrscheinlich um ein Formularfeld handelt. Visuelle Hinweise können hilfreich sein, da Kundenservicemitarbeiter anhand von Farbe, Größe und Nähe die Wichtigkeit bestimmen können. Ein großer Löschen-Button wird wahrscheinlich vorsichtiger interpretiert als ein kleiner „Hilfe“-Link. Die Analyse von Screenshots kann jedoch langsam und teuer sein (in Bezug auf die verwendeten Tokens). Daher ist sie besser als Backup geeignet, wenn die Struktur unübersichtlich ist.

HTML

Der Agent analysiert das DOM und liest den HTML-Code. Sie versteht, wie Elemente verschachtelt sind, die logische Hierarchie des DOM-Baums, Attribute wie IDs und Klassen, die die Struktur definieren, und Rohdatenstrings, die das Informationsrückgrat der Website bilden. So kann der KI-Agent die Beziehung zwischen Elementen besser verstehen.

Wenn sich ein Jetzt kaufen-Button in einem Produktcontainer befindet, geht der Kundenservicemitarbeiter davon aus, dass er zu diesem bestimmten Produkt gehört.

Baumansicht für Barrierefreiheit

Der Barrierefreiheitsbaum ist eine browsernative API, die das DOM auf das Wesentliche reduziert: Rollen, Namen und Status interaktiver Elemente. Es handelt sich um die semantische Zusammenfassung der Seite, die von Hilfstechnologien verwendet wird. Für einen KI-Agenten fungiert sie als Karte mit hoher Genauigkeit, die den visuellen „Lärm“ von CSS ignoriert, um sich auf den reinen Nutzen zu konzentrieren. Durch die Interpretation dieses Baums kann ein Agent die funktionale Intention jedes Schalters, Schiebereglers und Eingabefelds lernen.

WebMCP-Tools

WebMCP ist ein vorgeschlagener Webstandard, der die Lücke zwischen Websites und Agenten schließen soll, um Agenten explizite Zwecke und Aufgaben mitzuteilen. Dazu werden Tools definiert, die JavaScript- oder HTML-Anmerkungen sind. Die KI-Agents interpretieren diese Tools schneller und genauer als bei der Standardausführung.

WebMCP-Tools können für den Kundensupport, E‑Commerce, Discovery und mehr verwendet werden. Einige Aktionen sind vertraulich, z. B. ein Kauf. Sie können einen Befehl einfügen, um eine Nutzerinteraktion mit einem Bestätigungsdialogfeld anzufordern.

WebMCP-Anwendungsfälle und effektive Tools erstellen

Kombinierte Modalitäten

Wenn Sie sich auf eine einzelne Eingabe verlassen, entsteht eine semantische Lücke. Im DOM sieht ein Agent beispielsweise ein <div>, ohne zu wissen, dass Sie es mit CSS und JavaScript als funktionalen Button konfiguriert haben. Anhand von Screenshots kann ein Kundenservicemitarbeiter möglicherweise erkennen, wo sich die Schaltfläche auf dem Bildschirm befindet, aber er weiß nicht, wohin sie führen soll oder welche Aktion sie auslösen soll.

Moderne KI-Agenten kombinieren daher mehrere Modalitäten. Sie verwenden den DOM- und den Barrierefreiheitsbaum, um eine übersichtliche, strukturierte Liste interaktiver Elemente zu erhalten, und gleichen diese dann mit einer visuellen Darstellung ab, um Layout, Gruppierung und visuelle Hinweise zu verstehen.

Unsere Aufgabe ist es, saubere Signale für alle diese Kanäle zu liefern.

Agentenfreundliche Websites erstellen

Damit KI-Agenten sich auf Ihrer Website zurechtfinden, sollten alle Aktionen, die ein Mensch oder ein KI-Agent ausführen muss, in der Benutzeroberfläche der Website deutlich dargestellt werden. Hier sind einige Best Practices:

• Vermeiden Sie Ghost-Elemente. Vermeiden Sie transparente Overlays, die interaktive Elemente verdecken. Bei der visuellen Analyse durch den Agenten werden möglicherweise Knoten verworfen, die abgedeckt sind, auch wenn sie transparent erscheinen.
• Verwende semantisches HTML. Gestalte interaktive Elemente mit semantischem HTML. Verwenden Sie beispielsweise die Tags <button> und <a> anstelle von geänderten <div>- und <span>-Elementen. Agents erkennen die ersteren als interaktive Elemente.
  • Wenn Sie kein semantisches HTML verwenden können, geben Sie dem Element immer die entsprechenden role und tabindex an. Beispiel: <div role="button">
  • Fügen Sie das Attribut for in <label>-Tags ein, um sie mit Eingaben zu verknüpfen. So kann der KI-Agent den Zweck eines Felds besser nachvollziehen, da der Labeltext angegeben wird, der direkt an den Aktionsstring angehängt ist.
• Visuelle Hinweise mit CSS erstellen: Legen Sie cursor: pointer in CSS fest. Das ist ein starkes Signal für die Umsetzbarkeit.
• Mindestgröße für die visuelle Analyse Achten Sie darauf, dass alle interaktiven Elemente, die zum Ausführen einer Aktion erforderlich sind, sichtbar und größer als 8 Quadratpixel sind, damit sie bei der visuellen Analyse des Modells nicht herausgefiltert werden.
• Für ein stabiles Layout sorgen: Kundenservicemitarbeiter, die Screenshots erstellen, werden wahrscheinlich verwirrt sein, wenn sich das Layout Ihrer Website ständig ändert, z. B. wenn sich die Schaltfläche In den Einkaufswagen auf der Produktseite für jede Produktkategorie an einer anderen Stelle befindet.
• WebMCP-Tools erstellen, um explizite Aufgaben und Aktionen für KI-Agenten zu definieren, die die API unterstützen.

Nächste Schritte

Alles, was wir vorschlagen, um eine Website für KI-Agenten zu optimieren, macht sie auch für Menschen besser.

Wenn Websites für KI-Agenten optimiert werden, wird die Einhaltung der grundlegenden Prinzipien für den Aufbau gut strukturierter, barrierefreier und semantischer Websites gefördert.

• A11y-Baum prüfen: Verwenden Sie vorhandene Tools, um sicherzustellen, dass die Hierarchie Ihrer Website maschinenlesbar und stabil ist.
• Informationen zu WebMCP, einem vorgeschlagenen Webstandard, der Websites bei der Interaktion mit Agenten helfen soll. Die APIs sind in Chrome mit einem Ursprungstest für Experimente in der Produktion verfügbar.