The Empty <div id="app"> Problem
Client-rendered sites often ship a shell that agents read as an empty page. Here is how to detect it and how to fix it for real.
The single most common critical finding in our audits is not a missing alt tag. It is a page that returns the DOM equivalent of a blank screen: <div id="app"></div> surrounded by script tags. A human waits half a second for hydration and sees a beautiful site. An agent waits the same half second and reads — nothing.
What the agent sees
The serialized snapshot an LLM browser builds is roughly what you get with JavaScript disabled and a short wait. Here is the difference in practice:
Click “Run micro-audit” on each tab. The left shell scores near zero; the right one passes the same checks.
<!doctype html>
<html>
<head>
<title>Loading…</title>
<script src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>How to detect it
- View the page with scripts disabled — if the body is empty, that is your shell.
- Open the rendered snapshot in a headless browser and check the text content.
- Run an AGEN scan: the “Read content without JavaScript” capability fails with “page is empty when scripts are disabled”.
The fix, in order
- 1Server-render the meaningful shell: real headings, links, and the primary form in the initial HTML.
- 2If SSR is not possible, prerender the marketing-critical pages at build time.
- 3Ship a <noscript> fallback that at least names the product and its main links, so even a script-disabled parse finds content.
<noscript>
<main>
<h1>Northstar</h1>
<p>Agent-first analytics. <a href="/signup">Start free</a>.</p>
</main>
</noscript>See what agents read on your own site.
Run a free scan of any page and get a 0–100 readiness score with copy-pasteable fixes.