How to fix JavaScript-rendered content so AI crawlers can read it

Vercel and MERJ analysed hundreds of millions of AI crawler requests and found no evidence that any of them executed JavaScript. Follow-up tests through 2026 report the same behaviour: GPTBot and ClaudeBot download script files but never run them. Google renders JavaScript; the AI crawlers fetch HTML and leave.

That is why a site can look perfect in Search Console and be invisible in ChatGPT and Perplexity. The classic case we see in audits is a pricing page built with a JavaScript widget: ChatGPT cannot read the price, so it cites a review site or a competitor that states one in plain text. This guide finds the gap and closes it, platform by platform.

Step 1: Find out which pages are affected

Pick your ten most important pages: home, about, contact, each service or product category, pricing, FAQ. For each, run:

curl -s -A "Mozilla/5.0 (compatible; PerplexityBot/1.0; +https://perplexity.ai/perplexitybot)" https://yourdomain.com/pricing > raw.html

Open raw.html and search for the facts that should be there. Or in the browser: View Page Source (not Inspect) and search. Or disable JavaScript in DevTools and reload. If the fact is missing from the raw response, that page is affected. Note exactly which sections are missing; it is usually a widget or a data-driven block, not the whole page.

Step 2: Prioritise by what AI engines ask about

Fix in this order: pricing and packages, service and product descriptions, contact details and opening hours, reviews and testimonials, FAQs, team and About content, then everything else. These are the facts that decide whether an engine can recommend you.

Step 3: Apply the fix for your platform

Next.js (App Router): move data fetching for key content into server components or generateStaticParams with static or ISR rendering. Avoid useEffect fetches for anything a crawler needs. Check next build output: pages marked as static or SSR are fine; client-only content inside them is not.

React, Vue or Angular single-page apps: adopt server-side rendering (Next.js, Nuxt, Angular Universal) or pre-render key routes to static HTML at build time. If a full migration is not possible now, pre-render the ten pages from Step 1 and serve those HTML files; the rest can follow.

WordPress: the theme and most page builders render server-side, so the risk is in plugins: AJAX-loaded pricing tables, review carousels that fetch from an API, tabbed content built by scripts, and "load more" post grids. Replace with plugins that output HTML, or paste the key content as ordinary blocks and keep the widget for decoration only.

Shopify: Liquid templates render server-side. The gaps are apps that inject prices, stock, reviews or size guides via script. Check product pages in View Source; if the price appears only inside a script or not at all, switch the app or add the price to the template directly.

Webflow, Squarespace, Wix: core content renders server-side. Embedded widgets, third-party forms with pricing, and any custom code embeds fetching remote data do not. Move the facts into native text elements.

Headless commerce and custom stacks: server-render or pre-render the pages from Step 1. Where a framework offers both, choose static generation for content that changes rarely (services, about) and SSR for content that changes often (stock, prices).

Any platform, quick fix: if a widget cannot be replaced, add a plain-HTML summary of its contents above or below it. A sentence like "Plans start at £49 per month; see the table below" is enough for the engine even if the table itself is scripted.

Step 4: Keep tabs and accordions in the HTML

Hiding content with CSS or with a native details element is fine; the text is in the response. Building the content on click is not. If in doubt, check with View Source.

Step 5: Mind the rest of the response

Crawlers can read non-HTML content that arrives in the initial response, such as JSON embedded in the page or React Server Component payloads, but do not rely on that. Also check that the important text is not inside an iframe from another domain (the crawler sees the iframe tag, not its contents) or inside an image (menus and price lists as JPEGs are a recurring problem).

Step 6: Verify and then watch the engines

Re-run the curl test on each fixed page. Then ask ChatGPT (with search on), Perplexity and Claude to read the URL and state the price, the services and the contact details. Within a couple of weeks, check whether citations for those pages have moved from third parties to you. Our guide on measuring AI visibility explains how to track that.

Common mistakes

• Checking the homepage and concluding the site is fine. Pricing and product pages are where widgets live.
• Trusting Search Console. Google renders; the others do not.
• Testing with Inspect instead of View Source.
• Adding an llms.txt file instead of fixing the rendering. The file tells a crawler which pages exist; it does not put content into an empty page.