Bahasa

SEO untuk Framework JavaScript

SEO untuk framework JavaScript—React, Next.js, Vue, Nuxt, Angular, Svelte, dan Astro. Bagaimana mode rendering (SSR, SSG, CSR) menentukan apa yang dapat diindeks Google, serta framework mana yang paling baik menangani SEO sejak awal.

Tentang artikel ini
Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 9 Sep 2026 · Lanjutan
AI Ditulis olehAI v2

SEO framework JavaScript ditentukan oleh mode rendering: SSG dan SSR memberi Googlebot HTML yang sudah dibangun; CSR memerlukan eksekusi JavaScript yang mungkin berhasil atau gagal. Next.js dan Nuxt memiliki dukungan SEO bawaan paling lengkap (SSR, SSG, ISR, dan API metadata). React dan Vue murni dalam mode CSR paling berisiko untuk SEO. Arsitektur island Astro sangat baik untuk SEO secara default. Angular memerlukan SSR melalui @angular/ssr (sebelumnya Angular Universal) agar pengindeksan andal.

TL;DR — Pada tingkat teknis, SEO framework JS mencakup: (1) arsitektur rendering untuk payload HTML awal, (2) injeksi metadata ke <head> sebelum respons dikirim, (3) cara framework menangani hidrasi dan penemuan tautan, serta (4) kedaluwarsa cache ISR. Next.js memiliki perangkat SEO bawaan paling lengkap (API Metadata, app/sitemap.ts bawaan, optimasi gambar). Astro adalah framework yang paling aman untuk SEO berdasarkan arsitekturnya.

Mode rendering, API metadata, dan dukungan ISR berdasarkan framework

Kemampuan dan default framework berubah menurut versi; verifikasi semuanya dalam dokumentasi resmi tiap framework. 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 ada mode rendering yang menjamin pengindeksan atau peringkat. 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 Saat membandingkan framework untuk mengambil keputusan, uji rute, konten, target deployment, dan tooling yang sama pada setiap kandidat—benchmark yang mengubah salah satunya tidak mengukur framework, melainkan perbedaan dalam konfigurasinya.

FrameworkRendering defaultAPI metadata bawaanDukungan SSR/SSGDukungan SEO ekosistem
AstroSSG (islands)Ya (<head> di file .astro, Content Collections untuk data terstruktur)KeduanyaKuat
Next.jsSSR/SSG (dapat dikonfigurasi)Ya (API Metadata di App Router)Keduanya + ISRSangat baik
NuxtSSR secara defaultYa (useHead, useSeoMeta)Keduanya + ISRSangat baik
SvelteKitSSR secara defaultYa (svelte:head)KeduanyaBaik
React Router (framework mode)SSR secara defaultYa (ekspor meta)SSR + DeferredBaik
AngularCSR secara defaultMelalui service Meta/Title AngularMelalui @angular/ssrSedang
React (bare)CSRManual (react-helmet-async; react-helmet tidak lagi dipelihara)Melalui Next.js/GatsbyBergantung pada wrapper
Vue (bare)CSRManual (@unhead/vue; vue-meta tidak lagi dipelihara)Melalui NuxtBergantung pada wrapper

Remix v2 dan React Router v7 telah bergabung—model rendering server dan pemuatan data Remix kini hadir sebagai “framework mode,” milik React Router, dan itulah jalur peningkatan yang stabil untuk aplikasi Remix v2. Remix 3 adalah penulisan ulang terpisah, eksperimental, dan React-less (beta), bukan penerus Remix v2—jangan menganggapnya sebagai opsi SSR siap pakai untuk codebase React.

Waktu metadata, tautan yang dapat dirayapi, dan kedaluwarsa cache ISR

Waktu injeksi metadata — Metadata (<title>, <meta>) harus ada dalam respons server, bukan ditambahkan JavaScript setelah halaman dimuat. API Metadata Next.js, useSeoMeta Nuxt, dan komponen <head> Astro menanganinya dengan benar. document.title = '...' atau React Helmet dalam mode CSR tidak melakukannya—kode itu berjalan setelah HTML awal disajikan.

Penemuan tautan — Googlebot menemukan tautan dengan mem-parsing HTML. Tautan yang ditambahkan melalui JavaScript (onClick, routing dinamis tanpa tag <a>) mungkin tidak ditemukan. Gunakan elemen <a href> nyata untuk navigasi penting.

Hidrasi dan konten duplikat — Jika SSR dan CSR merender konten berbeda (ketidakcocokan hidrasi), konten yang diindeks bisa tidak cocok dengan yang dilihat pengguna. Uji error hidrasi di konsol browser.

Soft 404 — Router sisi klien dapat diam-diam merender UI “page not found” sambil mengembalikan status HTTP 200. Mesin pencari mengindeksnya sebagai halaman nyata. Pastikan halaman 404 Anda mengembalikan status 404 yang benar, dan redirect sisi server mengembalikan 301.

Invalidasi cache ISR — Dalam konfigurasi ISR Next.js dan Nuxt, halaman lama dapat disajikan kepada crawler selama jendela revalidasi. Tetapkan interval berbasis waktu revalidate, dan untuk konten yang berubah mengikuti jadwal yang tidak Anda kendalikan (misalnya saat CMS disimpan), pasangkan dengan revalidasi sesuai permintaan yang dipicu route handler berbasis webhook—lihat panduan ISR Next.js untuk API lengkap.

// 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.