JavaScript SEO 2026: Cara Google Crawl React, Vue, Angular

person JasaSEO.id Team

calendar_today 25 Jan 2026

schedule 4 min read

bolt

TL;DR (Ringkasan Singkat)

"Website React saya bagus, tapi kenapa tidak muncul di Google?"

format_list_bulleted

Daftar Isi

expand_more

"Website React saya bagus, tapi kenapa tidak muncul di Google?"

Ini adalah keluhan klasik developer yang baru migrasi dari WordPress ke framework JavaScript modern. Website terlihat cepat dan interaktif, tapi Google tidak bisa melihat kontennya.

Masalahnya: Googlebot kesulitan dengan JavaScript yang di-render di sisi client (browser). Jika konten Anda muncul lewat fetch() atau axios setelah halaman load, Google mungkin tidak pernah melihatnya.

    </p>

Google's JavaScript Crawling Evolution

2015: Googlebot mulai bisa execute JavaScript (pakai Chrome 41).
2019: Googlebot upgrade ke Chromium versi terbaru (evergreen).
2026: Googlebot sudah pintar, tapi tetap ada batasan:
- Timeout rendering (5-10 detik)
- Tidak execute semua JavaScript (misal: infinite scroll tanpa pagination)
- Tidak bisa handle JavaScript yang error

Sebelum fix SEO, kita harus paham 4 strategi rendering:

CSR (Client-Side Rendering): Semua rendering di browser (React default).
SSR (Server-Side Rendering): Server render HTML lengkap (Next.js, Nuxt.js).
SSG (Static Site Generation): Pre-render semua halaman jadi HTML statis (Gatsby, Astro).
Dynamic Rendering: Serve HTML statis ke bot, JavaScript ke user (Prerender.io).

1. How Googlebot Renders JavaScript (Two-Wave Indexing)

Google melakukan 2 tahap crawling:

Wave 1 (Instant):
- Googlebot crawl HTML mentah (sebelum JavaScript execute)
- Jika konten sudah ada di HTML → Index langsung

build Robots Txt Generator

Gunakan Robots Txt Generator secara gratis untuk membantu optimasi Anda.

Coba Sekarang Gratis

Wave 2 (Delayed - bisa 1-7 hari):
- Googlebot masukkan halaman ke rendering queue
- Execute JavaScript
- Index konten yang muncul setelah JS execute

Implikasi: Jika konten penting cuma ada di Wave 2, ranking Anda bisa delay atau tidak optimal.

2. Rendering Strategies (CSR vs SSR vs SSG)


Strategi	Cara Kerja	SEO Score	Speed	Use Case
CSR	Render di browser	⭐⭐	Fast (after load)	Dashboard internal, app
SSR	Render di server per request	⭐⭐⭐⭐⭐	Medium	E-commerce, blog
SSG	Pre-render jadi HTML	⭐⭐⭐⭐⭐	Super Fast	Landing page, docs
Dynamic Rendering	HTML untuk bot, JS untuk user	⭐⭐⭐⭐	Fast	Hybrid solution

Rekomendasi 2026:
- Blog/Content: SSG (Astro, Next.js Static Export)
- E-Commerce: SSR (Next.js, Nuxt.js)
- SaaS Dashboard: CSR (React/Vue biasa) + Dynamic Rendering untuk marketing pages

3. Framework SEO Readiness


Framework	Default Rendering	SEO Out-of-Box	Solusi SEO
React	CSR	⭐⭐	Pakai Next.js (SSR/SSG)
Vue	CSR	⭐⭐	Pakai Nuxt.js (SSR/SSG)
Angular	CSR	⭐⭐	Pakai Angular Universal (SSR)
Svelte	CSR	⭐⭐	Pakai SvelteKit (SSR/SSG)
Next.js	SSR/SSG	⭐⭐⭐⭐⭐	Built-in SEO-friendly
Astro	SSG	⭐⭐⭐⭐⭐	Zero JS by default

4. Common JavaScript SEO Issues

Issue #1: Lazy Loading Gone Wrong

// ❌ BAD: Konten penting di-lazy load tanpa fallback <LazyLoad> <h1>Judul Artikel Penting</h1> </LazyLoad> // ✅ GOOD: Konten penting langsung di-render <h1>Judul Artikel Penting</h1> <LazyLoad> <img src="gambar-dekoratif.jpg" /> </LazyLoad>

Issue #2: Infinite Scroll Tanpa Pagination

Google tidak bisa scroll. Jika konten cuma muncul saat user scroll, Google tidak akan pernah lihat.

Solusi: Tambahkan pagination URL (/page/2, /page/3) atau "Load More" button dengan URL unik.

Issue #3: Content in onClick Events

// ❌ BAD: Konten tersembunyi di onClick <button onClick={() => setContent('Konten penting')}> Klik untuk lihat </button> // ✅ GOOD: Konten visible by default <div>Konten penting</div> ### 5. Testing JavaScript SEO

Tool #1: Mobile-Friendly Test

URL: https://search.google.com/test/mobile-friendly
- Paste URL website Anda
- Lihat screenshot "How Googlebot sees your page"
- Jika screenshot kosong/broken → Ada masalah JS

Tool #2: URL Inspection Tool (Search Console)

Buka Google Search Console
Masukkan URL halaman
Klik "Test Live URL"
Lihat tab "Rendered HTML" → Ini yang Google lihat setelah execute JS

Tool #3: View Source vs Inspect Element

View Source (Ctrl+U): HTML mentah sebelum JS execute
Inspect Element (F12): HTML setelah JS execute
Jika konten penting cuma ada di Inspect Element → Google mungkin tidak lihat (Wave 2 delay)

### FAQ: JavaScript SEO

Q: Apakah Google bisa crawl JavaScript?
A: Ya, tapi dengan delay. Google punya rendering queue yang bisa delay 1-7 hari. Konten penting sebaiknya ada di HTML awal (SSR/SSG).

Q: Apa perbedaan SSR dan CSR untuk SEO?
A: SSR (Server-Side Rendering) kirim HTML lengkap ke Google → Index instant. CSR (Client-Side Rendering) kirim HTML kosong → Google harus execute JS dulu (delay).

Q: Framework mana yang paling SEO-friendly?
A: Next.js (React), Nuxt.js (Vue), SvelteKit (Svelte), atau Astro. Semua support SSR/SSG out-of-the-box.

Q: Bagaimana cara test JavaScript SEO?
A: Gunakan Mobile-Friendly Test atau URL Inspection Tool di Search Console. Lihat "Rendered HTML" untuk memastikan konten ter-render.

Q: Apakah Next.js otomatis SEO-friendly?
A: Next.js support SSR/SSG, tapi Anda tetap harus setting meta tags, sitemap, dan robots.txt manual. Framework cuma memudahkan rendering, bukan auto-SEO.

Q: Kenapa website React saya tidak ter-index?
A: Kemungkinan: (1) Konten di-render via CSR tanpa SSR, (2) JavaScript error yang block rendering, (3) Robots.txt memblokir Googlebot, (4) Konten di-lazy load tanpa fallback.

### Website JavaScript Tidak Muncul di Google?

Jangan biarkan teknologi modern malah menghancurkan SEO Anda. Kami bisa audit dan fix JavaScript SEO issues.

Minta Audit JavaScript SEO
Jasa Technical SEO untuk SPA