JavaScript SEO: How Google Renders JavaScript Websites

When businesses move to React, Vue or Angular apps, organic traffic sometimes drops sharply. The content looks the same to users, but search engines receive an almost empty HTML shell and a large JavaScript bundle. This guide explains how Google handles JavaScript and how to build apps that rank — something I deal with regularly when building SaaS products and marketing sites side by side.

How Google processes JavaScript#

1. Crawl: Googlebot fetches the URL and reads the raw HTML response. Links in that HTML are discovered immediately.
2. Render queue: pages that need JavaScript wait for Google’s Web Rendering Service (an evergreen Chromium) to execute them. This is usually quick but can take longer.
3. Render: scripts run, API calls are made, the DOM is built.
4. Index: Google indexes the rendered HTML and discovers any new links.

Things that can go wrong: scripts blocked by robots.txt, API calls that time out, content that appears only after scrolling or clicking, and errors in older-syntax fallbacks. Other search engines and many AI crawlers do little or no rendering.

Rendering strategies compared#

The JavaScript SEO checklist#

• Links: use <a href="/pricing/">. Router link components usually render this correctly; avoid onClick navigation on divs and buttons.
• URLs: each view that should rank gets its own path-based URL (History API), not #/pricing.
• Metadata: title, description, canonical, robots and Open Graph tags must be in the server HTML for each URL.
• Structured data: render JSON-LD on the server where possible.
• Status codes: a “not found” view must return a real 404 (or add noindex) — otherwise you create soft 404s.
• Content on load: don’t require clicks, scrolls or logins to load main content; lazy-load below-the-fold content with IntersectionObserver, not scroll events.
• Resources: don’t block .js, .css or API endpoints needed for rendering in robots.txt.
• Performance: code-split bundles and keep hydration light; huge bundles hurt INP and LCP.
• Images: real <img> elements with src/srcset and alt text.

How to test#

1. View source vs Inspect: if the main content only appears in Inspect, it depends on rendering.
2. Search Console URL Inspection → Test live URL → View tested page: check the rendered HTML, screenshot and any resource errors.
3. Rich Results Test also shows rendered HTML for quick checks without Search Console access.
4. Search Google for a unique sentence from a JS-loaded section in quotes to confirm it’s indexed.
5. Crawl with JavaScript rendering enabled (Screaming Frog, Sitebulb) and compare with a non-rendered crawl.

Common problems I see#

• Every page has the same title and canonical because they’re set once in the app shell.
• Infinite scroll product lists with no paginated URLs.
• Content fetched from an API that rate-limits or blocks Googlebot.
• Cookie consent walls that hide content until accepted.
• Migrating from WordPress to a SPA without redirects or server rendering.