Javascript SEO Nedir?

Javascript SEO, temelde içeriğinin tamamı ya da büyük bir kısmı Javascript kullanılarak oluşturulan bir web sitesinin arama motoru botları tarafından eksiksiz taranması ve indekslenmesi için yapılan çalışmaların genel adıdır. Burada amaç, web sitesinin arama motoru dostu hale getirilerek tüm içeriğini eksiksiz indekse aldırıp, sıralamalarda iyi performans gösterebilmektir.

Google Botları Javascript Siteleri Okuyabiliyor Mu?

Google, her geçen gün algoritmasını ve teknolojilerini geliştirerek kullanıcılara daha doğru sonuçlar sunabilmek için çalışıyor. Google, 2019 yılı Mayıs ayı itibariyle Javascript siteleri sorunsuz olarak tarayabildiğini açıklayan bir güncelleme yayınladı. “Evergreen Googlebot” olarak adlandırılan teknolojide Googlebot herhangi bir ekstra sorunla karşılaşmadığı sürece Javascript siteleri bütünüyle tarayabileceğini belirtiyor.

Peki Googlebot Javascript siteleri tamamıyla sorunsuz tarayabiliyorsa, neden hala bunun hakkında çalışmalar yapıyoruz?

Bu sorunun tek bir cevabı var: BÜTÇE! Tabi buna tarama bütçesi de diyebiliriz 🙂

Google her gün milyonlarca web sayfasını tarıyor. Bu taramalar da Google için enerji temelli bir masraf oluşturuyor. 130 Trilyondan fazla web sayfasının tarandığını da hesaba katınca, GoogleBot bir sayfayı tararken minimum zaman ve enerji harcayacağı sayfaları önceliklendirip, tarayıp dizine ekliyor.

GoogleBot Javascript Siteleri Nasıl Tarar?

Javascript bir sayfanın taranması, düz HTML bir sayfanın taranmasından çok daha fazla işlem sayısı ve zaman gerektirdiğinden, Google, Javascript sayfaların tümünün taranacağı gibi bir garanti vermiyor. Hatta yeni ya da çok aktif olmayan bir siteden bahsediyorsak, Javascript içeriğin taranıp dizine eklenmesi aylar alabiliyor. İşte tam da bu yüzden Javascript SEO gerekli.

Google Javascript siteleri 3 adımda tarar.

1. Tarama

2. Oluşturma (Rendering)

3. Dizine Ekleme

Aşağıda Google’ın Javascript siteleri nasıl tarayıp işlediğini anlatan görseli görebilirsiniz.

Javascript sitelerin arama motoru botları tarafından eksiksiz taranması ve indekslenmesi için Javascript SEO’da kullanılan 2 farklı yöntem bulunuyor.

Client Side Rendering (CSR) (Dynamic Rendering ile Birlikte)

Server Side Rendering (SSR)

Yukarıda gördüğünüz iki farklı Render sisteminden Google tarafından tercih edilen yöntem, SSR yani Server Side Rendering’tir. CSR kullanılan sitelerde ise Dynamic Rendering kullanılarak tarama işlemini Google’ın istediği şekle getirebiliyoruz. Hadi bu yöntemlere biraz daha detaylı bakalım.

Client Side Rendering (CSR)

Client Side Rendering yan İstemci Tarafında Oluşturma, isteğin kullanıcıdan ya da arama motoru botundan geldiği fark etmeksizin, sunucudaki Javascripti indirir ve içeriği göstermek için çalıştırır. Javascript dosyaları indirilip çalıştırılana kadar boş bir sayfa ya da bir yükleme ekranı görünür.

Aşağıda Client Side Rendering süreçlerini anlatan görseli görebilirsiniz.

Client Side Rendering’in Eksileri

• Bir HTML içeriği olmadığı için GoogleBot sitenin içeriğini hızlıca okuyup indeksleyemez.

• Javascript dosyalarının indirilmesi ve daha sonrasında çalıştırılması uzun zaman alacaktır. Javascriptin ayrıştırılıp çalıştırılması, HTML ve CSS’e göre daha karmaşıktır.

• Sayfanın açıldığı ilk andan Javascript kodlarının indirilip çalıştırılmasına kadar geçen sürede sayfa içeriği boş görünecektir.

• İşlem sayısının çok olması nedeniyle daha eski teknoloji mobil cihazlarda daha kötü performans olacaktır.

Client Side Rendering Artıları

• Tüm veriler ilk açılışta yüklendiğinden sunucuya daha istek gönderir.

• İlk yüklemeden sonra sayfalar arasındaki gezinme tüm Javascript dosyalarının daha önceden indirilip çalıştırıldığı için hızlı olacaktır.

• Sunucuya daha az yüklendiği için sunucu performansı daha iyi optimize edilebilir.

Peki Client Side Rendering’i Javascript SEO için nasıl daha iyi hale getirebiliriz? Onun da çözümü Dynamic Rendering!

Dynamic Rendering

Dynamic Rendering, Javascript sitelere gelen isteklerin GoogleBot ya da başka bir arama motoru botu tarafından mı yoksa kullanıcı tarafından mı olduğunu tespit ederek iki farklı sonuç çalıştırır.

İstek GoogleBot ya da farklı bir arama motoru botundan geliyorsa, Javascript’i sunucu tarafında işleyerek bir HTML’e dönüştürür ve arama motoruna yalın bir HTML sitede olduğu gibi HTML dosyasını gönderir.

İstek kullanıcı tarafından geliyorsa, yukarıda da bahsettiğimiz CSR yani Client Side Rendering sürecini devreye alır. Burada aşağıda görselde de görüldüğü gibi tarayıcıya oluşturulan ilk HTML ve indirilip çalıştırılan JavaScript kodları gönderilir.

Dinamik Oluşturma’yı uygulamanın detaylarına Google’ın yayınladığı bu makaleden ulaşabilirsiniz: https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering

Google’ın Dynamic Rendering için önerdiği 3 oluşturucu bulunuyor.

• Puppeteer

• Rendertron

• prerender.io

Üstlerine tıklayarak bu oluşturucuların kurulumları hakkında Google’ın yayınladığı makalelere ulaşabilirsiniz.

Hali hazırda CSR tabanlı olan web sitelerinde Dynamic Rendering kullanmak Javascript SEO için önerilir.

Server Side Rendering (SSR)

Server Side Rendering yani Sunucu Tarafında Oluşturma, isteğin kullanıcıdan ya da arama motoru botundan geldiği fark etmeksizin, sunucuya gelen isteğin ardından Javascript ve CSS dosyalarını sunucu tarafında işleyerek kullanıcı ya da arama motoru botuna bir HTML dosyası gönderir. Tarayıcı bu HTML dosyasını okumaya ve ayrıştırmaya başlar.

1. Tarayıcı HTML dosyasını işlemeye başlar ve CSS dosyalarının linklendiği satırlara geldiğinde işlemeyi durdurup, CSS dosyalarını ayrıştırmaya başlar.

2. CSS dosyalarının işlenmesi bittikten sonra tarayıcı tekrar HTML dosyasını işlemeye başlar. Bu adımın sonunda sitenin ilk görünebilir içeriği oluşur.

3. Tarayıcı daha sonra JavaScript dosyalarını indirip işlemeye başlar.

4. JavaScriptin işlenmesi de bittiğinde site artık etkileşime hazır hale gelir.

Aşağıda Server Side Rendering süreçlerini anlatan görseli görebilirsiniz.