TEKNİK SEO

Javascript SEO: Dynamic Rendering Nedir ve Test Aşamaları Nelerdir?

SAMET ÖZSÜLEYMAN

19 Kas, 2019

SEO’da Javascript’in kullanıma ilişkin özellikle de Dynamic Rendering ile ilgili bir rehber hazırladık. Bu rehberimizde Javascript Rendering geçiş sürecinin sorunsuz olması adına nelere dikkat edilmesi ve hangi testlerin gerçekleştirilmesi gerektiği konusunda önerilerimizi bulabilirsiniz.

SEO’da Javascript ile ilgili kısa bir update yapılması gerekirse Google, önceki yıllarda Googlebot’un Chrome 41’e göre siteleri taradığını belirtmişti. Daha sonradan gelişen teknolojilerle beraber Chrome 41 versiyonu siteleri anlamakta ve tarama aşamasında ciddi sorunlar oluşturuyordu. 

Ağustos ayından itibaren de artık Googlebot, en son Chromium sürümüyle “evergreen rendering” olacak şekilde güncellendi. 

evergreen-googlebot-tweet

Google’ın siteleri test eden araçları da (mobil uyumluluk, AMP vb.) bu entegrasyonla beraber daha doğru analizler vermeye başladı.

Dynamic Rendering Nedir?

Dynamic Rendering, Javascript tabanlı (CSR) sitelerde siteye gelen botlara (Googlebot vs) SSR (Server Side Rendering) ile taramayı kolaylaştırmayı sunan bir ara çözümdür. 

dynamic-rendering

Not: Dynamic Rendering, kullanıcı deneyimini (UX) geliştirmez, sadece SEO için üretilmiş ara bir formüldür.

Konuyla ilgili Google’dan John Muller ise katıldığı bir hangouts’ta “birkaç yıl içerisinde Google’ın dynamic rendering’e ihtiyacı olmayacağını ön gördüğünü” belirtiyor.

muller-dynamic-rendering

Google’ın yanı sıra Bing de Dynamic Rendering kullanmayı önermektedir.

bing-js-seo

Arama motorlarının hangi JS’leri desteklediğini Bartosz Góralewicz tarafından yapılan çalışma sonucuna göre aşağıdaki görselden inceleyebilirsiniz.

js-seo-frameworks

Kullanılan bazı JS Framework’leri;

  • AngularJS
  • React
  • Vue.js
  • jQuery

wappalyzer.com verilerine göre en fazla kullanılan JS Framework türlerinde React lider görünmekte.

javascript-kutuphaneleri

Google'ın HTML’e göre JavaScript'i işlemesi daha zordur ve bu işlemi yapmak uzun zaman alabilir. Bu geç işleme sorununa geçici bir çözüm olarak da Dynamic Rendering önerilmektedir.

dynamic-rendering

Dinamik Oluşturucular

İçeriği statik HTML’ye dönüştürmek için Google’ın önerdiği 3 oluşturucu var;

  1. Prerender.io,
  2. Rendertron,
  3. Puppeteer.

Rendertron kullanarak adım adım JS ile oluşturulan içeriğin Google nasıl gözüktüğünü daha test aşamasında görebilirsiniz. Bunun için şuradaki adreste bulunan örneği kopyalayabilirsiniz. Onun haricinde birçok sitenin kullandığı prerender.io da başka bir yöntem olarak kullanılabilir.

prerender

Dinamik oluşturucular sayesinde orijinal HTML dosyasında bulunan JS kodlarını çalıştırabilmek ve böylece botlara aşağıda olduğu gibi render edilmiş HTML dosyasını servis edebilmek mümkün.

rendered-html

User Agents

Statik HTML’de hangi user-agent’i kullanacağınızı belirtmeniz gerekiyor. Rendertron ile ilgili örnek kullanıcı aracı listesi;

user-agents-googlebot

Pre-Rendering / Googlebot’u Doğrulama

Kimi durumlarda pre-prendering (ön oluşturma) işlemi sunucuyu çok yorabilir ve kaynakları tüketebilir. Benzer durumların önüne geçmek için bir cache (önbellekleme) uygulaması kullanmayı düşünebilirsiniz.

Siteye gelen isteklerin gerçekten Googlebot’a ait olup olmadığını kontrol etmek için aşağıdaki bilgiden yararlanabilir ve gereksiz isteklerin önüne geçebilirsiniz. Bu önlem ile spam veya kötü amaçlı saldırıların önüne de geçmiş olacak ve bu sayede kaynakların verimli kullanımı noktasında optimizasyon da yapmış olacaksınız.

> host 66.249.66.1

1.66.249.66.in-addr.arpa domain name pointer crawl-66-249-66-1.googlebot.com.

> host crawl-66-249-66-1.googlebot.com

crawl-66-249-66-1.googlebot.com has address 66.249.66.1

googlebot-surec

Sayfada yüklenmesi çok uzun sürecek bir içerik varsa burada Googlebot’un zaman aşımına uğramamasını sağlamalısınız.

User Agent: Mobile mi Masaüstü mü?

Yukarıda bahsettiğimiz kullanıcı aracılarına içerikte mobil veya masaüstü sürümlerin belirtilip belirtilmeyeceğini gösterebilirsiniz. Uygun sürümü bulmak için Dynamic Serving’i kullanabilirsiniz.

Sonuç olarak en son aşamada oluşturulan URL’nin 200 kodu döndürdüğünü de test etmeliyiz. Bazen Googlebot’a 503 gösterip kullanıcının sayfayı sorunsuz görebildiği durumlar da olabilir. Bu tür durumlar test aşamasında tespit edilip önlem alınmalı, indexlemede sorun yaşamamak için ön kontroller yapılmalıdır.

search-console-http-response

Dynamic Rendering Test İşlemleri

-Eğer sitede Dynamic Render kullanılması düşünülmüyorsa JS’ler kapalıyken sayfanızın nasıl göründüğünü mutlaka test edin. Sayfanız hiç oluşturulamıyorsa burada sayfanın JS ile oluşmasını engelleyen kaynakları tespit ederek, JS kapalıyken bile içeriğin okunabildiğini kontrol edin.

js-kapali

Aynı sitede JS’ler açıkken;

js-acik

JS’lerin kapalı/açık olma durumları Googlebot’un da sizin gördüğünüz gibi siteyi gördüğü anlamını taşımamalıdır.

“Devamını Göster” Durumları

read-more-javascript-seo

İçeriğin bir kısmının “devamını göster” gibi bir butonla saklanmaması da önemli bir nokta. Google bunu kaynak kodda görse bile dizinine eklemeyebilir. Yukarıdaki görselde örnek sitenin, devamını göstere tıkladıktan sonra çıkan rastgele bir metnini Google’da arattığımızda hiçbir şekilde o içeriği göstermediğini görmekteyiz:

javascript-icerik-serp

Digitalzone 2019 konuşmacılarından Bastian Grimm tarafından da bu durum çeşitli örneklerle anlatılmıştı. Bununla ilgili çok önemli CSS uygulamalarından da bahsedilmişti. “Hidden” gibi düzenlemeler, içeriğin HTML’de gözüktüğü halde dizinde yer almadığını göstermişti.

css-seo

Mobil Uyumluluk Test Aracı & Javascript

Mobil uyumluluk test aracı yardımıyla içeriğin mobilde gözüküp gözükmediğini test edin. Ayrıca rastgele bir içeriği aratarak, test sonucunda HTML kaynak kod seviyesinde gösterildiğine bakın. Sonuçta içerik oluşturulamıyorsa burada aksiyon almanız gerekiyor. Sayfanın mobil uyumlu olduğu, bu sayfanın JS’leri okuyabildiği ve gösterdiği anlamını taşımamalıdır.

mobil-test-javascript

Yine mobil uyumluluk test aracındaki kontrollerde sayfa içeriğinin açık bir şekilde beyaz geldiği (yani içeriğin okunamadığı) görülmekte. Bu tür sorunlar da indexing & crawling sürecinde sorunlara sebep olabilir.

mobil-test-javascript

Google Search Console & Javascript

-Google Search Console’da bulunan URL Denetleme aracı ile sayfanın nasıl oluştuğunu, JS’ler içerisinde yer alan içeriği Googlebot’un nasıl okuyabildiğini kontrol edin. 

search-console-javascript-testing

İçeriği ilgili bölümde aratarak bulmaya çalışın, içerik gözükmüyorsa JS Render işlemi başarıyla tamamlanamadı demektir.  

javascript-render-google

-Yapılandırılmış Veri Test aracı & Zengin Sonuçlar Test aracı yardımıyla eğer sayfalarınızda breadcrumb veya article gibi yapısal veriler kullanıyorsanız onların da oluşup oluşmadığını kontrol etmelisiniz.

structured-datas-javascript

Kullanıcı aracısını seçerek masaüstü & akıllı telefon özelinde fark olup olmadığını da test edebilirsiniz.

googlebot-akilli-telefon

Bu işlemlerin hepsini yaparken içerik oluşuyorsa ve mobil ile masaüstü arasında içerik anlamında bir fark yoksa Mobile First Indexing için de site hazır oluyor demektir. İçerikteki farklılıklar MFI’ya geçiş işlemlerini uzatabilir ve site geçemeyebilir.

Kaynak kod seviyesinde sitede yer alan hreflang, canonical, title gibi elementlerin mutlaka olması gerekiyor. Yine linklerin “a href” ile verilmesi gerekiyor ki Googlebot o linkleri takip edebilsin. 

javascript-seo-links

-Ayrıca Javascript ile oluşturulan bu meta öğeleri, HTML ile ekstradan çoğaltılmamalıdır.

Aşağıda yer alan görselde sayfanın render işlemi sonrasındaki HTML ile ham HTML arasındaki değişimi görebilirsiniz.

diff-html

JS’de içeriğin görünmeme sorunlarını tamamen çözebilmek için dinamik render işlemi uygulanarak Googlebot’un tüm içeriği görebilmesinin sağlanması gerekmektedir.

Cloaking & Dynamic Rendering

Dynamic Rendering işlemine geçince Google içeriği gizleme olarak sayıp sayamacağına bakmadan önce Google’a göre gizleme nedir ona bir bakalım;

dynamic-rendering-cloaking

Dynamic Rendering’te kullanıcıya aynı/benzer içeriği sunacağınız için bu durum cloaking kapsamına girmemektedir. Eğer render sürecinde bota farklı kullanıcıya farklı bir içerik sunulursa bu bir ihlal olarak görülebilir. 

Gizlemeyi örnek üzerinden anlatmak gerekirse ziyaretçiye “mercimek çorbası tarifi” ile ilgili içerik sunarken Googlebot’a “ezogelin çorba tarifi” ile ilgili içerik sunmak ihlale neden olur, diğer durumlarda Google bu render işlemini ihlal olarak görmez.

Kullanıcı ile Googlebot’a sunulan içeriğin farkını olabildiğince minimum düzeyde tutmalısınız.

Robots.txt & JS

Robots.txt ile .js uzantılı dosyaların engellenmesi durumunda Googlebot JS’leri çalıştıramaz ve oları okuyamaz. Bu yüzden CSS veya Javascript dosyaları Robots.txt ile engellenmemelidir.

Bir URL’nin Google araçlarında nasıl gözüktüğünü ve engellenip engellenmediğini test etmek için Mobil Uyumluluk Test Aracı’nı kullanabilirsiniz. Örnek bir tarama sonucunda JS konsolu mesajları bölümüne bakarak mevcut JS hatalarını eğer 3. taraf ile ilgili değilse düzeltilmesi önemlidir. 

js-hatalari-console

3. taraf uyarıları neler olabilir diye bakacak olursak Google Analytics, Hotjar veya Facebook Pixel gibi ek scriptler uyarılara sebep olabilir. (Robots.txt engellemeleri yüzünden gibi) JS’nin render edilemediği durumları da yine bu konsol mesajları bölümünde görebiliriz (böyle bir sorun varsa elbette)

js-uyarilari-google

Dynamic Rendering’e geçiş sürecinde neler yapılması gerektiğini bu yazımızda anlatmaya çalıştık. Umarız Javascript SEO konusunda işinize yarar bir makale olmuştur. Sizin de geçiş süreci ile ilgili farklı tecrübeleriniz ya da merak ettikleriniz varsa yorum olarak paylaşabilirsiniz.