How To Optimize Websites for AI Agents (According to Google)

Google quietly released a page on their WebDev resources called "Build agent-friendly websites." It has not been widely covered yet, but it is one of the clearer signals of where search is heading.

The framing in the intro sets the tone. Google describes a "new type of visitor" and talks about users "delegating goal-oriented journeys to AI agents." That is not SEO language. That is product language. And it changes what optimising a website actually means.

‍

What AI agents actually do on your website

Before getting into the recommendations, it helps to understand how agents navigate. They are not reading your page the way a crawler does. They are operating more like a user would, except they are combining multiple signals at once.

Agents take screenshots of your site and use visual cues to decide where to go next. They read the accessibility tree, which is the structured map of your site's key functions typically used for assistive technology. And they combine both signals together, visual layout and semantic HTML, to understand what is interactive and what is not.

That combination matters because it means two things have to be true at once. The page has to look right and be coded right.

‍

What Google is actually recommending

Stable layouts

Because agents rely on screenshots, anything that shifts after load creates problems. A button that moves position between pages, a modal that fires late, a layout that reflows on interaction. All of that can break an agent's navigation map. Google specifically calls out stable layouts as a priority for agent compatibility.

Semantic and actionable HTML

This one is direct. Google recommends using proper <button> and <a> tags instead of generic <div> and <span> elements for interactive components. The reasoning is simple: agents need to understand what the HTML is doing, not just what it looks like. A div styled as a button reads as a button visually but gives an agent no semantic signal about its function.

Cursor: pointer in CSS

This was a specific callout. Google flags cursor: pointer as a strong signal for actionability. It is a small detail that most developers add automatically, but its inclusion here suggests agents are using CSS-level cues alongside visual and structural signals.

Accessibility tree quality

The accessibility tree, the underlying structure that screen readers and assistive technology use to interpret a page, is now also how agents map their journey through a site. If your accessibility implementation is weak, your site is harder for agents to navigate. These two things used to be separate concerns. They are not anymore.

Visual clarity of interactive elements

Google gives an example worth noting. A large "DELETE" button will be treated with more caution by an agent than a small help button. Agents are interpreting visual weight and context, not just function. How prominent something looks influences how an agent interacts with it.

‍

Why this Is worth paying attention to now

Google's CEO has described the future of Google as an "agent manager." They released WebMCP. They have been adding action features to AI Mode steadily. And this guide came out just before Google I/O.

None of that is coincidence. The direction is consistent. Search is moving toward agents completing tasks on behalf of users, not just surfacing links for users to act on themselves.

The sites that will perform well in that environment are the ones that are navigable, semantically clear, visually stable, and accessible. Not because those things help rankings in the traditional sense, but because agents need those properties to actually do anything on your site.

Most of these recommendations overlap with accessibility best practices and clean frontend development. The difference is the reason for doing them has changed. It used to be about being crawlable. Now it is about being usable by something that is acting on a user's behalf.

That is a meaningful shift in what "optimising a website" actually means.