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

"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

build Schema Generator

Gunakan Schema Generator secara gratis untuk membantu optimasi Anda.

Coba Sekarang Gratis

Jika halaman Anda di low priority, bisa tidak pernah di-render.

CSR vs SSR vs SSG: Apa Bedanya?

Client-Side Rendering (CSR)

Cara Kerja:*
Server kirim HTML kosong + JavaScript bundle
Browser download JavaScript
JavaScript execute dan render konten
User lihat konten
SEO Impact:*
⚠️ HTML awal kosong (bad for SEO)
⚠️ Google harus wait rendering queue
⚠️ Slow First Contentful Paint
✅ Fast subsequent navigation
Kapan Pakai:*
Dashboard/admin panel
SaaS app (tidak perlu SEO)
Internal tools
Example:*

<!-- HTML yang dikirim server (KOSONG) -->
<div id="root"></div>
<script src="bundle.js"></script>

Server-Side Rendering (SSR)

Cara Kerja:*
Server execute JavaScript
Server render HTML lengkap
Server kirim HTML ke browser
Browser show konten (instant)
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
Kapan Pakai:*
E-commerce
News/media sites
Content sites yang butuh SEO
Example:*

<!-- 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:*
Build time: Generate HTML untuk semua pages
Deploy HTML static ke CDN
Browser download HTML lengkap (instant)
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
Kapan Pakai:*
Blog
Documentation
Marketing pages
Portfolio
Example:* Same as SSR, tapi HTML di-generate saat build, bukan saat request.

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
E-Commerce:*
Best: Next.js (SSR), Nuxt.js (SSR)
Good: SvelteKit
Why: Dynamic content, need fresh data
SaaS Dashboard:*
Best: React (CSR), Vue (CSR)
Good: Angular
Why: No SEO needed, interactivity priority
Hybrid (Marketing + App):*
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:*
Paste URL website Anda
Lihat screenshot "How Googlebot sees your page"
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:*
Buka Google Search Console
Masukkan URL halaman
Klik "Test Live URL"
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:*
Enable JavaScript rendering
Crawl website
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)
Strategies:*
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:*
Use getStaticProps for static pages
Use getServerSideProps for dynamic pages
Use next/head for meta tags
Use next/image for image optimization
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:*
Use asyncData or fetch for data
Use head() method for meta tags
Use nuxt/image for optimization
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:*
Prerendering:* Use services like Prerender.io or Rendertron
Dynamic Rendering:* Serve SSR HTML to bots, CSR to users
Hybrid Approach:* SSG for marketing pages, CSR for app

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:*
Use SSR/SSG untuk konten yang butuh SEO
CSR only untuk dashboard/app yang tidak perlu ranking
Test regularly dengan Mobile-Friendly Test dan Search Console
Optimize Core Web Vitals untuk ranking boost
Use modern frameworks (Next.js, Nuxt.js) yang SEO-friendly by default

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 atau Jasa Technical SEO untuk SPA

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

read_more Artikel Terkait

Article

Cara Verifikasi Google Bisnisku Tanpa Surat Pos (2026...

Pelajari selengkapnya tentang topik ini....

calendar_today 2026-01-25

Article

Panduan Google Shopping Ads 2026: Cara Menang Lawan...

Pelajari selengkapnya tentang topik ini....

calendar_today 2026-01-25

Article

Server Log Analysis: Cara Audit Crawl Budget Google...

Pelajari selengkapnya tentang topik ini....

calendar_today 2026-01-27

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

TL;DR (Ringkasan Singkat)

Daftar Isi

Bagaimana Google Crawl JavaScript?

2-Wave Indexing Process

Rendering Queue

build Schema Generator

CSR vs SSR vs SSG: Apa Bedanya?

Client-Side Rendering (CSR)

Server-Side Rendering (SSR)

Static Site Generation (SSG)

Framework SEO Readiness

Comparison Table

Rekomendasi 2026

Common JavaScript SEO Issues

Issue #1: Lazy Loading Gone Wrong

Issue #2: Infinite Scroll Tanpa Pagination

Issue #3: Content in onClick Events

Issue #4: Missing Meta Tags

Issue #5: Blocked Resources

Testing JavaScript SEO

Tool #1: Mobile-Friendly Test

Tool #2: URL Inspection Tool (Search Console)

Tool #3: View Source vs Inspect Element

Tool #4: Screaming Frog

Tool #5: Lighthouse

JavaScript SEO Best Practices

Use SSR/SSG for Important Pages

Implement Proper Meta Tags

Optimize Core Web Vitals

Use Semantic HTML

Implement Structured Data

Create XML Sitemap

Handle 404s Properly

Framework-Specific Guides

Next.js SEO

Nuxt.js SEO

React (CSR) SEO Workarounds

FAQ: JavaScript SEO

Kesimpulan

Website JavaScript Tidak Muncul di Google?

Related Articles

read_more Artikel Terkait

Cara Verifikasi Google Bisnisku Tanpa Surat Pos (2026...

Panduan Google Shopping Ads 2026: Cara Menang Lawan...

Server Log Analysis: Cara Audit Crawl Budget Google...

Butuh Bantuan SEO Profesional?