JavaScript SEO

JavaScript SEO is the part of Technical SEO that makes sure websites built with JavaScript can be crawled, rendered and indexed properly by search engines. It matters most for sites built with frameworks such as React, Next.js, Vue, Nuxt, Angular and Svelte, and for any site where JavaScript adds important content or links.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

Why JavaScript creates SEO challenges

When a page relies on JavaScript, the HTML the server sends may contain little more than an empty container. Search engines have to run the code (Rendering) to see the real content. Google can do this, but:

  • Rendering takes extra time and resources, so content can be indexed later.
  • Errors, timeouts or blocked files can leave content invisible.
  • Links built with click handlers instead of href attributes may not be followed.
  • Many other crawlers, including some AI crawlers, do not run JavaScript at all.

Rendering approaches compared

  • Client-side rendering (CSR): the browser builds everything. Highest SEO risk.
  • Server-side rendering (SSR): the server sends full HTML for each request. Best for SEO, slightly more server work.
  • Static site generation (SSG): pages are built as HTML in advance. Excellent for speed and SEO.
  • Incremental and hybrid rendering: frameworks such as Next.js and Nuxt mix SSR and SSG per page.

For pages that need to rank, choose SSR or SSG.

JavaScript SEO best practices

  1. Serve key content in the initial HTML: headings, body text, product details and internal links.
  2. Use real links: a href=”/page/” rather than onclick events or buttons for navigation.
  3. Give every view its own URL using the History API, not hash fragments (#), so pages can be indexed separately.
  4. Set titles, meta descriptions, canonicals and robots tags on the server, not after load.
  5. Do not block JavaScript or CSS in Robots.txt.
  6. Return correct status codes: a missing page in a single-page app should return a real 404, not a 200 with “not found” text.
  7. Avoid content that only loads on scroll or click, unless it is also available in the HTML.
  8. Keep bundles small to protect Page Speed and INP.
  9. Lazy-load carefully, using native loading=”lazy” for images rather than scripts that wait for scroll events.

How to test JavaScript SEO

  • Compare “view source” with the rendered DOM in the browser. Content only in the DOM depends on JavaScript.
  • Use the URL Inspection tool in Google Search Console to see Google’s rendered HTML and screenshot.
  • Crawl the site with JavaScript rendering on and off in an SEO crawler.
  • Disable JavaScript in your browser and see what remains.
  • Search Google for a sentence that only appears after JavaScript runs to check whether it is indexed.

Common JavaScript SEO problems

  • Product listings or blog lists loaded by API calls after the page renders.
  • Infinite scroll without paginated URLs (see Pagination).
  • Soft 404s from client-side routing.
  • Third-party scripts injecting content or meta tags late.
  • Huge hydration costs on mobile.

JavaScript itself is not bad for SEO. Problems come from relying on it for content and links that search engines need to see immediately.

Further reading: Google’s JavaScript SEO basics.

Key Takeaways

  • JavaScript SEO keeps JS-powered content crawlable and indexable.
  • Put essential content and links in the initial HTML.
  • Prefer server-side rendering or static generation for pages that need to rank.
  • Use real links, unique URLs and correct status codes.
  • Test with URL Inspection and a crawl with rendering on and off.

Related Terms

Wondering what to fix first on your site? Get a free check of your site’s SEO, or keep learning in the SEO Encyclopedia.