JavaScript frameworkleri modern sitelerin çoğuna güç verir, ancak Google, JavaScript'i bir tarayıcının yaptığı gibi taramaz ve render etmez. React, Vue, Next.js, Nuxt, Angular gibi framework kullanan herhangi bir site için render pipeline'ını anlamak kritik önem taşır.
Googlebot bir sayfayı nasıl alır?
Googlebot sayfaları iki aşamada alır:
- Birinci aşama, yalnızca HTML taraması. Googlebot HTML yanıtını alır ve hemen depolar. Ham HTML'deki içerik anında dizine eklenir. JS dosyaları kuyruğa alınır ama henüz çalıştırılmaz.
- İkinci aşama, render. Tarayıcısız bir Chromium örneği ("Web Rendering Service" veya WRS) JS'i çalıştırır, DOM'u değerlendirir ve render edilmiş çıktıyı dizine ekler. Bu işlem saatlerden günlere kadar gecikebilir.
Kritik çıkarım: Yalnızca JS çalıştıktan sonra görünen içerik dizine eklenmesi günler alabilir, veya fazla tarama bütçesi tüketiyorsa hiç eklenmeyebilir.
SSR, CSR, SSG, Google gerçekte ne görür?
| Strateji | İlk aşama HTML | SEO riski |
|---|---|---|
| CSR (istemci taraflı) | <div id="root"></div>: boş kabuk |
Yüksek, tüm içerik render aşamasına ertelendi |
| SSR (sunucu taraflı) | İçerikle birlikte tam HTML | Düşük, içerik birinci aşamada |
| SSG (statik üretim) | Deploy'da önceden oluşturulmuş tam HTML | En düşük, en hızlı tarama |
Yaygın JS SEO hataları
1. Kritik meta veriler yalnızca JS ile
Yalnızca document.title veya istemci taraflı head yöneticisi aracılığıyla
ayarlanan title etiketleri, meta açıklamalar ve OG etiketleri ilk aşama HTML'de
görünmeyebilir. Bunları her zaman sunucu yanıtında render edin.
2. Soft 404'ler
Tek sayfalık uygulamalar genellikle "bulunamadı" rotaları için HTTP 200 döner. Googlebot HTTP 200 görür ve boş hata sayfasını dizine ekler. Çözüm: geçersiz rotalar için sunucudan gerçek HTTP 404 durum kodları döndürün.
3. JS event handler'larındaki iç bağlantılar
Yalnızca onclick işleyicileri olarak var olan bağlantılar HTML tarama
aşamasında Googlebot tarafından takip edilmez. SEO için önemli tüm navigasyonlarda
gerçek <a href> etiketleri kullanın.
Google'ın ne gördüğünü test etme
- Google Search Console → URL İnceleme → Taranan Sayfayı Görüntüle , Google'ın dizine eklediği gerçek HTML'yi gösterir.
curl -A googlebot https://siteniz.com/sayfa: ilk aşama HTML için yaklaşık proxy (JS çalıştırması yok).- AuditAI: ham HTTP yanıtındaki OG etiketlerini, title'ı, kanonik, hreflang ve şema varlığını kontrol eder, yalnızca JS'deki meta verileri işaretler.
Framework'e özgü ipuçları
- Next.js: SEO açısından kritik içerik için
getServerSidePropsveyagetStaticPropstercih edin. - Nuxt 3:
useHead()SSR güvenlidir.ssr: trueetkinleştirin veya SSG içinnuxt generatekullanın. - Gatsby: Varsayılan olarak tam SSG, taranabilirlik açısından en iyi durum.
Tarama bütçesi ve JS render
JS ağırlıklı büyük siteler tarama bütçesini iki kez tüketir: HTML alımı için bir kez, render için bir kez. Stratejiler:
- Dizine eklenmesini istemediğiniz sayfalara
noindexekleyin. - İnce sayfalandırılmış sayfaları kanonik ile kök kategoriye yönlendirin.
- Sitemap'inizi yalnızca dizine eklenmesi gereken URL'lerle sıkı tutun.
İlgili: Teknik SEO Kontrol Listesi · Core Web Vitals Rehberi · Sayfa Hızı 80/20 Kazanımları
AuditAI ile Google'ın sitenizi nasıl gördüğünü kontrol edin →