JavaScript SEO: Dinamik Rendering ve Edge SSR Çözümleri

Modern web ekosisteminde React, Vue, Angular ve Svelte gibi istemci taraflı (Client-Side Rendering - CSR) JavaScript framework’leri olağanüstü interaktif kullanıcı deneyimleri sunar. Ancak arama motoru botları (Googlebot, Bingbot, YandexBot) bir sayfaya istek attığında, sunucudan yalnızca boş bir HTML iskeleti (<div id="app"></div>) ve megabaytlarca JavaScript dosyası dönerse dizine ekleme süreci sekteye uğrar.

Googlebot JavaScript kodlarını çalıştırmak için İki Aşamalı İndeksleme (Two-Wave Indexing) mekanizması kullanır; sayfalar render kuyruğunda (Render Queue) günlerce veya haftalarca bekleyebilir. Bu darboğazı aşmak için Dinamik Rendering (Dynamic Rendering) ve Edge Sunucu Tabanlı SSR mimarileri uygulanmalıdır.

1. Googlebot’un İki Aşamalı İndeksleme (Two-Wave Indexing) Döngüsü

[1. Aşama: İlk Tarama] ──> Sunucu Boş HTML Yollar ➔ Bot Metni Okuyamaz ➔ Sayfa "Render Queue" Kuyruğuna Atılır!
                                                                                    │
                                                                       (Günler / Haftalar Sonra)
                                                                                    ▼
[2. Aşama: WRS Render] ──> Web Rendering Service (WRS) JS'i Derler ➔ DOM Çıkar ➔ Geç İndeksleme Gerçekleşir!

2. Dinamik Rendering ve Edge Pre-rendering Mimarisi

Dinamik rendering, gelen isteğin bir kullanıcı mı yoksa bir arama motoru botu mu olduğunu User-Agent üzerinden tespit ederek iki farklı çıktı sunar:

                                  [Gelen HTTP İsteği]
                                           │
                    ┌──────────────────────┴──────────────────────┐
                    ▼                                             ▼
        [Normal Kullanıcı İsteği]                     [Googlebot / Bingbot / AI Bot]
                    │                                             │
                    ▼                                             ▼
           [Saf SPA React Kodu]                        [Cloudflare Worker / Prerender]
        (Hızlı İstemci Deneyimi)                     (Önceden Derlenmiş Statik %100 HTML)

3. Cloudflare Workers ile Edge Dinamik Render Kodu

Aşağıdaki Cloudflare Worker betiği, gelen bot isteklerini tespit edip Puppeteer tabanlı bir prerender servisine yönlendirir:

export default {
  async fetch(request, env, ctx) {
    const userAgent = request.headers.get('User-Agent') || '';
    const botPattern = /googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator/i;

    const isBot = botPattern.test(userAgent);
    const url = new URL(request.url);

    // Statik dosyalarda prerender yapma
    if (url.pathname.match(/\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|woff|ttf|svg|webmanifest)$/i)) {
      return fetch(request);
    }

    if (isBot) {
      const prerenderUrl = `https://service.prerender.io/${request.url}`;
      const newHeaders = new Headers(request.headers);
      newHeaders.set('X-Prerender-Token', env.PRERENDER_TOKEN);

      const botResponse = await fetch(prerenderUrl, {
        headers: newHeaders,
        method: request.method
      });

      return botResponse;
    }

    return fetch(request);
  }
};

4. JavaScript SEO’da En Sık Yapılan 3 Hata

1. Linkleri onClick ile Çalıştırmak: <span onclick="location.href='/sayfa'"> botlar tarafından asla taranmaz; daima geçerli <a href="/sayfa"> etiketi kullanılmalıdır.
2. Infinite Scroll (Sonsuz Kaydırma) İçeriklerini Gömememek: Kullanıcı kaydırdıkça JS ile yüklenen ürünler botlar tarafından görülemez; sayfalı fallback sunulmalıdır.
3. Kritik İçeriği Kullanıcı Etkileşimi Arkasına Gizlemek: Sayfa ilk yüklendiğinde DOM’da bulunmayan ve sadece butona tıklandığında gelen içerikler indekslenmez.

Sıkça Sorulan Sorular

Dynamic Rendering bir Cloaking (Arama motorunu yanıltma) cezası mıdır?

Hayır. Google resmi dokümantasyonunda; botlara ve kullanıcılara aynı içeriğin sadece farklı render edilmiş formatı sunulduğu sürece dinamik rendering’in tamamen meşru bir geçiş çözümü olduğunu belirtmiştir.

En kalıcı JavaScript SEO çözümü nedir?

En kalıcı ve sürdürülebilir mimari, projeyi saf SPA’dan çıkarıp Next.js (App Router), Nuxt veya Astro gibi doğrudan sunucu tarafında (SSR/SSG) HTML üreten modern hibrit mimarilere taşımaktır.

Stratejik Sonuç

JavaScript SEO optimizasyonu, uygulamanızın modern yazılım hızını arama motorlarının tam tarama kapasitesiyle birleştirir. İleri düzey JS ve headless web mimarileri için özel yazılım çözümlerimizi inceleyin.

İlgili Yazılar

• JavaScript SEO: SPA ve SSR Siteler İçin Rehber 2026
• Yerel SEO Nedir? Google İşletme Profili ve Bölgesel Görünürlük
• Teknik SEO Nedir? Tarama, İndeksleme ve Site Hızı Rehberi
• SEO Ajansı Nedir? Ne İş Yapar, Nasıl Seçilir?
• İçerik SEO Nedir? Arama Niyeti ve Cluster Kurulumu Rehberi

Daha kapsamlı destek için: SEO Danışmanlığı hizmetimize göz atın.