Bahasa

JavaScript framework SEO

SEO untuk JavaScript frameworks — React, Next.js, Vue, Nuxt, Angular, Svelte, dan Astro. How rendering mode (SSR, SSG, CSR) determines what Google dapat indeks, dan which frameworks handle SEO best out dari box.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 3 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2

JavaScript framework SEO comes down untuk rendering mode: SSG dan SSR give Googlebot pre-dibangun HTML; CSR memerlukan JavaScript execution itu dapat atau dapat not succeed. Next.js dan Nuxt memiliki paling dibangun-di SEO mendukung (SSR, SSG, ISR, metadata APIs). Pure React dan Vue di CSR mode adalah riskiest untuk SEO. Astro's island architecture adalah excellent untuk SEO oleh default. Angular memerlukan SSR via @angular/ssr (formerly Angular Universal) untuk reliable pengindeksan.

TL;DR — di technical tingkat, JS framework SEO adalah tentang: (1) rendering architecture untuk initial HTML payload, (2) metadata injection ke <head> sebelum respons adalah dikirim, (3) how framework handles hydration dan tautan penemuan, dan (4) ISR cache staleness. Next.js memiliki paling complete dibangun-di SEO tooling (Metadata API, dibangun-di app/sitemap.ts, image optimization). Astro adalah paling SEO-safe oleh architecture.

rendering mode, metadata API, dan ISR mendukung oleh framework

framework capabilities dan defaults perubahan oleh versi; verify them di setiap 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: web.dev: Rendering on the Web No rendering mode guarantees pengindeksan atau 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: Google: JavaScript SEO basics When Anda’re comparing frameworks untuk sebuah decision, test yang sama routes, konten, deployment target dan tooling untuk setiap candidate — sebuah benchmark itu swaps apa pun dari itu isn’t measuring framework, ini adalah measuring difference di setup.

frameworkDefault renderingdibangun-di metadata APISSR/SSG mendukungEcosystem SEO mendukung
AstroSSG (islands)Yes (<head> di .astro files, konten Collections untuk data terstruktur)BothStrong
Next.jsSSR/SSG (configurable)Yes (Metadata API di App Router)Both + ISRExcellent
NuxtSSR oleh defaultYes (useHead, useSeoMeta)Both + ISRExcellent
SvelteKitSSR oleh defaultYes (svelte:head)Bothbaik
React Router (framework mode)SSR oleh defaultYes (meta export)SSR + Deferredbaik
AngularCSR oleh defaultVia Angular Meta/Title servicesVia @angular/ssrModerate
React (bare)CSRManual (react-helmet-async; react-helmet adalah unmaintained)Via Next.js/GatsbyDepends pada wrapper
Vue (bare)CSRManual (@unhead/vue; vue-meta adalah unmaintained)Via NuxtDepends pada wrapper

Remix v2 dan React Router v7 merged — Remix’s server rendering dan data-memuat model now ships sebagai React Router’s “framework mode,” (terjemahan) “framework mode,” dan itu’s stable upgrade path untuk Remix v2 apps. Remix 3 adalah sebuah separate, experimental React-less rewrite (beta), not successor untuk Remix v2 — don’t treat ini sebagai sebuah drop-di SSR option untuk sebuah React codebase.

Metadata timing, dapat di-crawl tautan, dan ISR cache staleness

Metadata injection timing — Metadata (<title>, <meta>) harus menjadi di server respons, not ditambahkan oleh JavaScript setelah pemuatan halaman. Next.js’s Metadata API, Nuxt’s useSeoMeta, dan Astro’s <head> component handle ini correctly. document.title = '...' atau React Helmet di CSR mode melakukan not — ini runs setelah initial HTML adalah disajikan.

tautan penemuan — Googlebot discovers tautan oleh parsing HTML. tautan ditambahkan via JavaScript (onClick, dynamic routing without <a> tags) dapat not menjadi ditemukan. gunakan nyata <a href> elements untuk penting navigation.

Hydration dan duplicate konten — jika SSR dan CSR render berbeda konten (hydration mismatch), Anda dapat end up dengan terindeks konten itu doesn’t match what pengguna see. Test untuk hydration errors di browser console.

Soft 404s — Client-side routers dapat silently render sebuah “page not found” (terjemahan) “halaman tidak ditemukan” UI while returning sebuah 200 HTTP status. mesin pencari indeks ini sebagai nyata halaman. pastikan Anda 404 halaman mengembalikan sebuah nyata 404 status, dan server-side redirects kembalikan 301.

ISR cache invalidation — di Next.js dan Nuxt ISR setups, stale halaman dapat menjadi disajikan untuk crawler selama revalidation window. Set sebuah time-based revalidate interval, dan untuk konten itu perubahan pada sebuah schedule Anda tidak control (sebuah CMS save, misalnya), pair ini dengan pada-demand revalidation triggered dari sebuah webhook-backed route handler — see Next.js ISR guide untuk 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 })
}

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.