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:

Wave 1: HTML Crawling (Instant) - Googlebot download HTML mentah - Parse HTML tanpa execute JavaScript - Index konten yang ada di HTML awal

Wave 2: JavaScript Rendering (Delayed) - Googlebot execute JavaScript - Render halaman seperti browser - Index konten yang muncul setelah JS execute

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:

1. High Priority: Homepage, important pages
2. Medium Priority: Category pages, popular content
3. Low Priority: Deep pages, low-traffic pages

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

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

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: 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

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: 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

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

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: 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

1. Use SSR/SSG for Important Pages

Priority: - Homepage: SSG - Category pages: SSR/SSG - Product pages: SSR - Blog posts: SSG - User dashboard: CSR (OK)

2. 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: '...' }
    ]
  }
}

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

4. Use Semantic HTML

❌ BAD:

<div onClick={handleClick}>Click me</div>

✅ GOOD:

<button onClick={handleClick}>Click me</button>

Semantic HTML helps Google understand content structure.

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

6. 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: {} };
}

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

1. Prerendering: Use services like Prerender.io or Rendertron

2. Dynamic Rendering: Serve SSR HTML to bots, CSR to users

3. 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: 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 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

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