Bahasa

JavaScript kerangka kerja SEO

SEO untuk JavaScript kerangka kerja — React, Berikutnya.js, Vue, Nuxt, Angular, Svelte, dan Astro. Bagaimana rendering mode (SSR, SSG, CSR) determines apa Google dapat indeks, dan yang kerangka kerja tangani SEO best out dari box.

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

JavaScript kerangka kerja SEO muncul down untuk rendering mode: SSG dan SSR memberikan Googlebot pre-dibangun HTML; CSR memerlukan JavaScript execution itu dapat atau dapat tidak succeed. Berikutnya.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 melalui @angular/ssr (formerly Angular Universal) untuk reliable pengindeksan.

TL;DR — di teknis tingkat, JS kerangka kerja SEO adalah tentang: (1) rendering architecture untuk awal HTML payload, (2) metadata injection ke <head> sebelum respons adalah dikirim, (3) bagaimana kerangka kerja menangani hydration dan tautan penemuan, dan (4) ISR cache staleness. Berikutnya.js memiliki paling menyelesaikan 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 kerangka kerja

kerangka kerja capabilities dan defaults perubahan oleh versi; verify them di setiap kerangka kerja’s dokumentasi resmi. Bukti untuk klaim ini Primary standard or official documentation supporting the adjacent article claim. Cakupan: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Tingkat keyakinan: tinggi · Diverifikasi: web.dev: Rendering on the Web Tidak rendering mode jaminan pengindeksan atau rankings. Bukti untuk klaim ini Primary standard or official documentation supporting the adjacent article claim. Cakupan: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Tingkat keyakinan: tinggi · Diverifikasi: Google: JavaScript SEO basics Ketika Anda’re comparing kerangka kerja untuk sebuah decision, test yang sama routes, konten, deployment target dan tooling untuk setiap candidate — sebuah benchmark itu swaps apa pun dari itu tidak measuring kerangka kerja, ini adalah measuring perbedaan di setup.

kerangka kerjaDefault renderingdibangun-di metadata APISSR/SSG mendukungEcosystem SEO mendukung
AstroSSG (islands)Ya (<head> di .astro files, konten Collections untuk data terstruktur)KeduanyaStrong
Berikutnya.jsSSR/SSG (configurable)Ya (Metadata API di App Router)Keduanya + ISRExcellent
NuxtSSR oleh defaultYa (useHead, useSeoMeta)Keduanya + ISRExcellent
SvelteKitSSR oleh defaultYa (svelte:head)Keduanyabaik
React Router (kerangka kerja mode)SSR oleh defaultYa (meta export)SSR + Deferredbaik
AngularCSR oleh defaultMelalui Angular Meta/Title servicesMelalui @angular/ssrModerate
React (bare)CSRManual (react-helmet-async; react-helmet adalah unmaintained)Melalui Berikutnya.js/GatsbyBergantung pada wrapper
Vue (bare)CSRManual (@unhead/vue; vue-meta adalah unmaintained)Melalui NuxtBergantung pada wrapper

Remix v2 dan React Router v7 digabungkan — Remix’s server rendering dan data-memuat model now ships sebagai React Router’s “kerangka kerja mode,” (terjemahan) “kerangka kerja mode,” dan itu’s stable upgrade path untuk Remix v2 apps. Remix 3 adalah sebuah terpisah, experimental React-lebih sedikit rewrite (beta), tidak successor untuk Remix v2 — jangan 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, tidak ditambahkan oleh JavaScript setelah pemuatan halaman. Berikutnya.js’s Metadata API, Nuxt’s useSeoMeta, dan Astro’s <head> component tangani ini correctly. document.title = '...' atau React Helmet di CSR mode melakukan tidak — ini berjalan setelah awal HTML adalah disajikan.

tautan penemuan — Googlebot discovers tautan oleh parsing HTML. tautan ditambahkan melalui JavaScript (onClick, dynamic routing tanpa <a> tags) dapat tidak 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 tidak match apa pengguna see. Test untuk hydration errors di browser console.

Soft 404s — Client-side routers dapat silently render sebuah “halaman tidak ditemukan” (terjemahan) “halaman tidak ditemukan” UI sementara 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 Berikutnya.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 Berikutnya.js ISR guide untuk penuh 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 })
}

Tambahkan catatan pakar

Sematkan kutipan pakar

Orang baru? Buat profilnya yang belum diklaim di /admin/experts/ → Sematkan kutipan pakar terlebih dahulu.