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.
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.
Not: Dynamic Rendering, kullanıcı deneyimini (UX) geliştirmez, sadece SEO için üretilmiş ara bir formüldür.
Konuyla ilgili Google’dan John Mueller ise katıldığı bir hangouts’ta “birkaç yıl içerisinde Google’ın dynamic rendering’e ihtiyacı olmayacağını ön gördüğünü” belirtiyor.
Google’ın yanı sıra Bing de Dynamic Rendering kullanmayı önermektedir.
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.
Kullanılan bazı JS Framework’leri;
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.
Görsel kaynağı.
Dinamik Oluşturucular
İçeriği statik HTML’ye dönüştürmek için Google’ın önerdiği 3 oluşturucu var;
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.
User Agents
Statik HTML’de hangi user-agent’i kullanacağınızı belirtmeniz gerekiyor. Rendertron ile ilgili örnek kullanıcı aracı listesi;
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
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.
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.
Aynı sitede JS’ler açıkken;
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ı
İç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:
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.
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.
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.
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.
İç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.
-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.
Kullanıcı aracısını seçerek masaüstü & akıllı telefon özelinde fark olup olmadığını da test edebilirsiniz.
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.
-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.
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’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.
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.
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.
Not: Dynamic Rendering, kullanıcı deneyimini (UX) geliştirmez, sadece SEO için üretilmiş ara bir formüldür.
Konuyla ilgili Google’dan John Mueller ise katıldığı bir hangouts’ta “birkaç yıl içerisinde Google’ın dynamic rendering’e ihtiyacı olmayacağını ön gördüğünü” belirtiyor.
Google’ın yanı sıra Bing de Dynamic Rendering kullanmayı önermektedir.
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.
Kullanılan bazı JS Framework’leri;
- AngularJS
- React
- Vue.js
- jQuery
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.
Görsel kaynağı.
Dinamik Oluşturucular
İçeriği statik HTML’ye dönüştürmek için Google’ın önerdiği 3 oluşturucu var;
- Prerender.io,
- Rendertron,
- Puppeteer.
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.
User Agents
Statik HTML’de hangi user-agent’i kullanacağınızı belirtmeniz gerekiyor. Rendertron ile ilgili örnek kullanıcı aracı listesi;
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
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.
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.
Aynı sitede JS’ler açıkken;
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ı
İç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:
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.
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.
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.
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.
İç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.
-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.
Kullanıcı aracısını seçerek masaüstü & akıllı telefon özelinde fark olup olmadığını da test edebilirsiniz.
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.
-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.
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’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.