Agent-freundliche Websites erstellen

Kasper Kulikowski

Omkar More

Ihre Website hat eine neue Art von Besuchern. Einige menschliche Nutzer wechseln von der manuellen Navigation zur Übertragung zielorientierter Aufgaben an KI-Agenten. 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, mit komplexen Hover-Zuständen, sich ändernden Layouts und flüssigen Bewegungen. Für Agenten ist das funktional nicht möglich.

So sehen Agenten Ihre Website

Agenten sehen sich Ihre Website nicht auf einem Monitor an. Sie arbeiten mit einer maschinenlesbaren Darstellung Ihrer Website. Die Qualität dieser Darstellung bestimmt ihre Leistung.

Agenten können Ihre Website auf drei Arten ansehen: Screenshots, Raw-HTML und die Baumansicht für Barrierefreiheit.

Screenshots

Der Agent macht einen Screenshot der gerenderten Seite und verwendet ein Vision-Modell, um Elemente zu identifizieren. Anhand des Screenshots kann der Agent erkennen, dass eine Suchleiste oben rechts eine globale Suche ist, während ein Feld in der Mitte wahrscheinlich ein Formularfeld ist. Visuelle Hinweise können hilfreich sein, da Agenten Farbe, Größe und Nähe verwenden können, um die Wichtigkeit zu bestimmen. Eine große Schaltfläche Löschen wird wahrscheinlich vorsichtiger interpretiert als ein kleiner Link „Hilfe“. Die Analyse von Screenshots kann jedoch langsam und teuer sein (in Bezug auf verwendete Tokens). Daher ist sie besser als Backup geeignet, wenn die Struktur verwirrend ist.

HTML

Der Agent analysiert das DOM und liest das HTML. Er versteht, wie Elemente verschachtelt sind, die logische Hierarchie der DOM-Baumstruktur, Attribute wie IDs und Klassen, die die Struktur definieren, und Raw-Datenstrings, die das Informationsgerüst der Website bilden. So kann der Agent die Beziehung zwischen Elementen verstehen. Wenn sich eine Schaltfläche „Jetzt kaufen“ in einem Produktcontainer befindet, geht der Agent davon aus, dass die Schaltfläche zu diesem bestimmten Produkt gehört.

Baumansicht für Barrierefreiheit

Die Baumansicht für Barrierefreiheit ist eine browsernative API, die das DOM auf das Wesentliche reduziert: Rollen, Namen und Zustände interaktiver Elemente. Es ist die semantische Zusammenfassung der Seite, die von unterstützenden Technologien verwendet wird. Für einen KI-Agenten fungiert sie als hochgenaue Karte, die das visuelle „Rauschen“ von CSS ignoriert, um sich auf den reinen Nutzen zu konzentrieren. Durch die Interpretation dieser Baumansicht kann ein Agent die funktionale Absicht jedes Schalters, Schiebereglers und Eingabefelds ermitteln.

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 funktionale Schaltfläche konfiguriert haben. Mit Screenshots kann ein Agent möglicherweise erkennen, wo sich die Schaltfläche auf dem Bildschirm befindet, aber er weiß immer noch nicht, wohin sie führen soll oder welche Aktion sie auslösen soll.

Moderne Agenten kombinieren daher mehrere Modalitäten. Sie verwenden das DOM und die Baumansicht für Barrierefreiheit, um eine übersichtliche, strukturierte Liste interaktiver Elemente zu erhalten, und vergleichen diese dann mit einem visuellen Rendering, um Layout, Gruppierung und visuelle Hinweise zu verstehen.

Unsere Aufgabe ist es, saubere Signale über alle diese Kanäle hinweg bereitzustellen.

Agentenfreundliche Websites erstellen

Damit Agenten sich auf Ihrer Website zurechtfinden, sollten Sie Folgendes beachten:

• Alle notwendigen Aktionen, die von einem Menschen oder Agenten ausgeführt werden, sollten in der Benutzeroberfläche deutlich sichtbar sein.
• Sorgen Sie für ein stabiles Layout. Agenten, die Screenshots erstellen, sind wahrscheinlich verwirrt, wenn sich das Layout Ihrer Website ständig ändert. Das ist beispielsweise der Fall, wenn sich die Schaltfläche In den Warenkorb auf der Produktseite für jede Produktkategorie an einer anderen Stelle befindet.
• Vermeiden Sie „Geisterelemente“ oder transparente Overlays, die interaktive Elemente verdecken könnten. Bei der visuellen Analyse durch den Agenten werden möglicherweise verdeckte Knoten verworfen, auch wenn der Knoten transparent erscheint.
• Gestalten Sie umsetzbare Elemente mit semantischem HTML. Verwenden Sie die Tags <button> und <a> anstelle von geänderten <div> und <span> Elementen. Agenten erkennen diese als interaktiv.
  • Wenn Sie kein semantisches HTML verwenden können, geben Sie dem Element immer die entsprechende role und tabindex an. Beispiel: <div role="button">.
• Legen Sie in CSS cursor: pointer fest. Dies ist ein starkes Signal für die Umsetzbarkeit.
• Fügen Sie den <label>-Tags das Attribut for hinzu, um sie mit Eingaben zu verknüpfen. So kann der KI-Agent den Zweck eines Felds verstehen, indem er den Labeltext angibt, der direkt an den Aktionsstring angehängt ist.
• Achten Sie darauf, dass alle interaktiven Elemente, die für die Fortsetzung der Nutzerreise erforderlich sind, einen sichtbaren Bereich von mehr als 8 Quadratpixeln haben, damit sie bei der visuellen Analyse nicht herausgefiltert werden.

Nächste Schritte

Alles, was wir vorschlagen, um eine Website für Agenten vorzubereiten, macht sie auch für Menschen besser.

Wenn Sie Websites für KI-Agenten optimieren, ist das ein Anreiz, sich erneut zu den grundlegenden Prinzipien der Erstellung gut strukturierter, barrierefreier und semantischer Websites zu bekennen.

• Lesen Sie mehr über WebMCP, einen vorgeschlagenen Webstandard, mit dem Websites mit Agenten interagieren können, und melden Sie sich für das Programm für die frühe Vorschau an, um mit dem Experimentieren zu beginnen.
• Überprüfen Sie Ihre Baumansicht für Barrierefreiheit: Verwenden Sie vorhandene Tools, um sicherzustellen, dass die Hierarchie Ihrer Website maschinenlesbar und stabil ist.