Je website klaarmaken voor AI-agents

Agents zijn AI-assistenten die niet alleen antwoorden, maar ook iets doen: een pagina openen, een formulier invullen, op verzenden drukken. Voor jouw site betekent dat een nieuw soort bezoeker. Hieronder wat zo’n agent op je pagina nodig heeft, hoe je dat test, en wat WebMCP daar later aan toevoegt.

Herken je dit?

Een agent ziet je pagina anders dan een mens

Een agent werkt met twee bronnen. De eerste is een schermafbeelding, waarop hij zoekt waar hij moet klikken. De tweede is de structuur onder de pagina, dezelfde die een schermlezer voorleest: welke elementen er zijn, wat hun rol is en hoe ze heten. Een button met de tekst “Offerte aanvragen” is daarin ondubbelzinnig. Een div met een klik-actie is een gok.

Een verspringende layout is voor een agent erger dan voor een mens. Hij maakt een schermafbeelding, beslist waar hij klikt, en klikt. Schuift er in die tussentijd een banner in beeld, dan landt de klik ergens anders.

Zo maak je je site bruikbaar voor agents

1. Gebruik echte elementen

Een knop is een button, een link is een a met een href, een keuzelijst is een select. Die elementen hebben hun rol, hun toetsenbordbediening en hun naam ingebouwd.

<div class="btn" onclick="verstuur()">Versturen</div>

<button type="submit">Offerte aanvragen</button>

2. Geef elk veld een label en het juiste type

Een label vertelt wat er in een veld hoort. Het type en autocomplete vertellen welk soort gegeven het is, zodat een agent of de browser het juiste invult.

<form action="/offerte" method="post">
  <label for="naam">Naam</label>
  <input id="naam" name="naam" autocomplete="name" required>

  <label for="email">E-mailadres</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="telefoon">Telefoonnummer</label>
  <input id="telefoon" name="telefoon" type="tel" autocomplete="tel">

  <label for="datum">Gewenste startdatum</label>
  <input id="datum" name="datum" type="date">

  <label for="vraag">Waar gaat het om?</label>
  <textarea id="vraag" name="vraag" required></textarea>

  <button type="submit">Offerte aanvragen</button>
</form>

3. Zeg in tekst wat er gebeurde

Een groen vinkje of een rode rand zegt een agent niets. Zet de uitkomst in tekst, in een element dat schermlezers en agents opmerken als het verandert, en koppel een foutmelding aan het veld waar hij over gaat.

<input id="email" name="email" type="email"
       aria-invalid="true" aria-describedby="email-fout">
<p id="email-fout">Dit e-mailadres mist een domein, bijvoorbeeld .nl.</p>

<p role="status">Je aanvraag is verstuurd. Je hoort binnen één werkdag van ons.</p>

4. Houd de layout stil

Geef afbeeldingen een width en height, zodat de ruimte vastligt voordat ze laden. Laat een cookiebanner of chatknop nooit over knoppen of velden vallen, ook niet op een smal scherm. En laad niets boven de inhoud in nadat de pagina er al staat. PageSpeed Insights meet het als Cumulative Layout Shift; onder de 0,1 geldt als goed.

5. Test met het toetsenbord en met Lighthouse

De snelste test kost niets. Vul je formulier in met alleen Tab, Enter en de spatiebalk. Lukt dat zonder muis, dan heeft een agent een goede kans.

Lighthouse, de meetmodule in Chrome, heeft sinds versie 13.3 (mei 2026) een categorie Agentic Browsing naast toegankelijkheid en SEO. Draai beide categorieën op je belangrijkste pagina’s, het offerteformulier voorop, en begin bij de punten die in allebei terugkomen.

6. WebMCP: volgen, nog niet bouwen

WebMCP laat een pagina zelf vertellen welke acties er zijn. In plaats van te zoeken waar de knop zit, ziet een agent dan een actie “offerte aanvragen” met de velden die erbij horen, en roept die rechtstreeks aan. Het voorstel kent twee vormen: extra kenmerken op een gewoon HTML-formulier, en acties die je met JavaScript registreert voor wat ingewikkelder is.

Het is een voorstel, de proef in Chrome loopt nog, en de details kunnen veranderen. Voor de meeste sites is het advies daarom: volg het, en bouw eerst de stappen hierboven. Een formulier dat al goed gelabeld is, is later ook het makkelijkst om te zetten.

Waar het vaak misgaat

Wanneer je hulp nodig hebt

Bijna alles hierboven is toegankelijkheid. Wil je je site daar volledig op laten nalopen, dan staat dat bij website toegankelijk maken. Is je site met een AI-tool gebouwd, dan zitten de knoppen zonder rol en de velden zonder label er vaak in; AI-website niet gevonden in Google gaat over de techniek die daar ook onder ligt.

Voor een webshop speelt nog meer: je webshop vindbaar in AI-shopping gaat over productdata en de protocollen waarmee agents afrekenen. De techniek, de snelheid en de meting van je site lopen we na binnen SEO en performance. Alles over gevonden worden door AI staat bij vindbaarheid.