Hibranwar Labs Audit Gratis
Panduan · Technical Advanced

JavaScript SEO & Rendering

SPA framework seperti React, Vue, dan Angular memberikan UX kaya, tapi default-nya bermasalah untuk SEO. Panduan ini mencakup SSR, SSG, hybrid rendering, hydration, common mistakes, dan cara test rendering untuk Googlebot.

Masalah inti: JS render adalah two-pass

Googlebot proses halaman dalam dua tahap. Pass pertama, crawl HTML dari server. Pass kedua, queue untuk rendering di Chromium headless, execute JavaScript, lalu index konten final. Dua pass ini terpisah dalam waktu, kadang beberapa hari sampai beberapa minggu.

Two-pass rendering Googlebot1Crawl HTMLPass 12Queue renderMenunggu3Execute JSPass 24Index kontenFinal

Kalau HTML pass pertama kosong (SPA murni), Google indexing halaman Anda tanpa konten utama, lalu update setelah rendering selesai. Delay ini bikin konten baru lambat muncul di pencarian. Dan kalau rendering gagal (timeout, JavaScript error), halaman tidak akan index sama sekali.

Empat strategi rendering

Perbandingan empat strategi renderingSSGSSRHybridCSRHTML final di first crawl✓✓✓×Konten dinamis real-time×✓✓✓Cost server rendah✓◐◐✓Build time cepat◐✓◐✓SEO-ready default✓✓✓×Cocok untuk public site✓✓✓×

1. Static Site Generation (SSG)

Semua halaman di-build ke HTML static di build-time, sebelum deploy. Saat user atau Googlebot request, server langsung serve HTML final. Paling cepat, paling cheap, paling SEO-friendly.

Framework populer: Next.js (mode static export), Astro, 11ty, Gatsby, Hugo, Jekyll. Cocok untuk: blog, marketing site, dokumentasi, portfolio, situs bisnis dengan konten jarang berubah.

Next.js SSG dengan getStaticProps // pages/artikel/[slug].tsx export async function getStaticProps({ params }) { const article = await fetchArticle(params.slug); return { props: { article }, revalidate: 3600 }; } export async function getStaticPaths() { const articles = await fetchAllArticles(); return { paths: articles.map((a) => ({ params: { slug: a.slug } })), fallback: 'blocking', }; }

Revalidate 3600 artinya Next.js re-generate halaman setelah 1 jam (ISR, Incremental Static Regeneration). Ini kombinasi SSG dengan freshness, ideal untuk konten semi-dinamis.

2. Server-Side Rendering (SSR)

Setiap request di-render on-the-fly di server, kirim HTML final ke client. Konten selalu fresh. Cost server lebih tinggi karena tiap request butuh compute.

Framework: Next.js (getServerSideProps), Nuxt.js (Vue), SvelteKit, Remix. Cocok untuk: dashboard user, halaman produk e-commerce dengan stock live, konten yang di-personalize berdasarkan user.

Next.js SSR dengan getServerSideProps // pages/produk/[id].tsx export async function getServerSideProps({ params }) { const product = await fetchProduct(params.id); const stock = await fetchLiveStock(params.id); return { props: { product, stock } }; }

3. Hybrid (Next.js default)

Per-route decision: mana SSG, mana SSR, mana ISR. Next.js dan Nuxt.js default hybrid. Untuk situs production, pattern yang paling umum: marketing page SSG, product listing ISR, product detail SSR, user dashboard CSR.

4. Client-Side Rendering (CSR)

HTML awal kosong, semua render di browser via JavaScript. Default React create-react-app, Vue CLI default. Paling SEO-unfriendly, hindari untuk public site.

Cocok hanya untuk: admin dashboard internal, SaaS app behind login, tool yang tidak butuh index Google. Kalau accidentally deploy CSR app untuk public site, expect 3-6 bulan indexing issue sebelum Google fix.

Hydration: the tricky middle layer

Saat pakai SSR atau SSG, browser terima HTML pre-rendered, lalu React/Vue/Svelte "hydrate" HTML itu dengan attach event listeners dan state. Hydration adalah proses invisible yang bisa break kalau tidak hati-hati.

Common hydration mismatch bug // BAD: hydration mismatch function Timestamp() { return <span>{new Date().toISOString()}</span>; } // GOOD: consistent between server and client function Timestamp({ serverTime }) { const [time, setTime] = useState(serverTime); useEffect(() => setTime(new Date().toISOString()), []); return <span>{time}</span>; }

Hydration mismatch bikin React "throw away" HTML dari server dan re-render dari nol di client. Hasilnya: FOUC (Flash of Unstyled Content), layout shift, atau kadang blank page. User experience jelek, CLS score tinggi, Googlebot bingung soal konten final.

Debug hydration error: buka browser console, cari warning "Hydration failed" atau "Text content did not match". Fix dengan pastikan server-rendered output identik dengan initial client render.

Common JavaScript SEO mistakes

Pitfall yang sering bikin situs SPA gagal SEO

Konten penting di lazy-loaded component. Hero heading dan intro paragraph di-lazy-load pakai React.lazy atau dynamic import. Googlebot pass pertama tidak lihat. Hardcode konten crucial di initial bundle.

Meta tag set via useEffect. Title, description, og:image di-set dari client-side via useEffect atau React Helmet tanpa SSR. Googlebot lihat meta default, bukan yang di-update. Pakai next/head dengan SSR atau Nuxt head().

Internal links pakai onClick bukan anchor tag. Navigation handle dengan onClick + router.push, tidak pakai <a href>. Googlebot tidak follow onClick. Selalu pakai Next/Link atau Nuxt Link yang render anchor tag.

Infinite scroll tanpa pagination fallback. Konten muncul lewat scroll-trigger API call. Googlebot tidak scroll. Tambah pagination tradisional (?page=1, ?page=2) sebagai fallback indexing.

Timeout JavaScript terlalu panjang. Googlebot punya budget rendering. Kalau halaman Anda butuh 5 detik untuk final render, kadang Googlebot give up. Target render-complete di bawah 3 detik.

Cara test rendering untuk Googlebot

Testing workflow 5-langkah

  1. 1

    URL Inspection Tool

    Google Search Console > URL Inspection > paste URL > Test Live URL. Lihat "Screenshot" dan "View Crawled Page" untuk HTML final.

  2. 2

    Rich Results Test

    search.google.com/test/rich-results, paste URL. Cek "View Tested Page" untuk HTML yang Google render.

  3. 3

    Disable JavaScript di Chrome

    DevTools > Command Menu (Ctrl+Shift+P) > Disable JavaScript. Reload halaman. Konten yang hilang = konten yang Googlebot tidak lihat di pass pertama.

  4. 4

    Mobile-Friendly Test

    search.google.com/test/mobile-friendly. Check rendered HTML source di tab "HTML". Search untuk konten kritis.

  5. 5

    Lighthouse audit

    Chrome DevTools > Lighthouse > Generate report. Check "SEO" dan "Performance" score, terutama Largest Contentful Paint timing.

Indonesian context: hosting dan performa

Banyak developer Indonesia pakai Vercel atau Netlify untuk hosting Next.js, dengan free tier yang cukup untuk proyek kecil-menengah. Problem: Vercel edge network Singapore terdekat, latency 50-80ms dari Indonesia. Untuk situs dengan traffic tinggi, pertimbangkan deploy ke hosting Indonesia (Cloudflare Workers, atau VPS di Jakarta) dengan Cloudflare CDN di depan.

Cross-reference ke panduan Technical SEO untuk foundation crawlability dan indexability, dan Edge SEO dengan Cloudflare Workers untuk teknik advanced routing dan caching.

Migration path: dari CSR ke SSR

Kalau sekarang punya React SPA murni dan mau migrate, tidak perlu rewrite total. Path-nya: deploy Next.js baru sebagai layer SSR di atas existing React components. Mulai dengan marketing pages (homepage, landing page, blog), biarkan app authenticated tetap CSR.

Timeline realistis: audit 1 minggu, setup Next.js skeleton 2 minggu, migrate marketing pages 4 minggu, test dan deploy 2 minggu. Total 2 bulan untuk situs medium. Monitor Search Console selama 6 bulan post-migration untuk indexing improvement.

Kesimpulan: pilih yang cocok

JavaScript SEO bukan satu-solusi-fit-all. Pilih rendering strategy berdasarkan jenis konten dan target audience. SSG untuk konten static, SSR untuk dinamis, hybrid untuk most cases production, CSR hanya untuk internal tool.

Rule sederhana: kalau halaman ini penting untuk organic search traffic, HTML-nya harus sudah lengkap di server response pertama. Kalau tidak, SEO-nya akan bergantung pada two-pass rendering Google yang unreliable.

Baca juga

Technical SEO

Foundation crawlability, indexability, schema, hreflang.

Edge SEO Cloudflare Workers

Manipulasi HTML di edge untuk SEO advanced.

Konten & SEO

Hub utama strategi konten dan SEO Indonesia.

Pertanyaan Umum

Apakah Googlebot bisa render JavaScript?
Ya, sejak 2019 Googlebot memakai rendering engine berbasis Chromium terbaru (evergreen). Tapi ada cost: Google crawl HTML dulu, lalu queue untuk rendering di batch terpisah. Delay antara crawl dan rendering bisa beberapa hari sampai beberapa minggu. Kalau konten Anda JavaScript-dependent, indexing lambat dan kadang gagal total.
Perlu SSR atau SSG?
Tergantung sifat konten. SSG (Static Site Generation) cocok untuk konten yang jarang berubah: blog, marketing page, dokumentasi. SSR (Server-Side Rendering) cocok untuk konten dinamis real-time: dashboard user, halaman produk dengan inventory live. Next.js default hybrid, Anda pilih per route mana SSG mana SSR.
Apakah client-side rendering (CSR) pasti gagal SEO?
Tidak pasti gagal, tapi risk tinggi. CSR murni (React create-react-app tanpa SSR) akan index-able tapi lambat, sering fail di page dengan konten yang muncul setelah fetch API. Untuk app yang bukan target SEO (admin dashboard, internal tool), CSR fine. Untuk public site yang target organic traffic, selalu pakai SSR atau SSG.
Dynamic rendering masih relevan?
Sudah deprecated oleh Google Maret 2023. Dynamic rendering (serve HTML berbeda untuk bot vs user) dianggap cloaking ringan dan makin tidak recommend. Solusinya: migrate ke SSR atau SSG. Kalau legacy site masih pakai dynamic rendering, boleh keep working, tapi roadmap migration harus ada.
Bagaimana test apakah halaman saya render benar untuk Googlebot?
Empat tools. Pertama, Google Search Console "URL Inspection" tool, klik "Test Live URL" lalu "View Crawled Page" untuk lihat HTML final yang Googlebot render. Kedua, Google Rich Results Test, sama paste URL. Ketiga, Mobile-Friendly Test, cek rendered HTML source. Keempat, "Disable JavaScript" di Chrome DevTools, kalau konten hilang, itu yang Googlebot lihat di first pass.

Situs SPA Anda indexing lambat?

Audit Entitas Gratis mencakup JavaScript SEO diagnostic: rendering strategy, hydration issue, dan fetch as Google testing. Laporan dalam 5 hari kerja.

Audit Gratis