What AI sees when it reads your page

A browser downloads your HTML, runs your JavaScript, and builds the page you see. Most AI crawlers stop after the first step. If your content is drawn by JavaScript, they get the scaffolding: a title, maybe some navigation, and a <div id="root"> with nothing in it.

That's a problem for AI search in a way it mostly stopped being for Google. ChatGPT search, Claude and Perplexity can only quote what their crawlers could read. A product page that looks perfect in Chrome can be a blank page to them.

1. 1Readable text

   Every word in the server's HTML, with headings marked, the way a crawler that doesn't render receives it.

2. 2App shells

   Empty #root, #__next, #app, #__nuxt and app-root containers: the sign of a client-rendered page.

3. 3Framework markers

   Next.js, Nuxt, Remix, Angular, Vue SSR, Astro, WordPress, Webflow and others, and whether they rendered on the server.

4. 4The head

   Whether title, meta description, canonical and JSON-LD are in the HTML or added later by a script.

5. 5Links and headings

   Crawlers find your other pages through real <a href> links. JavaScript click handlers are dead ends.

6. 6Where the bytes go

   How much of the HTML is text versus scripts, data, styles and markup.

The fix is server-side rendering or static generation: build the HTML before it leaves your server. If you're on a framework that supports it, it's usually a per-page setting. If you're on a single-page app, prerender the pages that matter (home, product, pricing, docs, comparison pages) and leave the logged-in app as it is.

Check the details too. Schema added by a tag manager, a title set by a router, or a canonical injected by a plugin all disappear for a crawler that doesn't render. Once the content is in the HTML, make sure the crawlers are allowed in with the AI crawler checker, and check that your markup is valid with the structured data checker.