Fixing JavaScript-Only Content for AI Agents

What "JavaScript-only" means

Every page starts as a response from your server: a block of HTML. A browser then runs any scripts on the page, and those scripts can add, change or remove content. Content is JavaScript-only when it is absent from that first HTML response and only appears once a script has run.

That can happen in a few different ways:

• The whole page is built in the browser. The server sends an almost empty shell, often just <div id="root"></div> and a script tag. This is typical of single-page apps without server rendering, covered in detail in the single-page app guide.
• The page is mostly there but key facts are fetched afterwards. The template prints the product name and photos, then a script asks an API for the current price and stock. This is very common on otherwise traditional sites and is the main subject of this guide.
• A third-party widget supplies the content. Reviews, booking calendars, menus, store finders and event listings are often loaded from another company's servers into a placeholder.
• The data is present but not as text. Some frameworks embed the page data as a large JSON object in a script tag and build the visible text from it in the browser. The facts are technically in the response, but not as readable page content.

Who sees what

Different visitors see different versions of the same page, which is why the problem hides so well.

The safe assumption is that anything essential to a customer's decision should be readable in the raw HTML. Scripts can then improve the experience for visitors who run them, without anyone losing the basic facts.

How to find the missing facts

The AI Agent Compatibility audit flags content hidden behind JavaScript. To pin down exactly what is missing on a given page, use three quick checks.

View source, not Inspect

Right-click the page and choose View Page Source, or press Ctrl+U (Cmd+Option+U on a Mac). This shows the HTML exactly as the server sent it. Use the browser's find box to search for the price, the date or a sentence from the main description. The Inspect or Elements panel is misleading here, because it shows the page after scripts have changed it.

Fetch it from the command line

curl -s -A "Mozilla/5.0" https://www.example.co.uk/courses/pottery-taster \
  | grep -o -i -E "£[0-9]+(\.[0-9]{2})?|in stock|sold out|[0-9]{1,2} (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*" \
  | sort -u

This prints any prices, stock words or dates found in the raw HTML. If the page shows "£45, 3 places left, Saturday 14 November" but the command prints nothing, those facts are JavaScript-only. Adapt the pattern to the facts that matter on your page.

Switch JavaScript off

In Chrome or Edge, open developer tools, press Ctrl+Shift+P (Cmd+Shift+P on a Mac), type "Disable JavaScript" and press Enter, then reload. Firefox has a similar setting in about:config. What remains is roughly what a fetcher sees. Pay attention to empty boxes, permanent spinners, "Loading..." text and buttons that do nothing.

The fix, step by step

Common culprits and what to do about each

Contact details that exist only as an image or behind a click-to-reveal button are a special case with their own guide: fixing unreachable contact details.

Before and after: a price that depends on a script

Here is a typical pattern. The template prints an empty element and a script fills it in.

<!-- Before: the server sends an empty price -->
<p class="price" id="price"><span class="spinner"></span></p>
<script>
  fetch('/api/price?sku=PT-TASTER')
    .then(r => r.json())
    .then(d => { document.getElementById('price').textContent = '£' + d.price; });
</script>

After the fix, the server writes the price and the script only updates it if something has changed since the page was built.

<!-- After: the server sends the price; the script refreshes it -->
<p class="price" id="price" data-sku="PT-TASTER">£45.00</p>
<p id="places">3 places left on Saturday 14 November</p>
<script>
  const el = document.getElementById('price');
  fetch('/api/price?sku=' + el.dataset.sku)
    .then(r => r.ok ? r.json() : null)
    .then(d => { if (d) el.textContent = '£' + d.price; })
    .catch(() => {});
</script>

If the request fails, the server value stays. If the page is cached for a few minutes, the script corrects any change. Every visitor, including a fetcher that never runs the script, gets a real price.

Choosing how to render

How you get facts into the first HTML depends on how the site is built.

• Traditional server templates (WordPress, Shopify Liquid, Django, Rails, Laravel, PHP): the template already runs on the server, so the fix is usually to print the value in the template instead of fetching it in the browser.
• Static site generators (Eleventy, Hugo, Astro and similar): facts that change rarely, such as descriptions and hours, can be written at build time. For facts that change often, such as stock, rebuild on change or print a sensible default and refresh it with a script.
• JavaScript frameworks (React, Vue, Svelte, Angular): use the server rendering or static generation built into Next.js, Nuxt, SvelteKit, Angular's server rendering or similar, so each route is sent as HTML. The single-page app guide covers this in depth.

Speed matters too. Even when an agent does run scripts, a page that takes many seconds to show its facts may be abandoned. If your pages render correctly but slowly, see fixing slow rendering for agents.

Edge cases

• Personalised prices. If logged-in trade customers see different prices, print the public price for anonymous visitors in the HTML and switch after sign-in.
• Location-based content. Store finders that need the visitor's location can still print a list of all locations, or the nearest ones by postcode, on a normal page.
• Cookie banners. A consent banner that covers the page is not the same as missing content, but a banner that blocks rendering until accepted has the same effect. Content should be in the HTML behind the banner.
• Structured data added by script. JSON-LD injected by a tag manager has the same problem as visible text. See fixing structured data for agents.
• Very large pages. Printing hundreds of products in one HTML response is slow. Paginate with real addresses instead of loading everything into one page.

Stopping it from coming back

JavaScript-only content tends to creep back with each new app, widget or redesign. A few habits keep it out:

1. Make "the key facts are in view-source" part of the definition of done for any new template or component.
2. Before installing a widget or app that shows prices, stock, reviews or dates, ask the supplier how the content appears to visitors who do not run JavaScript.
3. Keep a small list of important pages and the text each must contain, and fetch them automatically after every release.
4. Re-run the AI Agent Compatibility audit after theme updates and major plugin or app changes.