JavaScript Framework SEO

TL;DR — Most JavaScript frameworksJavaScript frameworks — React, Vue, Angular, Next.js, Nuxt, Svelte, Astro — are libraries or meta-frameworks for building web UIs. Their SEO impact depends on rendering mode: SSR and SSG deliver pre-rendered HTML; CSR-only apps require Googlebot to execute JavaScript before it can index content. build pages in your visitor’s browser (CSR). This works fine for users, but search engines might not run the JavaScript and miss your content. The fix: use a framework mode that builds pages on the server (SSR) or at build time (SSG). Next.js and Nuxt make this easy; pure React and Vue in CSR mode require extra work.

Why JavaScript frameworks have SEO concerns

Google processes JavaScript through crawlingCrawling is how search engines use automated bots (like Googlebot and Bingbot) to discover URLs and download pages. A page has to be crawlable to be indexed, but crawling on its own isn't a ranking factor., renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM., and indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed., and blocked or failed resources can change the rendered result. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: 2026-07-14 Google: JavaScript SEO basics RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode and metadata implementation matter more than the framework brand alone. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: 2026-07-14 web.dev: Rendering on the Web

Traditional websites send complete HTML from the server. Search engine crawlersA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. download that HTML and index the content immediately. JavaScript frameworks often work differently: the server sends a minimal HTML file, and then JavaScript runs in the browser to build the actual page content.

If a search engine crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. doesn’t run your JavaScript (or runs it but something fails), it sees an empty page. That’s the CSR SEO problem.

Rendering modes explained

• SSG (static site generation) — pages are built as HTML at deploy time. Crawlers get complete HTML with no JavaScript required. Best for SEO.
• SSR (server-side rendering) — the server builds the HTML fresh for each request. Crawlers get complete HTML. Also excellent for SEO.
• CSR (client-side rendering) — JavaScript builds the page in the browser. Crawlers must run JavaScript to see content. Google can do this, but failures happen and discovery is slower.

Frameworks by SEO safety out of the box

Safest:

• Astro — generates static HTML by default; JavaScript only where you opt in
• Next.js — offers SSG, SSR, and ISR; full metadata API; industry standard
• Nuxt — same for the Vue ecosystem; excellent SSR/SSG support

Requires configuration:

• Angular — CSR by default; needs @angular/ssr (formerly Angular Universal) for safe SEO
• React — CSR by default; needs Next.js or React Router (framework mode) for SSR/SSG
• Vue — CSR by default; needs Nuxt for SSR/SSG
• Svelte — CSR by default; SvelteKit adds SSR/SSG support

TL;DR — At the technical level, JS framework SEO is about: (1) renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. architecture for the initial HTML payload, (2) metadata injection into <head> before the response is sent, (3) how the framework handles hydrationActivating server-rendered HTML in the browser by attaching JavaScript handlers. and link discovery, and (4) ISR cache staleness. Next.js has the most complete built-in SEO tooling (Metadata API, built-in app/sitemap.ts, image optimization). Astro is the most SEO-safe by architecture.

Rendering mode, metadata API, and ISR support by framework

Framework capabilities and defaults change by version; verify them in each framework’s official documentation. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: 2026-07-14 web.dev: Rendering on the Web No renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode guarantees indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. or rankings. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: 2026-07-14 Google: JavaScript SEO basics When you’re comparing frameworks for a decision, test the same routes, content, deployment target and tooling for each candidate — a benchmark that swaps any of those isn’t measuring the framework, it’s measuring the difference in setup.

Remix v2 and React Router v7 merged — Remix’s server rendering and data-loading model now ships as React Router’s “framework mode,” and that’s the stable upgrade path for Remix v2 apps. Remix 3 is a separate, experimental React-less rewrite (beta), not the successor to Remix v2 — don’t treat it as a drop-in SSR option for a React codebase.

Metadata timing, crawlable links, and ISR cache staleness

Metadata injection timing — Metadata (<title>, <meta>) must be in the server response, not added by JavaScript after page load. Next.js’s Metadata API, Nuxt’s useSeoMeta, and Astro’s <head> component handle this correctly. document.title = '...' or React Helmet in CSR mode does not — it runs after the initial HTML is served.

Link discovery — GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. discovers links by parsing HTML. Links added via JavaScript (onClick, dynamic routing without <a> tags) may not be discovered. Use real <a href> elements for important navigation.

Hydration and duplicate contentThe same or very similar primary content reachable at more than one URL. There's no general duplicate content penalty — the real costs are possible signal dilution, the wrong URL getting chosen, and less-efficient crawling. — If SSR and CSR render different content (hydration mismatch), you may end up with indexed content that doesn’t match what users see. Test for hydration errors in the browser console.

Soft 404sA soft 404 is a URL that returns a success status code (usually 200 OK) even though the page is empty, missing, or shows a 'not found' message. It isn't a status code a server sends — it's a label search engines apply after comparing the response code against the rendered content, and they treat the page like a 404 for indexing. — Client-side routers can silently render a “page not found404 Not Found is the HTTP client-error status code a server returns when it can't find the requested URL — RFC 9110 defines it as no current representation, or unwillingness to disclose one. A \"hard 404\" actually returns the 404 status; a \"soft 404\" returns a success code (like 200) for a page that's really gone. 404s are normal and expected: the fact that some URLs 404 doesn't affect your site's other, successful pages, and Google de-indexes 404'd URLs over time (probably retrying for some period, less and less often).” UI while returning a 200 HTTP status. Search engines index these as real pages. Make sure your 404 page returns a real 404 status, and server-side redirectsA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't. return 301.

ISR cache invalidation — In Next.js and Nuxt ISR setups, stale pages can be served to crawlersA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. during the revalidation window. Set a time-based revalidate interval, and for content that changes on a schedule you don’t control (a CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. save, for example), pair it with on-demand revalidation triggered from a webhook-backed route handler — see the Next.js ISR guide for the full API.

// app/blog/[id]/page.tsx — time-based revalidation
export const revalidate = 3600 // re-check this page at most once an hour

// app/api/revalidate/route.ts — on-demand revalidation, called by a CMS webhook
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, secret } = await request.json()
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }
  revalidatePath(path) // e.g. '/blog/1' — next request regenerates fresh HTML
  return NextResponse.json({ revalidated: true })
}

JavaScript framework SEO is primarily determined by renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode. SSG (pages built as static HTML at deploy time) and SSR (pages rendered server-side per request) are both safe for search engine indexation. CSR (pages rendered entirely in the browser via JavaScript) is riskier — Google can execute JavaScript, but failures and delays are common, and discovery is slower.

Next.js (React meta-framework): Most complete built-in SEO support. App Router Metadata API, SSG/SSR/ISR, image optimization, built-in app/sitemap.ts (the next-sitemap package is now only needed for extensions it doesn’t cover), link-level prefetching. Industry standard for SEO-sensitive React apps.

Nuxt (Vue meta-framework): Equivalent capabilities for Vue. Built-in useSeoMeta() and useHead() composables, SSR/SSG/ISR, Nuxt SEONuxt SEO is the practice of optimizing Nuxt.js (Vue's meta-framework) apps so search engines and AI crawlers can crawl, render, and index them. Nuxt's big advantage is that it ships server-side rendering by default, so pages arrive as fully-formed HTML instead of an empty Vue SPA shell. module. Excellent for Vue-based sites.

Astro: Island architecture ships zero JavaScript by default. Pages are static HTML; interactivity added via explicit “islands.” Best SEO safety of any JS framework by default. Great for content-heavy sites.

SvelteKit: SSR by default, excellent metadata support via svelte:head. Solid SEOSolidJS SEO is the set of practices for making SolidJS apps crawlable, indexable, and fast. Bare SolidJS renders client-side (an empty HTML shell), so SEO depends on using SolidStart for SSR or SSG to put real content and metadata in the initial HTML. with minimal configuration.

Angular: CSR by default, requires @angular/ssr (formerly Angular Universal) for reliable indexation. Historically the most SEO-problematic of the major frameworks.

React (bare): CSR by default. Requires Next.js, React Router (framework mode), or Gatsby for SSR/SSG. Note: Remix v2’s server-renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. model has merged into React Router v7/v8 as “framework mode” — that’s the maintained upgrade path, not the separate, experimental React-less Remix 3 beta. Don’t use bare CRA/Vite-React for content that must rank.

Vue (bare): Same issue. Use Nuxt for SEO-critical Vue applications.

Svelte (bare): CSR by default. Use SvelteKit for SSR/SSG.

JavaScript framework SEO checklist

Universal (applies to all frameworks)

• Verify renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode: curl -s URL | grep "<title>" — title must appear in raw HTML
• Check that <title> and <meta name="description"> are in the server response
• Use real <a href> tags for all navigable links (not just click handlers)
• Ensure 404 pages404 Not Found is the HTTP client-error status code a server returns when it can't find the requested URL — RFC 9110 defines it as no current representation, or unwillingness to disclose one. A \"hard 404\" actually returns the 404 status; a \"soft 404\" returns a success code (like 200) for a page that's really gone. 404s are normal and expected: the fact that some URLs 404 doesn't affect your site's other, successful pages, and Google de-indexes 404'd URLs over time (probably retrying for some period, less and less often). return HTTP 404, not 200
• Ensure redirectsA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't. use server-side 301/302, not window.location.href
• Generate and submit an XML sitemapAn XML sitemap is a UTF-8 file listing the canonical URLs on your site (with optional lastmod) so search engines can discover and prioritize them. It's a discovery and diagnostic aid, not a guarantee of indexing — and Google ignores its priority and changefreq tags.
• Add robots.txt to your public directory

Next.js

• Use the App Router Metadata API (metadata export or generateMetadata())
• Choose SSG (generateStaticParams) or SSR (dynamic = 'force-dynamic') per route
• Add an app/sitemap.ts file (App Router’s built-in sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. support) for most sites; reach for the next-sitemap package only if you need cross-domain sitemapsA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. or other extensions the built-in MetadataRoute.Sitemap type doesn’t model
• Use next/image for all images (automatic WebP, sizing, lazy-load)
• Verify ISR revalidate values — set short windows for frequently-updated pages

Nuxt

• Use useSeoMeta() or useHead() in every page component
• Install the @nuxtjs/sitemap module
• Use Nuxt’s built-in SSR (or nuxt generate for SSG)
• Configure robots.txt via @nuxtjs/robots

Astro

• Pass SEO props to your <BaseHead> component on every page
• Use Astro’s @astrojs/sitemap integration
• Keep JavaScript islands minimal — avoid converting static sections to islands

Angular

• Enable SSR via ng add @angular/ssr
• Use Meta and Title services for metadata
• Add transfer state to prevent API double-fetching on hydrationActivating server-rendered HTML in the browser by attaching JavaScript handlers.

Framework deep dives

• React SEOReact SEO is the practice of making React apps crawlable and indexable. React renders client-side by default, so the raw HTML is near-empty until JavaScript runs — SSR or SSG puts the content back in the initial response where crawlers (and AI bots) can reliably see it.
• Next.js SEONext.js SEO is the set of practices and built-in features that make a Next.js site crawlable, indexable, and rankable — rendering mode (SSG/SSR/ISR/Server Components), the App Router Metadata API, sitemap.ts/robots.ts conventions, next/image, and next/link.
• Vue SEOVue SEO is the practice of making web apps built with Vue.js crawlable, renderable, and indexable. Because Vue 3 defaults to client-side rendering, the content isn't in the raw HTML — so router mode, head management, and a rendering strategy (CSR, prerendering, SSR, or SSG) all matter.
• Nuxt SEONuxt SEO is the practice of optimizing Nuxt.js (Vue's meta-framework) apps so search engines and AI crawlers can crawl, render, and index them. Nuxt's big advantage is that it ships server-side rendering by default, so pages arrive as fully-formed HTML instead of an empty Vue SPA shell.
• Angular SEOAngular SEO is the practice of making Angular single-page apps crawlable, renderable, and indexable — chiefly by serving real HTML through server-side rendering (@angular/ssr) or prerendering instead of relying on client-side rendering, plus managing titles, meta tags, and clean URLs.
• Svelte SEOSvelte SEO is the practice of making sure search engines and AI crawlers can see content built with Svelte. Plain Svelte is client-side rendered (a blank shell), so the key is to use SvelteKit, which renders pages on the server by default.
• Astro SEOAstro SEO is the practice of optimizing sites built with the Astro web framework for search. Astro prerenders to static HTML by default, so content is in the raw HTML on first crawl for that route — no rendering queue — which makes it a strong starting point for SEO, though the default can be overridden per route and doesn't guarantee crawlability or rankings on its own.

Related reading

• JavaScript SEOMaking sure search engines can crawl, render, and index content that depends on JavaScript.
• Headless CMS SEOA content management system that separates the content repository from the presentation layer, delivering content via API to any front-end framework rather than rendering HTML server-side itself. It doesn't specify the rendering mode, hosting, cache, preview security, or publishing workflow — those are separate decisions.

JavaScript Frameworks

JavaScript frameworks — React, Vue, Angular, Next.js, Nuxt, Svelte, Astro — are libraries or meta-frameworks for building web UIs. Their SEO impact depends on rendering mode: SSR and SSG deliver pre-rendered HTML; CSR-only apps require Googlebot to execute JavaScript before it can index content.

Related: JavaScript SEO, Headless CMS

JavaScript Frameworks

JavaScript frameworks are toolkits — either component libraries (React, Vue, Svelte) or full meta-frameworks built on top of them (Next.js, Nuxt, SvelteKit, Astro, Angular) — for building interactive web user interfaces. They abstract DOM manipulation, state management, and routing into reusable components.

From an SEO perspective, the framework itself matters less than its renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode:

• Server-Side RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. (SSR): HTML is generated on the server per request. GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. receives fully rendered HTML immediately — same as a traditional server-rendered site.
• Static Site Generation (SSG): HTML is pre-built at deploy time. Fastest delivery; excellent for SEO.
• Client-Side Rendering (CSR): The server sends a minimal HTML shell; the browser runs JavaScript to build the DOM. GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. must execute JS to see content, adding latency and occasionally causing indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. gaps.

Most modern meta-frameworks (Next.js, Nuxt, Astro) support SSR and SSG by default, making SEO outcomes roughly equivalent to traditional CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. platforms when configured correctly.

Related: JavaScript SEO, Headless CMS

Changelog