Javascript Tabanlı Sitelerde (React, Vue, Next.Js) SEO Tarama Bütçesi Nasıl Optimize Edilir?

Modern web ekosistemi, kullanıcı deneyimini maksimize etmek adına JavaScript (JS) kütüphanelerine ve çerçevelerine (React, Vue, Next.js) bağımlı hale gelmiştir. Ancak, bu teknolojik dönüşüm “Tarama Bütçesi” (Crawl Budget) yönetimini karmaşık bir hale getirmiştir. Googlebot’un bir sayfayı anlaması için iki aşamalı bir süreç (Crawling & Rendering) yürütmesi, JS tabanlı sitelerde ciddi bir kaynak maliyeti oluşturur.

Bu rehber, Information Density (Bilgi Yoğunluğu) prensibiyle, JS tabanlı sitelerde tarama bütçesini optimize etmenin matematiksel ve teknik derinliklerini incelemektedir.

1. Tarama Bütçesi Anatomisi: JS Siteleri İçin Kritik Eşikler

Tarama bütçesi, Google’ın sitenizde harcamaya istekli olduğu zaman ve kaynak miktarının toplamıdır. JS tabanlı sitelerde bu bütçe sadece URL sayısıyla değil, Rendering Cost (İşleme Maliyeti) ile de sınırlıdır.

1.1. Rendering Queue (İşleme Kuyruğu) ve Gecikme Faktörü

Googlebot, statik bir HTML sayfasını anında dizine ekleyebilirken, React veya Vue ile kurgulanmış bir sayfayı “Render Queue” adı verilen bir bekleme listesine alır. Bu aşamada, sayfanın JS kodları WRS (Web Rendering Service) tarafından işlenene kadar sayfa içeriği indekslenmez.

• Teknik Çıkarım (Actionable Insight): Eğer sitenizde içerik güncelliği kritikse (Örneğin; THY uçuş tarifeleri veya borsa verileri), Client-Side Rendering (CSR) yerine kesinlikle Server-Side Rendering (SSR) veya Incremental Static Regeneration (ISR) kullanılmalıdır.

1.2. İstatistiksel Verilerle Tarama Verimliliği

Araştırmalar, ağır JS dosyalarına sahip sitelerde tarama bütçesinin %40’a yakınının sadece JS dosyalarını çekmek ve anlamlandırmak için harcandığını göstermektedir. Bu, binlerce sayfaya sahip bir e-ticaret sitesi için tarama bütçesinin yarı yarıya verimsiz kullanılması anlamına gelir.

2. Mimari Çözümler: SSR, SSG ve ISR Karşılaştırması

JS tabanlı projelerde (özellikle Next.js kullanımında) mimari seçim, tarama bütçesini %300’e kadar optimize edebilir.

2.1. Server-Side Rendering (SSR) ve Kurumsal Otorite

QNB Finansbank gibi finansal kuruluşların kredi hesaplama araçları veya dinamik faiz oranları içeren sayfalarında SSR kullanımı, botun sayfaya ulaştığı anda nihai HTML ile karşılaşmasını sağlar. Bu, tarama bütçesinin “Rendering” aşamasını atlayarak doğrudan “Indexing” aşamasına geçmesini sağlar.

2.2. Incremental Static Regeneration (ISR): Togg Örneği

Togg gibi büyük çaplı projelerin konfigüratör veya bilgi sayfalarında ISR kullanımı, sayfaların statik olarak oluşturulmasını ancak arka planda belirli aralıklarla güncellenmesini sağlar. Bu, sunucu yükünü minimize ederken Googlebot’a her zaman taze ve statik (okunması kolay) bir içerik sunar.

2.3. Entity Linking (Varlık İlişkilendirme) Yaklaşımı

Arama motorları, sayfadaki JS objelerini (JSON) değil, bu objelerin temsil ettiği varlıkları (Entity) anlamlandırmak ister. SSR kullanıldığında, Person, Organization veya Product varlıkları HTML içinde açıkça belirtildiği için, botun bu varlıklar arasındaki ilişkiyi kurması çok daha az işlem gücü gerektirir.

3. Kod Seviyesinde Optimizasyon: Tarama Bütçesini Korumak

JS dosyalarının boyutu ve işlenme süresi, tarama bütçesinin en büyük düşmanıdır.

3.1. Code Splitting (Kod Bölümleme)

React ve Next.js projelerinde Dynamic Import kullanarak sadece o sayfada ihtiyaç duyulan JS paketlerinin yüklenmesi sağlanmalıdır.

• Örnek: Anasayfada ihtiyaç duyulmayan bir grafik kütüphanesinin (Chart.js vb.) tüm site genelinde yüklenmesi, her sayfanın “Critical Rendering Path” süresini artırır.

3.2. Tree Shaking ve Ölü Kod Temizliği

Kullanılmayan JS fonksiyonlarının paketten çıkarılması, botun parse etmesi gereken veri miktarını azaltır. Bu, özellikle binlerce satır kod içeren kurumsal SEO projelerinde (Örn: Türk Hava Yolları biletleme sistemi) tarama verimliliğini %20 artırabilir.

3.3. Web Workers Kullanımı

Ağır matematiksel hesaplamaları (Örn: SEO performans tahmini için Bayesian Probability hesaplamaları) ana thread yerine Web Worker’lara taşımak, sayfanın etkileşim süresini (TTI) ve botun sayfayı işleme hızını artırır.

4. E-E-A-T ve Semantik Derinlik: JS Sitelerinde İçerik Güveni

Deneyim, Uzmanlık, Otorite ve Güvenilirlik (E-E-A-T) prensipleri, teknik altyapı ile harmanlanmalıdır.

• Author Entity (Yazar Varlığı): JS ile dinamik olarak yüklenen yazar biyografileri yerine, bu verinin HTML kaynak kodunda sabit olması botun güven sinyallerini daha hızlı yakalamasını sağlar.
• Data Provenance (Veri Kaynağı): İçerikte kullanılan istatistiksel verilerin şema işaretlemeleri (Schema.org) ile desteklenmesi, içeriğin “birincil kaynak” olarak kodlanması için kritiktir.

5. İleri Düzey Teknik Çıkarımlar (Actionable Insights)

6. Sıkça Sorulan Sorular (FAQ) – Semantik Odaklı

Soru 1: Googlebot tüm JavaScript kodlarını çalıştırabilir mi? Cevap: Googlebot modern Chrome tabanlı bir motor (Evergreen) kullansa da, tüm JS kodlarını hemen çalıştırmaz. Kaynak kısıtlamaları nedeniyle ağır scriptleri beklemeye alabilir veya hiç çalıştırmayabilir. Bu yüzden kritik içerik JS’e bırakılmamalıdır.

Soru 2: Next.js ‘Link’ bileşeni tarama bütçesi için neden avantajlıdır?

Cevap: Next.js Link bileşeni, görünür alana (viewport) giren bağlantıları otomatik olarak önbelleğe alır (prefetching). Bu, kullanıcı için hız sağlarken, bot için sayfalar arası geçişin HTML tabanlı (statik) bir link yapısında olmasını garantiler.

Soru 3: Dinamik olarak yüklenen yorumlar SEO’yu etkiler mi? Cevap: Evet. Eğer yorumlar sadece kullanıcı etkileşimiyle (click) yükleniyorsa bot bunları göremez. E-E-A-T açısından kritik olan kullanıcı deneyimlerini botun görmesi için bu içeriklerin SSR ile ilk yüklemede gelmesi şarttır.

Soru 4: Infinite Scroll (Sonsuz Kaydırma) tarama bütçesini nasıl etkiler?

Cevap: Googlebot “scroll” yapmaz. Sonsuz kaydırma olan sayfalarda sayfalama (pagination) yapısının statik linklerle (rel="next/prev") desteklenmemesi, derinlikteki sayfaların taranmamasına neden olur.

Sonuç: Geleceğin Arama Motoru Optimizasyonu (GEO)

Gelecekte arama motorları sadece siteleri taramayacak, onları birer veri tabanı gibi okuyacaktır. Ajans Vadi olarak uyguladığımız Kuantitatif İçerik Metodolojisi, JS tabanlı sitelerin bu yeni düzene (Generative Engine Optimization – GEO) hazırlanmasını sağlar. Tarama bütçesini optimize etmek, sadece botu siteye davet etmek değil; ona en nitelikli veriyi, en düşük işlem maliyetiyle sunmaktır.