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 Abläufe 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 Animationen. 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. Ein großer Löschen -Button 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 ein Jetzt kaufen -Button in einem Produktcontainer befindet, geht der Agent davon aus, dass dieser Button 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 Hilfstechnologien 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 erfahren.

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. Mit Screenshots kann ein Agent möglicherweise erkennen, wo sich dieser Button auf dem Bildschirm befindet, aber er weiß immer noch nicht, wohin er führen soll oder welche Aktion er 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 einer visuellen Darstellung, 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 auf Ihrer Website navigieren können, sollten Sie Folgendes beachten:

• Alle erforderlichen Aktionen, die von einem Menschen oder Agenten ausgeführt werden, sollten in der Benutzeroberfläche deutlich angezeigt werden.
• 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 der Button In den Warenkorb auf der Produktseite für jede Produktkategorie an einer anderen Stelle befindet.
• Vermeiden Sie „Ghost“-Elemente 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 das Attribut for in <label>-Tags ein, um sie mit Eingaben zu verknüpfen. So kann der KI-Agent den Zweck eines Felds verstehen, indem er den Labeltext angibt, der direkt mit dem Aktionsstring verknüpft ist.
• Achten Sie darauf, dass alle interaktiven Elemente, die für die Fortsetzung der Nutzerreise erforderlich sind, eine sichtbare Fläche von mehr als 8 Quadratpixeln haben, damit sie nicht durch die visuelle Analyse herausgefiltert werden.

Nächste Schritte

Alles, was wir vorschlagen, um eine Website „agentenfreundlich“ zu machen, verbessert sie auch für Menschen.

Websites für KI-Agenten zu optimieren, ist ein Anreiz, sich erneut zu den grundlegenden Prinzipien des Erstellens gut strukturierter, barrierefreier und semantischer Websites zu bekennen.

• Baumansicht für Barrierefreiheit prüfen: Verwenden Sie vorhandene Tools, um sicherzustellen, dass die Hierarchie Ihrer Website maschinenlesbar und stabil ist.
• Informationen zu WebMCP, einem vorgeschlagenen Webstandard, mit dem Websites mit Agenten interagieren können. Die APIs können in der Produktion in Chrome mit einem Ursprungstest getestet werden.