Dinamik rendering sunucunun gelen isteğin bot mu kullanıcı mı olduğuna bakıp arama motoru botlarına önceden işlenmiş statik HTML, kullanıcılara ise JavaScript ile tarayıcıda oluşan sayfayı göndermesidir. Google bu yöntemi artık önermiyor ve geçici bir çözüm olarak görüyor. Kalıcı çözüm sunucu tarafı rendering, statik rendering ya da hydration'dır.
Dinamik rendering nasıl çalışır?
Dinamik rendering isteği yapan tarafı user agent bilgisinden tanıyıp iki farklı yanıt üreterek çalışır. Akış şöyledir:
- Kullanıcı sayfayı açtığında sunucu boş bir HTML iskeleti ve JavaScript dosyalarını gönderir. Sayfa tarayıcıda oluşur.
- Googlebot ya da başka bir bot geldiğinde istek bir rendering servisine yönlendirilir.
- Bu servis sayfayı başsız bir Chrome içinde çalıştırır ve ortaya çıkan tam HTML'i bota gönderir. Sonuç çoğu zaman önbellekte tutulur.
Bu iş için Prerender.io gibi hazır servisler ya da Puppeteer tabanlı kendi kurulumlar kullanılır. Google'ın bir dönem örnek olarak gösterdiği Rendertron projesi artık geliştirilmiyor.
Dinamik rendering sık sık sunucu tarafı rendering (SSR) ile karıştırılır. SSR'da herkes aynı hazır HTML'i alır. Dinamik rendering'de ise bot ile kullanıcı farklı yollardan beslenir. Bu fark yöntemin hem neden işe yaradığını hem de neden sorun çıkardığını açıklar.
Google dinamik rendering'i neden artık önermiyor?
Google dinamik rendering'i kalıcı bir mimari değil, JavaScript'i işleyemeyen botlar için bir ara çözüm olarak görür. Google'ın dinamik rendering dokümantasyonu bunu açıkça yazar ve yerine sunucu tarafı rendering, statik rendering ya da hydration önerir.
Bu tavsiyenin arkasında üç pratik neden var. Googlebot bugün güncel Chrome sürümüyle JavaScript çalıştırabildiği için ona ayrı sürüm hazırlama ihtiyacı büyük ölçüde ortadan kalktı. Bota giden sürüm ile kullanıcının gördüğü sürümün aynı kalması sürekli bakım ister. Rendering servisi de ek bir altyapı maliyeti ve arıza noktası demektir.
Dinamik rendering kendi başına cloaking sayılmaz. İki sürümün içeriği benzer olduğu sürece Google bunu kabul eder. Bota farklı metin, farklı link ya da kullanıcıda olmayan bir içerik sunulursa durum cloaking'e döner ve manuel işlem riski doğar.
SEO için hangi rendering yöntemi daha güvenli?
SEO için dinamik rendering yerine hem kullanıcıya hem bota aynı hazır HTML'i veren yöntemler daha güvenlidir. Seçenekler şunlardır:
- Sunucu tarafı rendering (SSR): Sayfa her istekte sunucuda oluşturulur. Next.js, Nuxt ve Angular gibi çatılar bunu hazır destekler. Sık değişen içerikte uygundur ama sunucu yükünü artırır.
- Statik rendering: Sayfalar yayın anında HTML olarak üretilir ve içerik dağıtım ağından (CDN) sunulur. Blog, doküman ve kurumsal sayfalarda en hızlı, en ucuz yoldur.
- Hydration: Sunucudan gelen hazır HTML tarayıcıda JavaScript ile etkileşimli hale getirilir. Kullanıcı içeriği hemen görür, bot da tam HTML alır.
- Tamamen istemci tarafı rendering (CSR): Google bu sayfaları da işleyebilir ama içerik ikinci aşamada, gecikmeyle görülür. Aramada görünmesi gereken sayfalar için riskli tercihtir.
Hangi yöntemin seçildiği hızı da doğrudan etkiler. Tamamen tarayıcıda oluşan bir sayfada ana içerik JavaScript indirilip çalıştırıldıktan sonra görünür. Bu gecikme Core Web Vitals tarafında Largest Contentful Paint (LCP) değerini kötüleştirir. Ağır JavaScript ise Interaction to Next Paint (INP) değerini yükseltir.
Geçici çözüm olarak hangi durumda kullanılabilir?
Dinamik rendering mevcut bir JavaScript uygulamasını kısa sürede SSR'a taşımanın mümkün olmadığı durumlarda geçici çözüm olarak kullanılabilir. Büyük bir e-ticaret ya da ilan sitesinde ürün sayfalarının dizine girmemesi ciddi kayıpsa ve yazılım ekibinin geçiş planı aylar sürecekse geçici çözüm mantıklıdır.
Bu durumda kurulum sonrası şunları kontrol edin:
- Search Console URL denetleme aracında "Test edilmiş sayfayı görüntüle" ile Google'ın aldığı HTML'i inceleyin. Başlık, metin, iç linkler ve yapılandırılmış veri eksiksiz olmalı.
- Bota giden sürüm ile kullanıcı sürümünü düzenli karşılaştırın. Fiyat, stok ya da başlık farkı zamanla oluşur.
- Rendering servisi hata verdiğinde bota boş sayfa gitmediğinden emin olun. Önbellek süresini içeriğin değişme sıklığına göre ayarlayın.
- Geçişi bir takvime bağlayın. Dinamik rendering kalıcı bir çözüm olarak kalmamalı.
Lazy loading içeriğin görünmesini nasıl etkiler?
Doğru kurulan lazy loading içeriği gizlemez, yanlış kurulan ise Googlebot'un içeriği görmesini engelleyebilir. Bu teknik rendering yönteminden bağımsızdır. Görsellerde tarayıcının yerel loading="lazy" özelliği yeterlidir ve Google bunu sorunsuz işler.
Hatalı kullanım ise iki şekilde olur. İlk ekranda görünen ana görseli lazy yüklemek LCP'yi geciktirir. İçeriği yalnız kaydırma olayıyla yüklemek de sorun çıkarır, çünkü Googlebot sayfayı kaydırmaz ve o içeriği hiç görmeyebilir.
JavaScript'in taramaya etkisini JavaScript ve SEO yazımızda daha geniş ele aldık. Rendering kararı teknik SEO'nun diğer parçalarıyla birlikte düşünülmelidir. Teknik SEO'nun parçalarını teknik SEO konusundaki rehberimizde sıraladık. JavaScript tabanlı bir sitenin dizine eklenme sorunlarını birlikte incelemek isterseniz teknik SEO desteğimiz hakkında bilgi alabilirsiniz.