JavaScript SEO
JavaScript SEO is the practice of making sure content, links and metadata that depend on JavaScript can be crawled, rendered and indexed. Google can render JavaScript, but it is slower and less reliable than plain HTML, and most AI crawlers do not render it at all.
  • Server-side rendering or static generation is the safest choice for anything you want indexed.
  • Critical content, links, titles, canonicals and robots directives should be in the initial HTML.
  • Links need to be real anchor elements with an href.
  • Googlebot does not click, scroll or keep state between page loads.
  • Test with JavaScript disabled to see roughly what most AI crawlers see.

Modern frameworks such as React, Vue, Angular and Svelte build pages in the browser. That is great for interactivity and a risk for search, because a crawler that only reads the initial HTML may find an almost empty page.

How Google handles JavaScript

Google processes JavaScript pages in phases. It fetches the HTML, queues the page for rendering, runs it in a headless, evergreen version of Chromium, and then indexes the rendered result. The rendering step can follow quickly or be delayed, and it costs Google more than a plain fetch. During rendering Googlebot:

  • Does not click, type, hover or scroll like a user. It uses a very tall viewport instead.
  • Does not keep cookies, local storage or session storage between page loads.
  • Declines permission prompts.
  • May not wait for slow scripts or long chains of API calls.

Rendering strategies

  • Server-side rendering (SSR): the server sends complete HTML and the browser then makes it interactive. Best balance for dynamic sites.
  • Static site generation (SSG): pages are built in advance. Fastest and most robust where content does not change per request.
  • Incremental or hybrid approaches: a mix, as offered by Next.js, Nuxt, SvelteKit and Astro.
  • Client-side rendering (CSR): the browser does everything. Highest risk for SEO.
  • Dynamic rendering: serving pre-rendered HTML to bots only. Google now describes this as a workaround, not a long-term solution.

What must be in the initial HTML

  • Main content and headings.
  • Internal links.
  • Title and meta description.
  • Canonical and hreflang.
  • Meta robots. If the raw HTML contains noindex, Google may skip rendering, so JavaScript cannot remove it afterwards.
  • Structured data, ideally.

Links

Google only follows links in this form:

 <a href="/guides/canonical-tags">Canonical tags</a> 

It will not reliably follow a div with an onclick handler, a button, or an anchor without an href. Use the History API for routing so every view has a real URL. Hash-based routes are not indexed as separate pages.

Status codes in single-page apps

A client-rendered app often returns 200 for every URL, including ones that do not exist. Either have the server return a genuine 404, or redirect via JavaScript to a URL that does, or add a noindex tag to the error view.

Other things to watch

  • Lazy loading: use native loading="lazy" or IntersectionObserver. Content that loads only on a scroll event may never appear.
  • Blocked resources: if robots.txt blocks script files or API endpoints, the page cannot render properly.
  • Hydration mismatches: when the server HTML and the client-rendered version differ, the page may briefly or permanently show the wrong content.
  • Metadata changed on route change: make sure titles and canonicals update with each view.
  • Performance: heavy JavaScript is the leading cause of poor INP.

Common mistakes

  • An app shell with no content in the source.
  • Navigation that works for users but contains no crawlable links.
  • Tabs and accordions that fetch their content only when clicked.
  • Different content served to bots and users.
  • Reviews, prices or related products injected late by third-party scripts and assumed to be indexed.

How to test

  • View source vs inspect element: the first shows the initial HTML, the second the rendered DOM. The gap between them is your JavaScript dependency.
  • URL Inspection, Test live URL shows the rendered HTML, a screenshot and any resources that failed to load.
  • Crawl twice, once with JavaScript rendering and once without, and compare word counts, links and metadata.
  • Disable JavaScript in the browser and see what is left.

The GEO angle

This is where JavaScript SEO has become urgent again. Crawlers from OpenAI, Anthropic, Perplexity and others generally fetch HTML and do not execute scripts. If your content, prices or product details arrive via client-side rendering, those systems see a blank page. Server-rendered HTML is now a baseline requirement for AI visibility, not a nice-to-have.

Add your title here

This is a paragraph. Writing in paragraphs lets visitors find what they are looking for quickly and easily. Make sure the title suits the content of this text.

Contact Us Amy Time