Web Sayfalarının Raw ve Render Versiyonlarının Kıyaslanması

Genellikle web geliştiriciler ve SEO uzmanları tarafından göz ardı edilen önemli konulardan biri, sayfaların yalnızca son versiyonunun kontrol edilmesi oluyor.

Yapılan analizlerde, örümceklerin gördüğü web sayfası ile son kullanıcının gördüğü web sayfası arasındaki tutarlılık kontrol edilmiyor.

Ancak, özellikle hız optimizasyonu (!) yapılmış veya müşteriye özel geliştirilmiş projelerde, sayfanın raw (ham) ve render (işlenmiş) versiyonları arasındaki tutarsızlıklar ön plana çıkıyor.

Neden Oluyor?

Web sayfaları yüklenirken, web sitelerinin kaynak kodlarında hangi dosyaları öncelikli olarak yüklenmesi gereki veya hangilerinin ertelenebileceği belirtilir. Örneğin, bazı javascript dosyalarının yüklenmesinin ertelenmesi (defer işlemi), kullanıcı deneyimi açısından sorun teşkil etmiyorsa ve fonksiyonel bir sorun oluşturmuyorsa ertelenebilir.

Ancak, erteleme işlemi kritik dosyaları etkiliyorsa ve sayfa başlıkları gibi önemli unsurların geç yüklenmesine neden oluyorsa, bu durum SEO açısından ciddi problemlere neden oluyor olabilir.

Neye Sebep Olur?

Bir web sayfasında herhangi bir nesnenin belirli bir aşamaya raw halinin sunulması, gerçek kullanıcı ile Googlebot gibi örümceklerin farklı versiyonlar görmesine neden olur.

Modern tarayıcılar web sayfalarını oldukça hızlı render ettiği için biz kullanıcılar bu farkı genellikle fark edemeyiz. Ancak, Google sayfanın tamamını yüklerken geçtiği aşamaları detaylı bir şekilde incelediğinden, bu tür farklılıkların SEO üzerinde olumsuz etkileri olabilir.

Gerçek Vaka: Kopya Kategori Başlıkları

Günlük ortalama 1.300 organik trafiğe sahip bir e-ticaret sitesinin analizini yaparken, Screaming Frog ile yapılan tarama sonucunda, tüm kategori sayfalarının aynı H1 etiketine sahip olduğu tespit edildi.

Detaylı inceleme sonucunda, sayfa başlığının API ile uzak bir veritabanından çekildiği anlaşıldı. Aynı zamanda sayfa tam yüklenene kadar, H1 etiketinin bir yer tutucu (Placeholder) ile ekrana basıldığı görüldü.

Başka bir deyişle, gerçek kategori başlığı yüklenene kadar sayfada sadece bir değişken ismi (bu vakada “Urunler”) yer alıyordu.

Yalnızca bu işlemin düzeltilmesi, web sitesindeki on binlerce kategori sayfasının Google’a daha doğru bir semantik yapıyla sunulmasına katkı sağladı.

Gerçek Vaka: No Hotlinking

2024 yılında Google tarafından kullanımına son verilen bir Chrome özelliği vardı: Cache.

“cache” operatörü ile bir web sayfasının Google tarafından nasıl önbelleğe alındığını, yani nasıl tarandığını görüntülenebiliyordu.

Bir marka için yaptığımız analiz çalışmasında, bazı ürün görsellerinin sunucu tarafından korumaya alındığını fark ettik. Bu koruma nedeniyle, görseller Google tarafından düzgün bir şekilde taranamıyor ve ürün görseli yerine “No Hotlinking” ibaresi görüntüleniyordu.

“cache” operatörü artık kullanılamasa da, bir web sayfasının çeşitli araçlarda bu şekide analiz edilmesinin önemi bu örnekte çok daha net anlaşılıyor. Çünkü Google’ın görüntüleyemediği bir ürün görseliniz varsa, web siteniz ne kadar hızlı ve SEO uyumlu olursa olsun başarısız olmanız kaçınılmazdır.

Nasıl Kontrol Edilir?

View Rendered Source

Yıllardır güvenle kullandığım bir Chrome eklentisi, web sayfası yüklenirken bu durumu kontrol ediyor.

View Rendered Source, eklentisini aktif ettikten sonra web sayfanızı yenileyerek sayfanın raw ve render hallerinin farkını kıyaslayabilirsiniz.

Bu test yöntemi ile web sitelerinizin başlangıçtaki ve sondaki farklarını analiz edebilirsiniz.

Yapılandırılmış Veri Test Araçları

Google PageSpeed Insights ve Schema Validator gibi araçlar web sayfasının örümcekler tarafından nasıl görüntülendiğini gösterirler. Bu nedenle, bir web sayfasının doğru yüklenip yüklenmediğini analiz etmek için uzun süredir bu online servisleri aktif olarak kullanıyorum.

Her ne kadar yalnızca bu işe özel geliştirilmiş araçlar kadar detaylı sonuç vermeseler de, yüzeysel bir analiz yapmak için gayet yeterli olduklarını düşünüyorum.

Screaming Frog ve Sitebulb

Bu iki SEO analizi aracı ile de, bir web sayfasının raw ve render versiyonlarını kıyaslayabilirsiniz.

Dikkat

Bir web sayfasının raw ve render halleri arasında elbette farklılıklar olabilir. Burada dikkat edilmesi gereken temel husus, arama motorlarının gördüğü versiyonlarda, özellikle SEO’yu etkileyecek büyük sorunlar olup olmadığını anlamaktır.

Nasıl Çözülür

Bir sayfanın render edilme süreci genellikle iki farklı şekilde tamamlanır: Serverside ve Client-side.

Server-side Rendering (SSR – Sunucu Taraflı İşleme)

Server-side rendering yapıldığı durumda, sayfayı ziyaret eden kullanıcının tarayıcısı yükleme isteğinde bulunduğunda, sunucu bu isteği alır ve gerekli tüm işelmleri sunucuda gerçekleştirir. Örneğin veritabanına bağlanır, sorgularını yapar ve HTML şablonuna verieri ekleyip tam anlamıyla oluşturulmuş HTML’i tarayıcıya gönderir.

Client-side Rendering (CSR – Müşteri Taraflı İşleme)

Bazı durumlarda ise, tarayıcı ilk başta minimal bir HTML iskeleti alır. Asıl içerik, JavaScript kodlarının çalışmasıyla tarayıcı tarafında “render” edilir.

Yukarıdaki vakada anlatıldığı gibi, sayfadaki H1 etiketinin sunucuda placeholder olarak yer alması, ama tarayıcı tarafında (JavaScript sonrası) farklı bir metnin gösterilmesi büyük bir tutarsızlık yaratır.

Hibrit Yaklaşım: En Doğru Çözüm

Modern Javascript kütüphaneleri (Next.js veya NuxtJS gibi) yükleme hızı konusunda çok büyük avantajlar sunuyor. Bu sebeple, tüm işlemleri sunucu tarafında yapmanın da mantıklı bir seçenek olmadığı aşikar.

Her iki işleme metodunun da birbirine göre avantajları ve dezavantajları olsa da, SEO’yu etkileyen tüm öğelere sunucuda render edilerek yüklenmesi ve diğer öğelerin tercihen müşteri taraflı render edilmesi en doğru çözüm yöntemi olarak görünüyor.