JavaScript SEO 2026: Cara Google Crawl React, Vue, Angular
TL;DR (Ringkasan Singkat)
"Website React saya bagus, tapi kenapa tidak muncul di Google?"
format_list_bulleted
Daftar Isi
expand_more
Daftar Isi
"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.
Bagaimana Google Crawl JavaScript?
2-Wave Indexing Process
Google menggunakan proses 2 tahap untuk crawl JavaScript:
Problem: Wave 2 bisa delay 1-7 hari (bahkan lebih untuk site baru). Konten penting yang hanya muncul di Wave 2 akan delay indexing.Rendering Queue
Google punya rendering queue yang terbatas. Tidak semua halaman di-render. Priority:
- High Priority: Homepage, important pages
- Medium Priority: Category pages, popular content
- Low Priority: Deep pages, low-traffic pages
CSR vs SSR vs SSG: Apa Bedanya?
Client-Side Rendering (CSR)
Cara Kerja: 1. Server kirim HTML kosong + JavaScript bundle 2. Browser download JavaScript 3. JavaScript execute dan render konten 4. User lihat konten SEO Impact:- ⚠️ HTML awal kosong (bad for SEO)
- ⚠️ Google harus wait rendering queue
- ⚠️ Slow First Contentful Paint
- ✅ Fast subsequent navigation
- Dashboard/admin panel
- SaaS app (tidak perlu SEO)
- Internal tools
<!-- HTML yang dikirim server (KOSONG) -->
<div id="root"></div>
<script src="bundle.js"></script>
Server-Side Rendering (SSR)
Cara Kerja: 1. Server execute JavaScript 2. Server render HTML lengkap 3. Server kirim HTML ke browser 4. Browser show konten (instant) 5. JavaScript hydrate untuk interactivity SEO Impact:
- ✅ HTML lengkap sejak awal (perfect for SEO)
- ✅ Google langsung index (no delay)
- ✅ Fast First Contentful Paint
- ⚠️ Server load lebih tinggi
- E-commerce
- News/media sites
- Content sites yang butuh SEO
<!-- HTML yang dikirim server (LENGKAP) -->
<div id="root">
<h1>Judul Artikel Penting</h1>
<p>Konten lengkap sudah ada di HTML...</p>
</div>
<script src="bundle.js"></script>
Static Site Generation (SSG)
Cara Kerja: 1. Build time: Generate HTML untuk semua pages 2. Deploy HTML static ke CDN 3. Browser download HTML lengkap (instant) 4. JavaScript hydrate untuk interactivity SEO Impact:
- ✅✅ HTML lengkap sejak awal (best for SEO)
- ✅✅ Super fast (served from CDN)
- ✅ No server load
- ⚠️ Harus rebuild untuk update content
- Blog
- Documentation
- Marketing pages
- Portfolio
Framework SEO Readiness
Comparison Table
| Framework | Default Rendering | SEO Out-of-Box | Solusi SEO | Best For |
|---|---|---|---|---|
| React | CSR | ⭐⭐ | Pakai Next.js (SSR/SSG) | SPA, Dashboard |
| Vue | CSR | ⭐⭐ | Pakai Nuxt.js (SSR/SSG) | SPA, Dashboard |
| Angular | CSR | ⭐⭐ | Pakai Angular Universal (SSR) | Enterprise apps |
| Svelte | CSR | ⭐⭐ | Pakai SvelteKit (SSR/SSG) | Modern apps |
| Next.js | SSR/SSG | ⭐⭐⭐⭐⭐ | Built-in SEO-friendly | Production sites |
| Nuxt.js | SSR/SSG | ⭐⭐⭐⭐⭐ | Built-in SEO-friendly | Production sites |
| Astro | SSG | ⭐⭐⭐⭐⭐ | Zero JS by default | Content sites |
| Gatsby | SSG | ⭐⭐⭐⭐ | GraphQL-based SSG | Blogs, docs |
Rekomendasi 2026
Blog/Content:- Best: Astro, Next.js Static Export
- Good: Gatsby, Nuxt.js Static
- Why: SSG = fastest, best SEO
- Best: Next.js (SSR), Nuxt.js (SSR)
- Good: SvelteKit
- Why: Dynamic content, need fresh data
- Best: React (CSR), Vue (CSR)
- Good: Angular
- Why: No SEO needed, interactivity priority
- Best: Next.js
- Strategy: SSG for marketing pages, CSR for app pages
Common JavaScript SEO Issues
Issue #1: Lazy Loading Gone Wrong
⚠️ BAD: Konten penting di-lazy load tanpa fallback// React example
function Article() {
const [content, setContent] = useState('');
useEffect(() => {
fetch('/api/article').then(res => setContent(res.data));
}, []);
return <div>{content}</div>; // Empty saat first render!
}
✅ GOOD: Konten penting langsung di-render (SSR/SSG)
// Next.js example
export async function getStaticProps() {
const content = await fetch('/api/article');
return { props: { content } };
}
function Article({ content }) {
return <div>{content}</div>; // Sudah ada di HTML!
}
Issue #2: Infinite Scroll Tanpa Pagination
Problem: Google tidak bisa scroll. Jika konten cuma muncul saat user scroll, Google tidak akan pernah lihat. ⚠️ BAD:
<InfiniteScroll loadMore={loadMore}>
{items.map(item => <Item key={item.id} />)}
</InfiniteScroll>
✅ GOOD:
Tambahkan pagination URL (/page/2, /page/3) atau "Load More" button dengan URL unik.
<div>
{items.map(item => <Item key={item.id} />)}
<Link href="/articles?page=2">Load More</Link>
</div>
Issue #3: Content in onClick Events
⚠️ BAD: Konten tersembunyi di onClick
<button onClick={() => setContent('Konten penting')}>
Klik untuk lihat
</button>
Google tidak click buttons. ✅ GOOD: Konten visible by default
<details>
<summary>Klik untuk expand</summary>
<p>Konten penting</p> {/ Sudah ada di HTML /}
</details>
Issue #4: Missing Meta Tags
⚠️ BAD:
function Page() {
return <div>Content</div>;
}
No title, no meta description. ✅ GOOD:
import Head from 'next/head';
function Page() {
return (
<>
<Head>
<title>Page Title</title>
<meta name="description" content="Page description" />
</Head>
<div>Content</div>
</>
);
}
Issue #5: Blocked Resources
Problem: robots.txt block JavaScript/CSS files. ⚠️ BAD:
User-agent: *
Disallow: /static/
Disallow: *.js
✅ GOOD:
User-agent: *
Allow: /static/
Allow: *.js
Allow: *.css
Google needs to download JS/CSS to render properly.
Testing JavaScript SEO
Tool #1: Mobile-Friendly Test
URL: https://search.google.com/test/mobile-friendly Steps: 1. Paste URL website Anda 2. Lihat screenshot "How Googlebot sees your page" 3. Jika screenshot kosong/broken → Ada masalah JS What to Check:- Apakah konten terlihat?
- Apakah images loaded?
- Apakah layout correct?
Tool #2: URL Inspection Tool (Search Console)
Steps: 1. Buka Google Search Console 2. Masukkan URL halaman 3. Klik "Test Live URL" 4. Lihat tab "Rendered HTML" → Ini yang Google lihat setelah execute JS What to Check:- Compare "Crawled HTML" vs "Rendered HTML"
- Apakah konten penting ada di Rendered HTML?
- Check for JavaScript errors
Tool #3: View Source vs Inspect Element
View Source (Ctrl+U): HTML mentah sebelum JS execute (Wave 1) Inspect Element (F12): HTML setelah JS execute (Wave 2) Test: Jika konten penting cuma ada di Inspect Element → Google mungkin tidak lihat (Wave 2 delay)Tool #4: Screaming Frog
Setup: 1. Enable JavaScript rendering 2. Crawl website 3. Compare "HTML" vs "Rendered HTML" What to Check:- Pages with empty HTML
- Missing meta tags
- Broken internal links
Tool #5: Lighthouse
Run:lighthouse https://yoursite.com --view
Check:
- First Contentful Paint (< 1.8s)
- Largest Contentful Paint (< 2.5s)
- SEO score (> 90)
JavaScript SEO Best Practices
Use SSR/SSG for Important Pages
Priority:- Homepage: SSG
- Category pages: SSR/SSG
- Product pages: SSR
- Blog posts: SSG
- User dashboard: CSR (OK)
Implement Proper Meta Tags
Use Framework Helpers: Next.js:import Head from 'next/head';
<Head>
<title>Page Title</title>
<meta name="description" content="..." />
<meta property="og:title" content="..." />
</Head>
Nuxt.js:
export default {
head: {
title: 'Page Title',
meta: [
{ name: 'description', content: '...' }
]
}
}
Optimize Core Web Vitals
Targets:
- LCP < 2.5s
- FID < 100ms
- CLS < 0.1
- INP < 200ms (2026)
- Code splitting
- Lazy load images
- Preload critical resources
- Minimize JavaScript
Use Semantic HTML
⚠️ BAD:<div onClick={handleClick}>Click me</div>
✅ GOOD:
<button onClick={handleClick}>Click me</button>
Semantic HTML helps Google understand content structure.
Implement Structured Data
Example (JSON-LD):<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": "Author Name",
"datePublished": "2026-01-25"
}
</script>
Create XML Sitemap
Next.js Example:
// pages/sitemap.xml.js
export async function getServerSideProps({ res }) {
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://yoursite.com/</loc>
<lastmod>2026-01-25</lastmod>
</url>
</urlset>`;
res.setHeader('Content-Type', 'text/xml');
res.write(sitemap);
res.end();
return { props: {} };
}
Handle 404s Properly
⚠️ BAD: Return 200 status for 404 pages (soft 404) ✅ GOOD:
// Next.js
export async function getStaticProps() {
const data = await fetchData();
if (!data) {
return { notFound: true }; // Returns 404 status
}
return { props: { data } };
}
Framework-Specific Guides
Next.js SEO
Best Practices:
1. Use getStaticProps for static pages
2. Use getServerSideProps for dynamic pages
3. Use next/head for meta tags
4. Use next/image for image optimization
5. Enable i18n for multi-language
Example:
import Head from 'next/head';
import Image from 'next/image';
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}
export default function Page({ data }) {
return (
<>
<Head>
<title>{data.title}</title>
<meta name="description" content={data.description} />
</Head>
<h1>{data.title}</h1>
<Image src={data.image} width={800} height={600} alt={data.title} />
</>
);
}
Nuxt.js SEO
Best Practices:
1. Use asyncData or fetch for data
2. Use head() method for meta tags
3. Use nuxt/image for optimization
4. Enable target: 'static' for SSG
Example:
<template>
<div>
<h1>{{ article.title }}</h1>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
const article = await fetch(`/api/articles/${params.id}`);
return { article };
},
head() {
return {
title: this.article.title,
meta: [
{ name: 'description', content: this.article.description }
]
};
}
}
</script>
React (CSR) SEO Workarounds
If you MUST use CSR:
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. Q: Apakah perlu migrate dari React CSR ke Next.js? A: Jika website Anda butuh SEO (blog, e-commerce, marketing), ya. Jika dashboard/app internal, tidak perlu. Q: Berapa lama Google index JavaScript site? A: Dengan SSR/SSG: 1-7 hari (normal). Dengan CSR: 1-4 minggu (delay rendering queue).Kesimpulan
JavaScript SEO di 2026 sudah lebih mature, tapi tetap ada challenges. Google bisa crawl JavaScript, tapi dengan delay dan limitations.
Key Takeaways: 1. Use SSR/SSG untuk konten yang butuh SEO 2. CSR only untuk dashboard/app yang tidak perlu ranking 3. Test regularly dengan Mobile-Friendly Test dan Search Console 4. Optimize Core Web Vitals untuk ranking boost 5. Use modern frameworks (Next.js, Nuxt.js) yang SEO-friendly by defaultWebsite 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 atau Jasa Technical SEO untuk SPA
Related Articles
- Technical SEO Checklist - Checklist lengkap technical SEO
- Core Web Vitals Guide - Optimasi page speed
- Crawlability Masterclass - Optimasi crawl budget
- Server Log Analysis SEO - Analisis Googlebot behavior
- Shopify vs WooCommerce vs Magento SEO - Platform comparison
Butuh Bantuan SEO Profesional?
Tim ahli kami siap membantu website Anda ranking di halaman 1 Google.