JavaScript SEO

Many modern sites build their pages with JavaScript frameworks such as React, Vue or Next.js. Google can process JavaScript, but it adds a step that can delay or break indexing.

How Google processes JavaScript

Content that exists in the initial HTML is available immediately. Content that only appears after JavaScript runs depends on rendering succeeding: scripts must load, must not be blocked by robots.txt, must not time out and must not error.

Rendering approaches

Approach	Initial HTML contains	SEO risk
Static generation (SSG)	Full content	Low
Server-side rendering (SSR)	Full content	Low
Client-side rendering (CSR)	An empty shell	Higher: everything depends on rendering
Dynamic rendering (pre-rendered HTML for bots only)	Full content for bots	Google calls it a workaround and not recommended

Other crawlers are less capable than Googlebot. Social preview bots generally read only the initial HTML, and industry tests report that several AI crawlers do not run JavaScript either. That is another reason to put important content in the initial HTML. The AI search module covers what is known, and what is only reported, about AI crawlers.

Common JavaScript SEO problems

• Links that are not links: navigation built from divs or buttons with click handlers. Use <a href>.
• Fragment URLs (/#/products): Google generally does not support fragments for different content. Use the History API.
• Soft 404s: client-side apps that show "not found" with status 200. Redirect to a URL that returns 404, or add noindex with JavaScript.
• noindex in the initial HTML that JavaScript removes later. Google may skip rendering for noindexed pages, so the noindex sticks.
• Content that loads only on interaction, such as scrolling, clicking "load more" or switching tabs. Googlebot does not click or scroll.
• Blocked resources: JavaScript or API endpoints disallowed in robots.txt.
• Metadata set only by JavaScript: titles, canonicals and structured data are safest in the server-rendered HTML.

How to test

1. View source shows the raw HTML. The SEO-L page inspector also shows only the raw HTML, because it does not run JavaScript.
2. URL Inspection, then Test live URL, then View tested page shows the HTML Google rendered, a screenshot, and JavaScript console messages.
3. Compare the two. Anything important that exists only in the rendered version depends on rendering.

Platform notes

• Next.js: Server Components and static generation put content in the initial HTML by default. Check components marked "use client" that fetch content in the browser. SEO-L itself is built this way: all pages are prerendered, and only your personal data loads in the browser.
• PrestaShop, WordPress and Shopify render on the server. Problems usually come from modules, apps or themes that load content such as reviews, filters or product tabs with JavaScript.