Menu
📱 Lihat versi lengkap (non-AMP)
SEO

JavaScript SEO: Panduan Rendering dan Indexing untuk Website Modern

Editor: Hendra WIjaya
Update: 8 December 2025
Baca: 4 menit

Pendahuluan

Website modern semakin banyak menggunakan JavaScript framework seperti React, Vue, dan Angular. Namun, JavaScript bisa menjadi tantangan untuk SEO jika tidak ditangani dengan benar. Artikel ini membahas cara mengoptimasi website JavaScript agar tetap SEO-friendly.

Bagaimana Google Merender JavaScript?

Proses Rendering Google

  1. Crawling - Googlebot mengunduh HTML
  2. Queueing - Halaman masuk antrian render
  3. Rendering - Googlebot merender JavaScript
  4. Indexing - Konten yang sudah dirender diindeks

Tantangan JavaScript SEO

  • Render delay - Ada jeda antara crawl dan render
  • Render budget - Google punya batasan resource untuk render
  • JavaScript errors - Error bisa mencegah konten terrender
  • Dynamic content - Konten yang dimuat async mungkin terlewat

Jenis-jenis Rendering

1. Client-Side Rendering (CSR)

Rendering dilakukan sepenuhnya di browser user.

Contoh: Create React App default

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

Masalah SEO:

  • HTML awal kosong
  • Googlebot harus menunggu render
  • Risiko konten tidak terindeks

2. Server-Side Rendering (SSR)

Server merender HTML lengkap sebelum dikirim ke browser.

Contoh: Next.js, Nuxt.js

<!-- HTML yang dikirim server (sudah lengkap) -->
<div id="root">
  <h1>Judul Artikel</h1>
  <p>Konten lengkap sudah ada...</p>
</div>
<script src="bundle.js"></script>

Keuntungan SEO:

  • HTML lengkap saat crawl
  • Tidak perlu menunggu render
  • Lebih cepat terindeks

3. Static Site Generation (SSG)

HTML digenerate saat build time, bukan runtime.

Contoh: Gatsby, Hugo, Next.js static export

Keuntungan:

  • Performa tercepat
  • SEO optimal
  • Tidak perlu server-side processing

4. Incremental Static Regeneration (ISR)

Kombinasi SSG dengan kemampuan update tanpa full rebuild.

Contoh: Next.js ISR

export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 60, // Regenerate setiap 60 detik
  };
}

5. Dynamic Rendering

Server mendeteksi bot dan memberikan versi pre-rendered.

User Browser → Client-Side Rendered
Googlebot → Pre-Rendered HTML

Tools:

  • Rendertron (Google)
  • Prerender.io
  • Puppeteer

Best Practices JavaScript SEO

1. Gunakan SSR atau SSG untuk Konten Penting

Pastikan konten utama ada di HTML awal:

// Next.js dengan getServerSideProps
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

2. Implementasi Proper Meta Tags

Meta tags harus ada di HTML awal, bukan diinject via JavaScript:

// Next.js
import Head from "next/head";

export default function Page() {
  return (
    <>
      <Head>
        <title>Judul Halaman | Website</title>
        <meta name="description" content="Deskripsi halaman" />
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>...</main>
    </>
  );
}

3. Hindari Soft 404

Pastikan halaman 404 mengembalikan status code 404:

// Next.js
export async function getServerSideProps(context) {
  const data = await fetchData(context.params.id);

  if (!data) {
    return { notFound: true }; // Return 404
  }

  return { props: { data } };
}

4. Gunakan History API untuk Routing

// React Router dengan history mode
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Hindari hash-based routing (#) untuk konten penting.

5. Lazy Load dengan Benar

// Lazy load images
<img loading="lazy" src="image.jpg" alt="Description" />;

// Lazy load components (jangan untuk konten above-the-fold)
const HeavyComponent = lazy(() => import("./HeavyComponent"));

6. Structured Data

Inject structured data di server-side:

// Next.js
<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Article",
        headline: "Judul Artikel",
        author: "Nama Author",
      }),
    }}
  />
</Head>

7. XML Sitemap

Generate sitemap yang mencakup semua halaman:

// next-sitemap.config.js
module.exports = {
  siteUrl: "https://example.com",
  generateRobotsTxt: true,
  sitemapSize: 5000,
};

Testing JavaScript SEO

1. Google Search Console

  • URL Inspection Tool untuk melihat rendered HTML
  • Coverage report untuk indexing issues

2. Mobile-Friendly Test

Test bagaimana Google merender halaman:
https://search.google.com/test/mobile-friendly

3. Rich Results Test

Cek structured data:
https://search.google.com/test/rich-results

4. Chrome DevTools

Disable JavaScript untuk melihat HTML awal:

  1. Buka DevTools (F12)
  2. Settings → Preferences
  3. Debugger → Disable JavaScript
  4. Refresh halaman

5. View Source vs Inspect

  • View Source - HTML yang dikirim server
  • Inspect Element - HTML setelah JavaScript dirender

Framework-Specific Tips

React

Gunakan Next.js untuk SEO:

  • Built-in SSR/SSG
  • Automatic code splitting
  • Image optimization
  • API routes
npx create-next-app@latest my-app

Vue

Gunakan Nuxt.js:

  • SSR out of the box
  • Static site generation
  • Auto-imports
npx nuxi init my-app

Angular

Gunakan Angular Universal:

  • Server-side rendering
  • Pre-rendering
ng add @nguniversal/express-engine

Common JavaScript SEO Issues

1. Konten Tidak Terindeks

Penyebab:

  • JavaScript error
  • Timeout saat render
  • Blocked resources

Solusi:

  • Test dengan URL Inspection
  • Cek JavaScript errors
  • Gunakan SSR

Buruk:

<a onclick="navigate('/page')">Link</a>
<span class="link" data-href="/page">Link</span>

Baik:

<a href="/page">Link</a>

3. Duplicate Content

Masalah: URL dengan dan tanpa trailing slash

Solusi: Canonical URL dan redirect

// next.config.js
module.exports = {
  trailingSlash: false,
};

4. Slow Time to First Byte (TTFB)

Solusi:

  • Caching
  • CDN
  • Edge rendering

Checklist JavaScript SEO

Development

  • Pilih rendering strategy yang tepat (SSR/SSG)
  • Meta tags di HTML awal
  • Proper URL structure
  • Internal linking dengan href
  • Structured data
  • XML sitemap

Testing

  • URL Inspection di GSC
  • Mobile-Friendly Test
  • View Source check
  • JavaScript error check
  • Performance test

Monitoring

  • Coverage report di GSC
  • Core Web Vitals
  • Index status
  • Crawl stats

Artikel Terkait

Kesimpulan

JavaScript SEO memerlukan perhatian khusus:

  1. Pilih rendering strategy yang tepat (SSR/SSG untuk SEO kritis)
  2. Pastikan konten penting ada di HTML awal
  3. Test secara berkala dengan tools Google
  4. Monitor indexing melalui Search Console
  5. Gunakan framework modern yang SEO-friendly

Dengan pendekatan yang benar, website JavaScript bisa sama SEO-friendly dengan website tradisional.

Bagikan:

Link Postingan: https://www.tirinfo.com/javascript-seo-panduan-rendering-dan-indexing-untuk-website-modern/