Website für KI-Browser optimieren

Worum geht es in diesem Ratgeber?

Dieser Ratgeber ist die praktische Anleitung. Du gehst deine Seite Bereich für Bereich durch und behebst, woran KI-Browser hängen bleiben. Was Agentic Engine Optimization grundsätzlich bedeutet und wie Agenten als neue Besucher einzuordnen sind, steht im Ratgeber Agentic Engine Optimization. Welche KI-Browser es gibt und wie sie gebaut sind, zeigt der KI-Browser-Vergleich.

Der Agent klickt wie ein Mensch und ist schnell überfordert

Perplexity Comet, Claude in Chrome, Gemini in Chrome und der Browser in ChatGPT betrachten die gerenderte Seite und klicken sich durch, wie es ein Mensch täte. Das ist flexibel, aber fehleranfällig. Ein missverständlicher Button, ein Formularfeld ohne Beschriftung oder ein Layout, das beim Laden springt, und die Aufgabe bricht ab. Du kannst in der KI-Antwort ganz oben stehen und den Verkauf trotzdem verlieren, weil der Agent im Checkout hängen bleibt.

Die gute Nachricht ist, dass sich die Fehlerquellen wiederholen. Die meisten Korrekturen sind kleine, gezielte Eingriffe, für die du keinen Relaunch brauchst.

Wie liest ein KI-Browser deine Seite?

„Wie ein Mensch“ stimmt nur im Ergebnis. Der Agent sieht deine Seite nicht, er liest sie in drei Schritten.

1. Seite lesen. Er holt den Accessibility Tree, also die Struktur aus Rollen, Namen und Zuständen jedes bedienbaren Elements, und macht bei Bedarf einen Screenshot.
2. Element zuordnen. Er entscheidet, welches Element zur Aufgabe passt, etwa „Das Feld heißt E-Mail, da gehört die Adresse hinein“.
3. Aktion auslösen. Er klickt gezielt oder tippt in genau dieses Element.

Anthropic beschreibt das für Claude genau so. Claude liest Seiten über ihre Struktur, also Accessibility Tree, Elemente, Formulare und Tabs, und über Screenshots mit Koordinaten. Die Doku rät, zuerst den Tree zu lesen und erst dann einen Screenshot zu machen. Auf Screenshots und Klicks nach Koordinaten weicht Claude bei Oberflächen aus Canvas, bei stark virtualisierten Listen und bei Elementen in fremden iframes aus. Perplexity schreibt, dass der Assistent in Comet bei jeder Anfrage den sichtbaren Text, die Überschriften und die Metadaten der offenen Seite übernimmt. OpenAI nennt für den Cloud-Browser in ChatGPT Screenshots und den gerenderten Zustand der Seite. Für Gemini in Chrome dokumentiert Google nur, dass auto browse klickt, scrollt und Formulare ausfüllt.

Was strukturell sauber ausgezeichnet ist, findet ein Agent zuverlässig. Ein Element, das nur aussieht wie ein Button, bleibt ein Ratespiel über den Screenshot, langsamer und fehleranfälliger. Dort entstehen die meisten Stolperfallen.

Wo halten die Agenten selbst an?

Manche Abbrüche sind gewollt. Die Hersteller lassen ihre Agenten an sensiblen Stellen bewusst anhalten und den Menschen entscheiden. Plane diese Übergaben in deine Abläufe ein.

Stand der Tabelle ist der 03.11.2026. OpenAI hat den KI-Browser ChatGPT Atlas am 09.08.2026 eingestellt. Seitdem stecken die Browser-Funktionen im Cloud-Browser von ChatGPT Work, im eingebauten Browser der Desktop-App und in der Chrome-Erweiterung. Google hat Project Mariner im Mai 2026 eingestellt, die Technik steckt jetzt in Gemini. Für dich als Website-Betreiber zählt deshalb, dass alle Agenten deine Seite bedienen können.

Die häufigsten Fehler im Überblick

Google hat im April 2026 auf web.dev Empfehlungen für agentenfreundliche Websites veröffentlicht. Zusammen mit den Mustern, an denen Agenten in der Praxis scheitern, ergibt sich diese Liste. Die rechte Spalte sagt dir, wie du jeden Punkt auf deiner Seite findest.

Google nennt zwei weitere Punkte. Klickbare Elemente sollen per cursor: pointer als klickbar erkennbar sein. Bedienbare Elemente müssen sichtbar und größer als 8 Quadratpixel sein, sonst filtert der Agent sie bei der Auswertung des Bildes heraus.

Den Accessibility Tree aufräumen

Öffne die Chrome DevTools, wähle unter Elements den Reiter Accessibility und klick dich durch deine wichtigsten Elemente. Jedes bedienbare Element braucht eine Rolle (button, link, textbox, checkbox) und einen Namen. Fehlt eines davon, sieht der Agent an dieser Stelle nur ein Bild. Die Lighthouse-Kategorie „Agentic Browsing“ prüft das im Audit „agent-accessibility-tree“.

So sieht der Unterschied im Code aus.

Formulare, die ein Agent ausfüllen kann

Formulare sind der Ort, an dem Aufgaben am häufigsten abbrechen, weil hier jedes Feld richtig erkannt werden muss. Diese Regeln stammen aus den Formular-Empfehlungen auf web.dev und aus den Techniken der WCAG 2.2.

• Ein Label je Feld, verknüpft per for und id. Ein Platzhaltertext verschwindet beim Tippen und ersetzt das Label deshalb nicht.
• autocomplete-Werte setzen, etwa email, name, street-address, postal-code, username, current-password, cc-number. Damit weiß der Browser, was in welches Feld gehört.
• Passende Feldtypen. type="email" und type="tel" für Kontaktdaten, für Kartennummern und Postleitzahlen type="text" mit inputmode="numeric" statt type="number".
• Ein Namensfeld statt getrennter Felder, wo es fachlich geht, und keine Auswahllisten für Datumsangaben.
• Fehler als Text am Feld. Markiere das Feld mit aria-invalid="true" und verknüpfe die Meldung per aria-describedby. Eine rote Umrandung allein erkennt kein Agent.
• Eigene Widgets nach Muster bauen. Für Auswahl wie Größe oder Farbe gibt es die Muster Combobox und Listbox in den WAI-ARIA Authoring Practices. Ein natives <select> ist meist die robusteste Lösung.

Cookie-Banner, Pop-ups und Chat-Widgets

Overlays sind für Agenten doppelt schwierig. Sie verdecken die Elemente darunter, und der Agent muss erst verstehen, wie er sie schließt. In der Studie BrowserArena von 2025 gehörte das Entfernen von Pop-up-Bannern neben CAPTCHAs zu den drei typischen Fehlern der getesteten Agenten. Eine Studie zu gezielt platzierten Pop-ups (ACL 2025) fand, dass Agenten im Schnitt in 86 % der Fälle auf solche Pop-ups klicken und die Erfolgsquote ihrer Aufgaben dabei um 47 % sinkt. Dort ging es um gezielte Angriffe. Für Cookie-Banner fehlt bisher eine vergleichbare Messung.

1. Bau den Cookie-Banner als Dialog mit Rolle dialog, einer Überschrift als Namen und echten Buttons mit klarem Text wie „Alle akzeptieren“ und „Ablehnen“. Das Muster „Dialog (Modal)“ der WAI-ARIA Authoring Practices zeigt, wie Fokus und Schließen funktionieren.
2. Lege keine unsichtbaren oder halbtransparenten Ebenen über den Inhalt, die nach dem Schließen stehen bleiben.
3. Halte Checkout, Warenkorb und Formulare frei von Newsletter-Pop-ups und Chat-Widgets, die sich über Buttons legen.
4. Prüfe die Seite einmal mit offenem und einmal mit geschlossenem Banner. Beide Zustände müssen bedienbar sein.

Die Einwilligung selbst darf der Agent nicht für den Nutzer erfinden. Ein klar beschrifteter Banner hilft ihm, die Frage korrekt an den Menschen weiterzugeben oder nach dessen Vorgabe zu beantworten.

Bot-Schutz auf Agenten abstimmen

Viele KI-Browser laufen im Browser des Nutzers und sehen für deinen Server aus wie ein normaler Chrome. Andere laufen in der Cloud des Anbieters, auf IPs aus Rechenzentren, und landen damit schnell in einer pauschalen Sperre. Für diese Cloud-Agenten gibt es inzwischen eine Kennung.

• Der Cloud-Browser von ChatGPT signiert seine Anfragen nach Web Bot Auth, also mit HTTP Message Signatures nach RFC 9421. Er sendet die Header Signature, Signature-Input und Signature-Agent mit dem Wert "https://chatgpt.com". OpenAI beschreibt in der Hilfe, wie du ihn bei Cloudflare, Akamai, HUMAN und Vercel zulässt, und schreibt, dass die Website entscheidet, ob sie diesen Traffic zulässt.
• Cloudflare führt solche signierten Agenten seit dem 01.07.2026 als Teil der Verified Bots und unterscheidet direkten Zugriff und Zugriff über einen Vermittler.
• Für Claude in Chrome, Comet und Gemini im lokalen Browser dokumentieren die Hersteller keine eigene Kennung. Sie kommen mit der IP und dem Browser des Nutzers.

Setz CAPTCHAs deshalb gezielt ein, etwa beim Login nach mehreren Fehlversuchen. Claude in Chrome löst laut Anthropic keine CAPTCHAs, ChatGPT übergibt dann an den Nutzer. Ein CAPTCHA an der falschen Stelle beendet die Aufgabe. Wie du Bot-Schutz so einstellst, dass er Angreifer bremst und erwünschte Bots und Kunden durchlässt, steht im Ratgeber Bot-Schutz und SEO.

Layout, Navigation und Rendering

• Stabil laden. Gib Bildern und Werbeplätzen feste Maße, damit nichts springt. Den CLS-Wert misst du über die Core Web Vitals.
• Gleiche Elemente an gleicher Stelle. Der Warenkorb-Button sollte auf allen Produktseiten an derselben Position sitzen.
• Menüs per Klick und Fokus. Ein Menü, das sich nur beim Hovern öffnet, braucht zusätzlich einen Button mit aria-expanded.
• Klares Ende. Biete bei langen Listen Seiten mit eigenen URLs oder einen Button „Mehr laden“ an.
• Inhalte im HTML. Produktname, Preis und Verfügbarkeit gehören in das ausgelieferte HTML. Wo Quelltext und gerendertes HTML auseinanderliegen, zeigt die JavaScript-Crawling-Studie.

WebMCP als nächster Schritt

Stolpersteine zu entfernen heißt, dem Agenten nicht im Weg zu stehen. WebMCP geht einen Schritt weiter. Deine Seite beschreibt dabei ihre wichtigsten Aktionen wie Suche oder Warenkorb direkt als Werkzeug. Der Agent muss dann nicht raten, was ein Button tut.

WebMCP ist ein Entwurf einer W3C Community Group und kein Standard. Chrome bietet es ab Version 149 als Origin Trial an, Edge ebenfalls als Origin Trial. Die Schnittstelle heißt inzwischen document.modelContext. Für Formulare gibt es eine deklarative Variante mit den Attributen toolname und tooldescription am <form>. Standardmäßig muss der Nutzer dabei selbst auf Absenden klicken. Als erster großer Agent nutzt der eingebaute Browser der ChatGPT-Desktop-App seit dem 31.08.2026 solche Werkzeuge, die Chrome-Erweiterung von ChatGPT nicht.

Aufbau, imperative Variante und wie du Agenten-Aufrufe misst, erklärt der Ratgeber WebMCP.

Wie viel macht das aus?

Die Studie A11y-CUA von Forschenden der UC Berkeley und der University of Michigan, vorgestellt auf der CHI 2026, hat einen aktuellen Computer-Use-Agenten 60 Alltagsaufgaben erledigen lassen und dabei die Art der Bedienung verändert. In der Standard-Bedienung, die auf Sicht und Maus setzt, schaffte er 78,3 % der Aufgaben. Nur mit der Tastatur, also über denselben Weg wie Screenreader und Accessibility Tree, waren es 41,67 %, mit Bildschirmlupe 28,3 %.

Die Erfolgsquote halbiert sich fast, sobald der Agent sich auf die Struktur verlassen muss. Wer die Struktur sauber auszeichnet, nimmt ihm das Raten über den Screenshot ab, und das entscheidet oft, ob die Aufgabe klappt.

Testen statt raten

1. Mit echten Agenten durchspielen. Der Agent in Perplexity Comet ist kostenlos. Lass ihn deine wichtigsten Wege gehen, also Suche, Warenkorb, Buchung und Anfrage. Teste mehrere Agenten, etwa auch Claude in Chrome und ChatGPT, denn sie verhalten sich unterschiedlich.
2. Einen festen Testfall einrichten. Bau die wichtigsten Aufgaben in einen wiederholbaren, automatisierten Test ein. So merkst du, wenn ein Release oder ein neues Feature einen Weg für Agenten bricht.
3. Lighthouse „Agentic Browsing“ nutzen. Die Kategorie gibt es ab Chrome 150. Sie prüft den Accessibility Tree für Agenten, WebMCP, die Layout-Stabilität, die llms.txt und seit Lighthouse 13.5 eine Datei für Agent Resource Discovery. Sie ist experimentell und zeigt statt 0 bis 100 Punkten den Anteil bestandener Prüfungen.
4. Den Accessibility Tree ansehen. In den Chrome DevTools unter Elements → Accessibility siehst du die Struktur, auf die der Agent trifft, und erkennst, wo Namen oder Rollen fehlen.

Häufige Fehler

• Das Team optimiert nur für einen KI-Browser, der kurz darauf eingestellt oder umgebaut wird.
• Der Cookie-Banner liegt als Overlay über dem Checkout.
• Variantenauswahl wie Größe oder Farbe ist ein eigenes Widget ohne Rollen.
• Fehlermeldungen in Formularen stehen nur als Farbe am Feld.
• Die Firewall sperrt Rechenzentrums-IPs pauschal und trifft damit auch Cloud-Agenten echter Kunden.
• Nach einem Relaunch fehlen Labels, die vorher da waren, und niemand prüft es.

Derselbe Aufwand zahlt sich mehrfach aus

Fast alle diese Verbesserungen, also semantisches HTML, klare Beschriftungen, Inhalte im HTML und ein niedriger CLS-Wert, machen deine Seite auch für Screenreader und Suchmaschinen besser. Den CLS-Wert verfolgst du ohnehin in PageSpeed Insights und der Search Console. Du stärkst damit Grundlagen, die sich über mehrere Kanäle auszahlen.

Häufige Fragen