Modern arayüz geliştirme kütüphaneleri, web sitelerinde temel olarak 2 farklı şekilde karşımıza çıkıyor. Bu ayrım, web sitelerinin HTML versiyonlarının tarayıcı ya da sunucu tarafında oluşturulmasından kaynaklanıyor. Biz SEO uzmanlarının ilgilenmesi gereken kısım da burada başlıyor. Şimdi gelin bu iki yöntemi biraz daha yakından tanıyalım:
Client-side rendering (CSR): Kullanıcı Tarafında Oluşturma
Server-side rendering (SSR): Sunucu Tarafında Oluşturma
1. GoogleBot ilk dalga tarama için sayfaya girer ve HTML’i talep eder. Gönderilen HTML ve CSS taranır, Google indeksine eklenir. Aynı zamanda sayfada bulunan linkler tarama sırasına ve bu linklerin durum kodları da veritabanına eklenir.
Bu klasik sayfalara yapılan tarama ve indeksleme işleminin aynısıdır. GoogleBot HTML yanıtınızda gördüğü kadarıyla içeriğinizi anlamaya ve kullanıcıların karşısına çıkarmaya başlar.
Client-side rendering (CSR): Kullanıcı Tarafında Oluşturmaya SEO Açısından Bakış
Kullanıcı veya arama motorunun tarayıcısı https://example.com/a-sayfasi adresinize istek yapar.
Sunucu isteği kabul eder ve yanıt döner.
Tarayıcı, içeriği ve beraberindeki JS dosyalarını indirir.
Tarayıcı içeriği görülebilir kılmak için JS dosyalarını çalıştırır.
İçerik kullanıcılar ve botlar tarafından işlenebilir hale gelir.
Aşağıdaki görselde ReactJS için hazırlanmış örnek CSR diagramını görebilirsiniz.
Bu işlem oldukça sıradan gözüküyor fakat işler burada biraz karmaşık hale geliyor.. Yukarıda da bahsettiğimiz gibi taranması gereken milyonlarca hatta milyarlarca sayfa olduğunu düşündüğümüzde Google’ın (her ne kadar sınırsız sansak da) sınırlı kaynakları bu konuda yetersiz kalıyor.
Dinamik Oluşturma (Dynamic Rendering):
Dinamik oluşturma temelde kullanıcı tarafında oluşturulan (CSR) web sitelerinin SEO uyumlu olması için kullanılan bir yöntemdir. Temel fark GoogleBot’a ve kullanıcılara farklı HTML döndürmek üzerine kuruludur.
Sunucunuza bir istek geldiğinde sunucunuz gelen isteğin GoogleBot tarafından mı yoksa kullanıcı tarafından mı yapıldığını anlar. Eğer GoogleBot tarafından yapılıyorsa sunucuda oluşturulmuş bir HTML yanıtı döner. Diğer kullanıcılar sitenizi yine CSR olarak kullanmaya devam ederler.
Bu konuda daha detaylı bilgi almak için ZEO ekibinden arkadaşımız Samet Özsüleyman tarafından yazılmış Dynamic Rendering Nedir ve Test Aşamaları Nelerdir? adlı makaleyi tavsiye ediyorum.
Server-side rendering (SSR): Sunucu Tarafında Oluşturmaya SEO Açısından Bakış
Yukarıda yaptığımız gibi öncelikle GoogleBot veya kullanıcı fark etmeksizin bir talep geldiğinde süreç nasıl işliyor bir bakalım. Bu sayede daha rahat anlayabileceğiz:
Sunucu isteği kabul eder, HTML’in tamamını oluşturur ve yanıtı döner.
Tarayıcı oluşturulmuş HTML’i ve beraberindeki JS dosyalarını indirir.
Tarayıcı sayfanın modern arayüz geliştirme kütüphanelerinin faydalarından yararlanmak için JS dosyalarını çalıştırır.
Site etkileşime girilebilir hale gelir.
Aşağıda ReactJS için hazırlanmış örnek SSR diagramını bulabilirsiniz.
SSR, yani sunucu tarafında oluşturma, Google tarafından desteklenen bir yapıdır. Alakalı dökümantasyonu okumak için buraya (İngilizce) tıklayabilirsiniz.
Modern arayüz geliştirme kütüphaneleri ile yapılan web siteleri CSR ve SSR olarak iki çeşitte kurgulanabiliyor ve temel trafik kaynağımız olan Google Botları bu iki teknolojiden CSR’ı pek sevmiyor ve sağlıklı olarak tanıma sözü veremiyor. Bu durumda cevap da netleşiyor; hali hazırda CSR ile hazırlanmış ve indeksleme problemi olan bir web siteniz varsa dinamik oluşturma sizin için uygulanabilir görünüyor. Fakat sıfırdan kodlama yapılacaksa SSR’ı mantıklı görüyoruz.
Aşağıdaki tabloda görebileceğiniz gibi SSR entegrasyonu için bazı kütüphaneler native olarak destek verirken bazı kütüphaneler için ek çözümlere ihtiyaç duyulabiliyor. Burada asıl dikkat edilmesi gerek nokta, piyasanın büyük çoğunluğunu oluşturan aşağıda listelenen 3 kütüphane için de çok iyi çalışan SSR entegrasyonlarının bulunmasıdır.
Kütüphane SSR Çözümü
React Next.js, Gatsby
Angular Angular Universal
4 BLOG İÇERİKLERİ