Nisan 27th, 2020

Javascript SEO – CSR Nedir ? SSR Nedir ?

Javascript kaynaklarının render edilmesi SEO çalışmalarında önemli bir rol oynuyor. Render işlemi uzun ve görece maliyetli bir süreç. İnternet sitelerinin önünde iki yol var, render işlemi tarayıcı tarafında yani Client Side Rendering ( CSR ) veya sunucu tarafında yani Server Side Rendering (SSR) ile yapılabilir. Peki Javascript SEO için hangi yolu tercih etmeliyiz ?

Javascript Nedir ?

Javascript dünya üzerinde fazlaca kullanılan tarayıcı bazlı bir betik dilidir. Tarayıcının kullanıcı ile etkileşime girmesi, tarayıcının kontrol edilmesi, sayfanın 3. parti kaynaklarla iletişime geçmesi gibi aksiyonları sağlar. Modern front-end kütüphaneleri component ( React JS, Vue JS, Angular JS vb. ) mantığı ile yeni bir çağ başlamış ve Javascript’e doğru ekstra bir eğilim oluşturmuştur.

Bir internet sitesini basit düzeyde anlamamız gerekirse 3 ana parçadan olur.

1. HTML – İntertnet sitenizin iskeleti ve içerik alanı olarak düşünebiliriz. Tamamı Html’den oluşan bir sayfa size bilgi verebilir ama görsel olarak daktilo çıktısına benzer.

2. CSS – HTML iskelete görsellik katan alan CSS kodlamasıdır. CSS sayesinde bu internet sayfalarını, tasarımıyla daha güzel bir şekilde görüntüleyebiliriz.

3. Javascript – Bir internet sitesinin dinamik içerik üretmesini sağlayan programla dili. Yani bir butona bastığınızda değişik aksiyonların alınması, örneğin butonun renginin değişmesi gibi.

Javascript dünya üzerinde en fazla kullanılan dillerden bir tanesi. Yukarıda basit bir anlatım yaptık. Javascript sadece butonu renklendirelim demek değil. Tam tersine en esnek dillerden bir tanesi. Javascript ile mobil uygulama yazabilir, Single Page Application‘lar oluşturabilir, Node.Js ile sunucu kurabilir, Electron ile masaüstü uygulamalar oluşturabilirsiniz.

Statista – Stackoverflow -Yazılımcılar tarafından çok kullanılan programla dilleri 2019

Google Gözünde Javascript’i Diğer Dillerden Ayıran Durum Nedir ?

Kullandığınız tarayıcılar render engineleri sayesinde yazılan kodları HTML CSS ve JS’ye parse ederek sizlere sunarlar. Bu sebeple kullanılan dil ne olursa olsun ( PHP, Pyhton, JS.. ) sayfanın öncelikle render edilmesi gerekir.

PHP, Pyhton gibi diller server-side dillerdir. Yani sunucu tarafında render edilirler. Javascript ise hem server tarafında ( Server-Side Rendering, SSR) hem de doğası gereği tarayıcı tarafında ( Client-Side Rendering, SSR ) render edilebilirler.

Server Side Rendering Nedir ?

SSR, Server Side Rendering, sunucu tabanlı render işlemine denir. Bir istek yapıldığında sunucu tarafında istek işlenir, kodlar derlenir ve çıktı tarayıcıya iletilir. Google Server Side Rendering yapılan bir siteyi tararken kabaca aşağıda ki gibi ilerler.

  1. HTML dosya indirilir,
  2. İçeriği okunur, aynı zamanda sayfa içerisindeki linkler takip edilerek diğer sayfalara ulaşılır.
  3. CSS ve JS indirilir ve içeriği okunur.
  4. Tüm indirilen dosyalar indexlenmek için Google Indexer’a iletilir.

Avantajları Nelerdir ?

En önemli avantajı SEO friendly yaklaşımıdır. Tüm sayfalar ayrı bir şekilde render edilir ve tarayıcıya / botlara sunulur.

Tüm sayfalara özel meta çalışmaları yapılabilir. Tüm sayfalara özel geliştirmeler sağlanabilir.

Dezavantajları Nelerdir ?

Client Side Rendering kadar etkileşimli değildir. Örnek vermek gerekirse saniyelik önemli verilerin aktığı bahis, borsa gibi sitelerde CSR kadar etkili değildir.

Ayrıca sunucu tarafında bir yük oluşacağı için ilk yükleme TTFB CSR’ye nazaran daha yüksek olması beklenir.

Client Side Rendering Nedir ?

CSR, Client Side Rendering, isteğin tarayıcı tarafında render edilmesidir. Böylelikle sunucu tarafında çok fazla bir işlem yükü oluşmaz. Google Client Side Rendering yapılan bir siteyi tararken kabaca aşağıda ki gibi ilerler.

  1. Html dosya indirilir,
  2. İçeriği okunur, aynı zamanda sayfa içerisindeki linkler takip edilerek diğer sayfalara ulaşılır.
  3. İçeriğin önemli bir kısmı JS olduğu için JS kaynakları indirilir ve içeriği okunur render edilmek üzereye sıraya alınır.
  4. CSS indirilir ve içeriği okunur.
  5. İçeriği okunan JS render edilir ve sonuca ulaşılır.
  6. Tüm indirililen dosyalar indexlenmek için Google Indexer’a iletilir.

Avantajları Nelerdir ?

Çoğu istek tarayıcı tarafında çözümleneceği için, eşsiz bir kullanıcı deneyimi sunabilir. Anlık veri akışı ihtiyacı olan sistemlerde sıklıkla kullanılır.

TTFB, SSR’e oranla daha hızlıdır. Sunucuda çok fazla yük birikmez.

Dezvantajları Nelerdir ?

Tüm sayfalar Single Page Application mantığında oluşacağı için Googlebot okuma konusunda zorlanabilir.

Her sayfaya özel meta çalışmaları problemler oluşturacaktır.

Sanal DOM üzerinde oluşturulacak içerikler Googlebot tarafından okunmayacaktır.

Google Javascript kodları Okuyabiliyor mu ?

Googlebot geçtiğimiz yılın Ağustos ayına kadar Chrome 41 ile ( biraz ilkel kalan bir sürüm ) internet sitelerini tarıyordu. Bunun bir diğer anlamı internet sitenizde javascript kullanıyorsanız, Googlebot bunları tarayamıyor, üstüne bir çok problem çıkarıyordu.

Angular gibi bir kütüphane çıkaran, eski çalışanlarından birinin Vue’yu çıkardığı Google tabi ki bu duruma sessiz kalamayacaktı. Fakat Googlebot’un güncellenmesi, öyle update edelim gibi bir durum değil. Google problemin farkındaydı fakat sürüm güncelleme 2 yılı aşkın bir süre alabileceğini de iletiyorlardı. Neyse ki dedikleri gibi 2019 Ağustos’unda gelen güncelleme ile artık Google Javascript’i okuyabiliyor, yani aslında render edip, tarayabiliyor.

Javascript SEO Sorunsalı – Googlebot JS İlişkisi

Bir internet sitesinin API’lere bağlanması, database’den veri çekmesi, kullanıcı ile etkileşime girmesi gibi bir çok aksiyon bu site için bir yük oluşturuyor.

Yani bu yük server-side rendering yapan sitelerde sunucu tarafından omuzlanıyor render ediliyor ve sonuç HTML olarak servis ediliyor.

Client-side rendering yapan siteler özellikle modern front-end kütüphanelerini kullanan siteler ( Angular, React, Vue vb. ) tarayıcı kontrolü yapabildikleri için bu yükü tarayıcıya atarak daha iyi, daha hızlı, daha işlevsel aksiyonlar aktarabiliyorlar.

Fakat Googlebot’u da bir kullanıcı gibi varsayabilirsiniz. Googlebot için CSR yapan siteler ekstra 2 işlem daha fazla yaptırıyor. Özellikle bu işlemlerden bir tanesi JS’i render etmek. Milyonlarca internet sitesini tarayan bir bot düşünün. Bu JS render yükü, ekstra sunucu, ekstra maliyet demek.

Google’ın Javascript’i tarayabiliyor olması, dizine alacak / yorumlayacak anlamına gelmiyor. Global markalar için yapılan araştırmalarda bazı CSR sitelerde %99’a kadar tarayabilirken, bazı önemli markalarda %25’ini anca tarayabilmiş durumda. Bu da önemli bir sorunu ortaya koyuyor. Googlebot’un insafına kalmak.

Uzun lafın kısası, Googlebot HTML ve CSS’i gördüğü an hızlıca aksiyon alırken, JS kaynakları gördüğü an işlemi render sırasına alıyor. İşlem çok uzun sürerse de vazgeçiyor. Çünkü burada sunucu kaynaklarını en optimal şekilde kullanmak istiyor.

Javascript SEO Nasıl Yapılır ?

Tüm yukarıda anlatılanlar üzerine çıkaracağımız sonuç zaten belli. Javascript SEO yapmak istiyorsak Server-Side Rendering ‘i seçmek durumundayız. Kendi internet sitemizde oluşturduğumuz yükü yine kendi sunucularımızda çözeceğiz.

Ayrıca Sanal Dom İçeriğinin Googlebotlar tarafından okunmayacağını hatırlamamız gerekiyor.

Bir diğer önemli konu “<a href>” tagleri. Google diğer sayfalara ulaşma kısmında a taglarini kullanıyor. JS yardımı ile onclick bazlı bir linkleme yine Googlebot tarafından okunmayacaktır.

İyi güzel, SSR kesin çözüm dedik. Fakat bazı Single Page Applicationlar var ki 10.000’lerce kodu şimdi hadi baştan SSR yapalım demek zor. Bunun için Google’ın farklı bir çözümü var. Dynamic Rendering

Dynamic Rendering Nedir ?

Client-Side Rendering yapan bir siteniz var ve Server-Side’a çekmek zor ise Google bu problemi Dynamic Rendering yaparak çözebilirsiniz diyor.

Kısaca siz yine Client-Side Rendering’e devam edin “ama kullanıcılar için”. Googlebot’a ise bir pre-render alarak farklı bir kolaylık sağlayın diyor. Yani kullanıcıya farklı, Googlebot’a farklı bir render bu problemi çözer diyor.

Bonus: Martin Splitt’in Intent’i çok bozmamak kaydı ile GoogleBot’a farklı, Kullanıcıya Farklı İçerik Gösterebilirsiniz gibi bir açıklamasıda var. Tartışmalar büyüyecek : )

https://www.searchenginejournal.com/showing-different-content-to-google-and-users/360756/

İlginizi Çekebilir