JavaScript SEO Çalışmalarında Kontrol Edilecek Hususlar

İçeriğin büyük bir kısmı JavaScript ile oluşturulmuş veya sunulan web sitelerinin Google arama botları tarafından sorunsuz bir şekilde taranıp sıralama alması için yapılan çalışmaların tümüne JavaScript SEO olarak adlandırabiliriz. Burada gerçekleştirilen bütün çalışmaların temel amacı ise JavaScript tabanlı web sitelerinin arama motorları üzerinde başarılı sonuçlar elde etmesini sağlamaktır.

JavaScript, web sitelerinde doğru ve yerinde kullanıldığında büyük faydalar sağlayan güçlü bir programlama dilidir. Ancak gereksiz ya da aşırı kullanımı sitenin performansını olumsuz etkileyebilir ve arama motorları tarafından taranmasını zorlaştırabilir.

Bugünkü yazımızda JavaScript SEO nedir, Google JavaScript siteleri nasıl tarıyor? ve JavaScript sitelerinde kontrol edilmesi gerekenler nelerdir? Bunlara yer vermeye çalışacağız.

Google JavaScript Siteleri Nasıl Tarıyor?

Google, JavaScript ile geliştirilen sayfaları daha sağlıklı analiz edebilmek için “iki aşamalı tarama” olarak bilinen bir yaklaşım kullanır.

Eskiden web sitelerinin büyük çoğunluğu ağırlıklı olarak HTML ve CSS ile oluşturulduğu için arama motorları, sayfaları yalnızca temel bir HTML isteğiyle kolayca okuyup değerlendiriliyordu. Bu da sürecin hızlı ve pratik bir şekilde ilerlemesini sağlıyordu.

Zamanla JavaScript kullanımının artmasıyla birlikte arama motorlarının çalışma şekli de değişmek zorunda kaldı. Günümüzde botlar, sayfa içeriğini doğru anlayabilmek için bir tarayıcı gibi davranarak sayfayı render eder. 

Google tarafından “Web Rendering Service” olarak adlandırılan bu sistemde, sayfa önce taranır, ardından JavaScript çalıştırılarak ikinci aşamada işlenir. Bu sürecin nasıl ilerlediğini gösteren bir diyagram da Google tarafından paylaşılmıştır.

Web sitenizi ziyaret eden Googlebot, ilk tarama aşamasında sunucunuzdan HTML dosyalarını talep eder. Bu aşamada iletilen HTML ve CSS içerikleri taranır ve uygun görülmesi durumunda Google dizinine eklenir.

Bu süreç, klasik sayfalarda gerçekleşen tarama ve indeksleme ile aynıdır. Googlebot, HTML yanıtınızda gördüğü içerik doğrultusunda sayfanızı anlamlandırır ve kullanıcı sorgularına göre arama sonuçlarında göstermeye başlar.

İkinci tarama aşamasında Googlebot, web sitenizi yeniden değerlendirmek üzere bir sıraya alır. Bu süre; sitenizin otoritesi, kalitesi ve tarama bütçesine bağlı olarak birkaç saatten birkaç güne kadar değişebilir. Ardından sayfanıza tekrar gelerek JavaScript ile oluşturulan içeriği tarar ve bu işlenmiş hâliyle dizinine ekler.

Eğer sitenizde içerikler JavaScript kullanılmadan sunuluyorsa bu süreçte herhangi bir problem yaşanmaz. Ancak içerik JavaScript ile oluşturuluyorsa ve gerekli optimizasyonlar yapılmamışsa, Googlebot’un sayfanızı doğru şekilde anlaması oldukça uzun sürebilir.

JavaScript Oluşturma (Render) 

Web sitenizi hem kullanıcılara hem de Google botlarına farklı şekillerde sunabilirsiniz.

Bu seçeneklerden en uygun olanını belirleyip uygulamak, yalnızca JavaScript SEO açısından değil, genel site sağlığı ve performansı açısından da oldukça önemlidir.

• Server Side Rendering (Sunucu Tarafında Oluşturma – SSR)

• Client Side Rendering (Kullanıcı Tarafında Oluşturma – CSR)

• Dynamic Rendering (Dinamik Oluşturma)

Server Side Rendering (Sunucu Tarafında Oluşturma – SSR)

Kullanıcıların sunucuya yaptığı istekler sonucunda, içeriğin sunucu tarafından işlenip oluşturulduğu ve çıktının tarayıcıya HTML dosyası olarak iletildiği bir yöntemdir.

Sunucu tarafında gerçekleştirilen bu işlem sayesinde, Google botları için taranması zor olabilen JavaScript içerikleri önceden oluşturulmuş şekilde sunulur.

Eğer web sitenizdeki JavaScript kodları, herhangi bir nedenle Google botları tarafından doğru şekilde işlenemiyorsa, sunucu tarafında oluşturma (SSR) yöntemini tercih etmek siteniz için daha faydalı olacaktır.

Server Side Rendering Avantajları:

• Daha az JavaScript bağımlılığı sağlar.
• Sayfaların daha hızlı yüklenmesine yardımcı olur.
• Tarayıcıların ekstra kod çalıştırmasına gerek kalmaz.
• Kullanıcının internet bağlantısı yavaş olsa bile daha stabil bir deneyim sunar.

Server Side Rendering Dezavantajları:

• Sunucuya daha fazla yük bindirir.
• Sunucu maliyetleri artabilir.
• Sayfalar arası geçişler, istemci tarafı çözümlere göre daha yavaş olabilir.

Client Side Rendering (Kullanıcı Tarafında Oluşturma – CSR)

Kullanıcıların yaptığı istekler sonucunda sunucu, tarayıcıya içerisinde JavaScript kodları bulunan bir HTML dosyası gönderir.

Bu dosyaların tarayıcı tarafından işlenmesi ve sayfa içeriğinin kullanıcı tarafında (tarayıcıda) oluşturulması sürecine Client Side Rendering (CSR) denir.

Bu yöntemde işlem tarayıcı tarafında yapıldığı için sunucu tarafında yüklü bir işlem gücüne ihtiyaç kalmaz.

Client Side Rendering (CSR) Avantajları:

• Sunucu tarafındaki yük daha azdır.
• Sayfalar arası geçişler oldukça hızlıdır.
• Kullanıcı etkileşimleri daha akıcı ve dinamiktir.
• Frontend geliştirme süreçlerinde esneklik sağlar.

Client Side Rendering (CSR) Dezavantajları:

• JavaScript’e yüksek derecede bağımlıdır.
• Sayfa ilk açılışta boş veya yükleniyor gibi görünebilir.
• SEO açısından, özellikle Google botları için bazı durumlarda dezavantaj oluşturabilir.
• İşlem yükü tarayıcıda olduğu için eski veya düşük donanımlı cihazlarda performans düşebilir.
• İnternet bağlantısı yavaş olan kullanıcılar için ilk yükleme süresi uzayabilir.

Dinamik Oluşturma (Dynamic Rendering)

JavaScript tabanlı web sitelerinde, arama motoru botlarının siteyi daha kolay tarayabilmesi için kullanılan yöntem Dynamic Rendering olarak adlandırılır.

Dynamic Rendering, arama motoru botlarının normalde Client Side Rendering (CSR) ile oluşturulan bir web sitesini, Server Side Rendering (SSR) benzeri şekilde tarayabilmesini sağlayan bir çözümdür. Bu yaklaşımda kullanıcılar siteyi ziyaret ettiğinde içerik tarayıcı tarafında (CSR) oluşturulurken, Google botları siteye geldiğinde JavaScript çalıştırmalarına gerek kalmadan, önceden oluşturulmuş (render edilmiş) HTML içeriğe erişir.

Bu yöntem, özellikle JavaScript’in botlar tarafından doğru şekilde işlenemediği senaryolarda önemli bir avantaj sağlar.

Google tarafından da desteklenen bu yöntemi uygulamak için kullanılabilecek bazı popüler servisler şunlardır:

• Prerender.io
• Rendertron

Web Sitesinin SSR mı CSR mı Olduğu Nasıl Tespit Edilir?

Bir web sitesinin Server Side Rendering (SSR) mı yoksa Client Side Rendering (CSR) mı kullandığını anlamak her zaman ilk bakışta kolay olmayabilir. Özellikle hazır framework’ler (React, Vue, Angular vb.) kullanıldığında yapı dışarıdan gizlenebilir.

Aşağıdaki yöntemlerle bir sitenin çalışma mantığı analiz edilebilir:

1-) Sayfa Kaynağını Görüntüleme

Bir sitenin SSR mi yoksa CSR mi kullandığını belirlemenin en kolay yollarından biri sayfa kaynağını incelemektir. HTML kodu; ana gövde, resimler, metinler ve benzeri tüm içerikleriyle birlikte eksiksiz görünüyorsa, site büyük olasılıkla SSR kullanıyordur.

Bunun yanı sıra HTML kodu oldukça sade ise, büyük ölçüde boş bir <div id=”root”></div> yapısıyla başlıyor ve içerik barındırmıyorsa, bu durumda büyük olasılıkla Kullanıcı Tarafında Oluşturma (Client Side Rendering – CSR) kullanılmaktadır.

2-) JavaScript’i Devre Dışı Bırakma

Bir sitenin SSR mi yoksa CSR mi kullandığını, tarayıcınızda JavaScript’i devre dışı bırakarak da test edebilirsiniz. Web sitesinin içeriği JavaScript’i kapattığınızda görünmeye devam ediyorsa, büyük olasılıkla SSR kullanıyordur. Eğer herhangi bir içerik görüntülenmiyor ve sayfa boş görünüyorsa, CSR kullanıyor olabilir.

Örnek;

Airbnb web sitesinde JavaScript’i devre dışı bıraktığımız zaman boş bir ekran gelmektedir.

3-) Tarayıcı Eklentileri Kullanma

Kod okumakla uğraşmak istemiyorsanız, süreci otomatikleştiren tarayıcı eklentilerinden yararlanabilirsiniz.

Wappalyzer: Bir web sitesinin kullandığı teknolojileri analiz eder ve SSR (ör. Next.js, Nuxt) veya CSR (ör. React, Vue) tabanlı olup olmadığı konusunda bilgi sağlayabilir.

İlgili Eklenti: https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg 

Örnek;

4-) DevTools (Ağ/Network Sekmesi)

Bir sitenin SSR mi yoksa CSR mi kullandığını anlamanın bir diğer yolu da DevTools üzerinden manuel kontrol gerçekleştirmektir. Tarayıcınızda F12 tuşuna basarak DevTools’u açın, ardından Network (Ağ) sekmesine geçin. Buradan, en üstte yer alan ve ana domain adına sahip olan doküman dosyasına tıklayarak Preview ekranını açın.

Preview ekranında sitenin içeriklerini ve HTML kodlarını görebiliyorsanız, büyük olasılıkla SSR kullanılmaktadır. Eğer çok az sayıda HTML kodu görüyorsanız ve içerikler sonradan tetiklenen API istekleriyle yükleniyorsa, bu durum sitenin CSR kullandığını göstermektedir.

JavaScript Sitelerinde Kontrol Edilmesi Gerekenler Nelerdir?

Günümüzde JavaScript tabanlı web sitelerinde içeriğin nasıl oluşturulduğunu analiz etmek için çoğunlukla JS render süreçlerine bakılır. Ancak bu her zaman yeterli olmayabilir bu noktada manuel incelemeler devreye girer.

Bu yazımda, JS tabanlı sitelerde manuel olarak yapılması gereken temel SEO kontrollerini kısaca ele alacağım.

1-) JavaScript Devre Dışı Bırakıldığında İçeriğin Nasıl Göründüğü

Üçüncü parti eklentilerle web sayfanızdaki ürün görselleri, yorumlar, içerik metinleri ve ürün özelliklerinin JavaScript kapatıldığında nasıl göründüğünü test edebilirsiniz.

İlgili eklenti: https://chromewebstore.google.com/detail/javascript-toggle-on-and/cdcgbgnfhhdmdkallfmlachogpghifgf?hl=tr&utm_source=ext_sidebar 

Alternatif olarak, Google DevTools üzerinden de bu kontrolü yapabilirsiniz. Sağ üst köşedeki üç nokta menüsüne tıklayın. Açılan menüden More Tools (Diğer Araçlar) > Run Command (Komut Çalıştır) yolunu izleyin daha sonra karşınıza gelen arama kutusuna “Disable JavaScript” yazarak JavaScript’i devre dışı bırakabilirsiniz.

2-) Meta Etiketleri ve Yapısal Veriler

Page title, meta description, canonical, noindex gibi temel SEO elementlerinin yanı sıra schema (structured data) kodlarının da JavaScript ile oluşturulan sayfalarda Google botları tarafından doğru şekilde görülüp görülmediği mutlaka test edilmelidir.

Bunun için Google Search Console üzerinden ilgili URL için URL Denetimi (URL Inspection) aracı kullanılarak sayfa getirilmeli ve oluşturulan (render edilmiş) HTML incelenmelidir. Bu sayede Google’ın sayfayı nasıl gördüğü kontrol edilebilir.

3-) Gizlenmiş İçerikler

JS framework ile geliştirilmiş web sitelerinde bazı durumlarda gizlenmiş içerikler bulunabilir. Bir sayfada kullanıcıya içeriklerin yalnızca bir kısmı veya sınırlı görseller gösterilirken, RAW sürümünde Google botlarına daha fazla içerik sunulabilir.

Bu tarz durumları tespit etmek için sayfanın RAW HTML ile render edilmiş hali karşılaştırılmalı, kullanıcıya gösterilen içerik ile botlara sunulan içerik arasında fark olup olmadığı kontrol edilmelidir.

4-) Görseller

Çoğu e-ticaret sitesinde bir ürün için birden fazla görsel bulunur. Ancak bazı durumlarda yalnızca öne çıkan görsel img src etiketiyle sunulurken, diğer görseller farklı yöntemlerle (örneğin JS ile yüklenerek) gösterilir. Bu da ikinci ve sonraki görsellerin img src içinde yer almaması nedeniyle Googlebot tarafından keşfedilememesine ve dizine eklenememesine yol açabilir.

 

5-) Robots.txt Kontrolleri

Robots.txt dosyası ile taramaya kapattığınız .js uzantılı dosyaların, sayfanın oluşumunda kritik bir rol oynayıp oynamadığını DevTools üzerinden kontrol etmelisiniz.

Eğer bu dosyalar engellendiğinde sayfanın ana içeriği görünmüyorsa, ilgili kuralı robots.txt’ye ekleyip eklememe kararını yeniden değerlendirmeniz gerekmektedir.

6-) <a href> Kullanımı

Google botlarının sayfayı, içeriği ve sayfa içindeki iç linkleri doğru şekilde tarayabilmesi için DOM üzerinde yer alan bağlantıların <a href> yapısıyla belirtilmesi gerekir.

Aksi durumda, yalnızca onClick veya benzeri JavaScript tabanlı yöntemlerle oluşturulan linkler DOM’da görünse bile, Google botları bu bağlantıları doğru şekilde algılayamayabilir ve takip edemeyebilir.

7-) Akordiyon İçerikler

Ürün açıklamalarında yer alan özellikler, açılır-kapanır menü yapıları veya SSS bölümlerindeki içeriklerin Google botları tarafından görülüp görülmediğini mutlaka kontrol etmeniz gerekir.

Bunun için Chrome DevTools kullanılarak Network sekmesinde cache devre dışı bırakarak daha sonra içerik içinden herhangi bir kelimeyi DOM üzerinde aranarak ilgili metinlerin gerçekten yüklenip yüklenmediği ve Google’ın erişebileceği şekilde görünüp görünmediği kontrol edebilirsiniz.

8 -) URL İnceleme Aracı

Google Search Console’da incelemek istediğiniz bir sayfa için URL Getir (URL Inspection) işlemi yaparak sayfayı analiz edebilirsiniz.

İncelemek istediğiniz sayfanın URL’sini ilgili kutucuğa yapıştırdıktan sonra “Test Live URL” butonuna tıklanarak Googlebot’un sayfayı nasıl oluşturduğu görüntülenebilir.

HTML alanından temel SEO elementleri kontrol edilebilir, ekran görüntüsü sonucundan ise sayfa içeriğinin Google tarafından nasıl görüntülendiği detaylı şekilde inceleyebilirsiniz.

9-) Site Arama Operatörü

Web sayfanızda yer alan içeriğin Google botları tarafından dizine eklenip eklenmediğini test etmelisiniz.

Bunun için yazı içinden bir metin kopyalayarak Google’da “site:” operatörü ile arama yapabilir ve içeriğin dizine eklenip eklenmediğini kontrol edebilirsiniz.

Örnek:

“Bu bir JavaScript SEO ve JS sitelerinde kontrol edilmesi gerekenler rehberi” şeklinde bir cümle olduğunu varsayalım. Bu cümleyi kopyalayıp aşağıdaki şekilde arama yaparak kontrol gerçekleştirebilirsiniz:

site:Bu bir JavaScript SEO ve JS sitelerinde kontrol edilmesi gerekenler rehberi

10-) JavaScript Dosya Boyutları 

JavaScript dosyalarının Google botları tarafından taranması ve işlenmesi, diğer kaynak türlerine kıyasla daha karmaşık ve zaman alıcıdır. Bu durum, tarama bütçenizin önemli bir kısmının JavaScript’e harcanmasına neden olabilir.

Web sitenizin hızlı yüklenmesi ve kullanıcı etkileşimlerine anında yanıt verebilmesi için yüksek boyutlu JavaScript dosyalarının mümkün olduğunca optimize edilmesi büyük önem taşır.

Google DevTools içerisinde yer alan Network sekmesi üzerinden, web sitenizde kullanılan JavaScript ve CSS gibi farklı dosyaların yüklenme durumlarını, kullanım detaylarını ve boyutlarını kolayca analiz edebilirsiniz.

 

Furkan Ersin | Sr. Seo Executive