How to debug rendering problems

A rendering problem means the page Google builds after running your JavaScript is missing content that people see. To find it, compare three things: the raw HTML your server sends, the rendered HTML in Search Console's URL Inspection tool (Test live URL), and the page in your browser. The gap between them tells you the cause.

Three views of the same page

If the browser has content that the rendered HTML does not, Google has a rendering problem. If the rendered HTML has content that the raw HTML does not, Google is fine but crawlers that do not run JavaScript miss it. More on that in how AI crawlers see your site.

Step 1: compare raw HTML with your browser

# Words in the raw HTML, no JavaScript
curl -s https://www.<your-domain>/pricing | sed -e "s/<[^>]*>/ /g" | wc -w

# Headings in the raw HTML
curl -s https://www.<your-domain>/pricing | grep -oE "<h[1-3][^>]*>[^<]*" | head

Then open the same URL in a browser and count what you see. A few dozen words in the raw HTML on a page full of text means the content depends on JavaScript. The free checker does this comparison for you.

See what ChatGPT sees on your site

Step 2: see what Google renders

URL Inspection tool

1. In Search Console, paste the URL into the inspection bar.
2. The first result is the indexed version: "the most recently indexed version", not the current page. View crawled page shows the HTTP response and the HTML Google stored.
3. Click Test live URL. "This is a live test: the tool fetches and examines the URL in real time."
4. Click View tested page. You get the rendered HTML, a screenshot ("available only in a live test"), page resources and JavaScript console messages.

Limits to know: there is "a per-property daily limit of live inspections". The live test does not check canonical selection, duplicates, sitemaps or manual actions, and a valid result does not guarantee indexing.

Rich Results Test

The Rich Results Test works without Search Console access. It fetches the page "as Google", as smartphone or desktop, and its code explorer "uses the rendered source code". Use it for pages on sites you cannot verify, or to test a code snippet. The page must be reachable for an anonymous user.

Step 3: find the cause

Client-side 404 and soft 404

A soft 404 is a page that "returns a user-friendly "not found" message but not a 404 HTTP response code". Google also flags pages whose content suggests "an empty page or an error message". JavaScript sites get these in two ways: the router shows a "not found" view but the server returned 200, or rendering failed and left the page empty.

Google gives two fixes for client-side routing:

// Option 1: redirect to a URL where the server returns 404
if (!product) {
  window.location.href = "/not-found"; // server responds 404 here
}

// Option 2: add noindex to the error view
const metaRobots = document.createElement("meta");
metaRobots.name = "robots";
metaRobots.content = "noindex";
document.head.appendChild(metaRobots);

With prerendering you have a third option: put the status in the page and let the prerenderer return it.

<meta name="prerender-status-code" content="404">

Check the status the server sends for a path that does not exist:

curl -s -o /dev/null -w "%{http_code}\n" https://www.<your-domain>/this-page-does-not-exist

It should print 404. Many single page apps print 200. Note also: if the shell has noindex and JavaScript removes it, that "may not work as expected", because Google may skip rendering when it sees noindex.

Step 4: retest

After fixing, run Test live URL again and check that the content is in the rendered HTML. If the page was not indexed, request indexing once. See how to get Google to index your site.

When Prebaked is the right choice

If the fix list keeps growing, the simpler route is to send crawlers finished HTML. Prerendering does that without rewriting the app.

• Prebaked renders the page in Chromium and serves the result to search engines and AI crawlers. People get your site as before.
• A rendered 404 page returns 404 to crawlers, and prerender-status-code is respected.
• The content is the same as for people. Nothing is added or changed for bots.
• If Prebaked is slow or down, crawlers get your original page.
• Install guides: integrations.

Prebaked does not fix broken scripts or content that loads only after a click. It renders what your page shows without interaction.

FAQ