Tüm Detaylarıyla JavaScript SEO: Kapsamlı Rehber

Last Updated on 6 Ekim 2021 by Yıldırım SERTBAŞ

Javascript statik HTML’nin üzerinde ona etkileşim sağlayan ve dinamizm katan bir yapıdır.

Hazırladığım rehberde, Javascript kullanmanın web sitenizin performansına ve sıralamalarına etki etmediğinden ve kullanıcı deneyimine herhangi bir zarar vermediğinizden emin olmanızı sağlayacak her bilgiyi bulacaksınız.

Javascript SEO Nedir?

JavaScript SEO, JS destekli web siteleri yapan ve bunların arama motorları tarafından taranabilmesi için gerekli çalışmaları ve pratikleri içeren teknik bir SEO dalıdır.

• Arama motorlarının tamamen taraması, oluşturması ve dizine eklemesini kolay hale getirin.
• Eski tarayıcılara sahip kullanıcılar tarafından erişilebilirliği olsun.
• Meta verilerini ve dahili bağlantılarda tutarlı olsun.
• JavaScript kodunu ayrıştırmak ve yürütmek zorunda kalmanıza rağmen hızlı yüklensin.

Javascript oldukça popüler bir yazılım dilidir. Araştırmalara göre A.B.D’deki e-ticaret sitelerinin %80’ne yakını ana içeriği oluştururken ya da benzer ürünler arasında iç bağlantı kurarken Javascript’e başvuruyor.

Ancak, birçok JavaScript web sitesi – popüler olmalarına rağmen – JavaScript SEO’sunu düzgün yapmadıkları için Google’da düşük performans gösteriyor.

Bu yazıda, bunun neden olduğu ve nasıl düzeltileceği konusunda size bildiklerimi aktarıp yol göstereceğim. Bu rehberde şunları öğreneceksin:

• Google ve diğer arama motorları JavaScript’i nasıl işliyor?
• Web sitenizin JavaScript ile ilgili bir sorunu olup olmadığını nasıl kontrol edersiniz?
• JavaScript SEO’nun en iyi uygulamaları nelerdir?
• SEO’ların gözden kaçırdığı JavaScript ile ilgili en yaygın sorunlar nelerdir?

Bunların haricinde işinizi kolaylaştıracak çok sayıda da ipucunu sizle paylaşacağım.

JavaScript SEO ile ilgili diğer rehberlerime de göz atmanızı kesinlikle tavsiye ederim.

• JavaScript Yönlendirmeler Nasıl Yapılır?
• JavaScript SEO: Uygulanabilecek En İyi Pratikler ve Hata Ayıklama Araçları

JavaScript Nedir ve Nasıl Kullanılır?

Çok fazla tartışma götürmeyen bir gerçek var ki Javascript web’in geleceğidir.

Tabii ki, HTML ve CSS temeldir. Ancak hemen hemen her modern web geliştiricisinin JavaScript’te de kodlaması beklenir.

Ancak JavaScript tam olarak ne yapabilir? Ve web sitenizin hangi öğelerinin onu kullandığını nasıl kontrol edebilirsiniz? Okumaya devam edin öğreneceksiniz!

JavaScript son derece popüler bir programlama dilidir. Web sitelerini etkileşimli hale getirmek için geliştiriciler tarafından kullanılır.

JavaScript, bir sayfanın içeriğini dinamik olarak güncelleme konusunda benzersiz bir yeteneğe sahiptir.

Örneğin, döviz kurlarını gerçek zamanlı olarak sürekli güncellemek için Forex ve CFD ticaret platformları tarafından kullanılır.

Şimdi, Forex.com gibi bir web sitesini JavaScript’siz bir web sitesi olarak hayal edin.

JavaScript olmadan, kullanıcıların mevcut döviz kurlarını görmek için web sitesini manuel olarak yenilemesi gerekirdi. JavaScript bu yönüyle hayatımızı aslında oldukça kolaylaştırır.

Başka bir deyişle, yalnızca HTML ve CSS kullanarak bir web sitesi oluşturabilirsiniz, ancak onu dinamik ve etkileşimli yapan JavaScript’tir.

• HTML, bir sayfanın gerçek içeriğini tanımlar. (bir arabanın gövdesi/çerçevesi).
• CSS, sayfanın görünümünü (renkler, stil) tanımlar.
• JavaScript, sayfaya etkileşim ekler. HTML’yi (motor + tekerlek + gaz pedalını) kolayca kontrol edebilir ve değiştirebilir.

Yaygın olarak kullanılan web sitesi elemanlarından hangileri JavaScript tarafından oluşturulur?

JavaScript tarafından yaygın olarak oluşturulan içerik türleri temel olarak altı kategoriye ayrılabilir:

• Pagination (sayfalandırma)
• Internal links (Dahili bağlantılar)
• Top products (En iyi ürünler)
• Reviews (İncelemeler)
• Comments (Yorumlar)
• Main content – rarely (Ana içerik-nadiren)

Web sitemin JavaScript kullanıp kullanmadığını nasıl anlarım?

1. WWJD kullanın

Web sitenizdeki hangi elemanların JavaScript kullandığını tespit etmek için WWJD aracını kullanabilirsiniz. Bu araç bir web sayfasının JavaScript tarafından oluşturulan öğelerini tanımlar ve herhangi bir JavaScript etkinleştirilmeden bir sayfanın nasıl çalıştığına dair çok yönlü bir görünüm sağlar.

Araçta ilgili alana URL’nizi yapıştırıp sayfanızı taratmanız yeterli olacaktır.

WWJD, dört kategoriye ayrılmış bir rapor oluşturur:

• Ekran Görüntüsü – Bu, JavaScript’in etkin olduğu sayfanın ekran görüntüsü ile JavaScript’in devre dışı bırakıldığı aynı sayfanın ekran görüntüsü arasındaki görsel karşılaştırmadır.
• HTML – Bu, kaynak kodunu ve oluşturulan DOM’u görüntüleyerek ikisini karşılaştırmanıza olanak tanır.
• Meta – Bu, JavaScript’in oluşturulmasından önceki ve sonraki etiketleri (özellikle başlık, açıklama, meta robotlar ve kurallı etiketler) karşılaştırır.
• Bağlantılar – Bu, JavaScript tarafından belgeye eklenen tüm bağlantıları gösterir.

2. Tarayıcı eklentisi kullanın

İlk aracı kullanmak, web sitenizin JavaScript bağımlılığını kontrol etmenin tek yolu değildir. Chrome’da Quick JavaScript Switcher veya Firefox’ta JavaScript Switch gibi bir tarayıcı eklentisi de kullanabilirsiniz.

Eklentiyi kullandığınızda, şu anda bulunduğunuz sayfa JavaScript devre dışı bırakılarak yeniden yüklenir.

Sayfadaki bazı öğeler kaybolursa, JavaScript tarafından oluşturuldukları anlamına gelir.

Önemli bir ipucu: WWJD yerine bir tarayıcı eklentisi kullanmaya karar verirseniz, sayfa kaynağına ve DOM’a (Belge Nesne Modeli) da bir göz attığınızdan ve kurallı etiketlerinize ve bağlantılarınıza dikkat ettiğinizden emin olun. JavaScript’in görsel olarak çok fazla değişmediği ve orada olduğunu bile fark etmediğiniz sıklıkla görülür. Ancak, potansiyel olarak ciddi sorunlara yol açabilecek şekilde meta verilerinizi değiştirebilir.

JavaScript için diğer hata ayıklama araçlarını keşfetmek isterseniz link bıraktığım içeriğime de göz atmanızı tavsiye ederim.

Önemli: JS web sitelerini denetlerken “kaynağı görüntüle” yeterli değildir.

Web sayfalarınızın kaynak kodunun içinde ne olduğunu araştırmanın bir SEO denetimindeki en önemli şeylerden biri olduğunu duyabilirsiniz. Ancak, işin içine JavaScript girince iş biraz daha karmaşık bir hal alıyor.

HTML, yalnızca tarayıcı tarafından sayfayı ayrıştırmak için kullanılan ham bilgileri temsil eden bir dosyadır. Paragrafları, resimleri, bağlantıları ve JS ve CSS dosyalarına yapılan referansları temsil eden bazı işaretlemeler içerir.

Sayfanızın ilk HTML’sini sağ tıklayıp Sayfa kaynağını görüntüleye tıklayarak görebilirsiniz.

Ancak, sayfa kaynağını görüntüleyerek JavaScript tarafından güncellenen dinamik içeriğin hiçbirini görmezsiniz.

JavaScript web sitelerinde bunun yerine DOM’a bakmalısınız. Yine sayfada sağ tıklayarak öğeyi inceleyerek (inspect element) bunu yapabilirsiniz.

HTML ile DOM arasındaki farkı şu şekilde açıklayabilirim:

İlk HTML (sağ tıklama -> Sayfa kaynağını görüntüle) yalnızca bir yemek tarifidir. Pasta yapmak için hangi malzemeleri kullanmanız gerektiği hakkında bilgi verir. Bir dizi talimat içerir. Ama asıl pasta bu değildir.

DOM (sağ tıklama -> öğeyi incele) asıl pastadır. Başlangıçta bu sadece bir tariftir (bir HTML belgesi) ve bir süre sonra bir form kazanır ve sonra pişirilir (sayfa tamamen yüklenir).

Not: Google, sayfanızı tam olarak oluşturamazsa, yalnızca ilk HTML’yi (dinamik olarak güncellenen içerik olmayan) dizine ekleyebilir.

Artık sayfanızın hangi öğelerinin JavaScript’e bağlı olduğundan emin olduğunuza göre, Google’ın JavaScript içeriğinizle düzgün bir şekilde ilgilenip ilgilenemeyeceğini öğrenmenin zamanı geldi.

Google JavaScript’i İndexleyebilir Mi?

Javascript web’i eğlenceli hale getiriyor dinamik web siteleri oluşturmak için harika olanaklar sunuyor.

Peki Google ve diğer arama motorları için de JavaScript eğlenceli taraması ve indexlemesi kolay bir şey mi?

Bu bölümde Google’ın Javascript tarafında güçlü ve zayıf yönlerine bakacağız.

JavaScript içeriğinin Google tarafından dizine eklenmesi hiçbir zaman garanti edilmez.

Yakın zamanda JavaScript kullanan birden çok web sitesi araştırıldı. Vakaların ortalama %25’inde JavaScript içeriğinin Google tarafından dizine eklenmediği ortaya çıktı.

Test edilen web sitelerinden bazı örnekler:

Marka	İndekslenmeyen JavaScript İçerik Yüzdesi
Nike	%22
H&M	%35
Sephora	%55
Trustpilot	%77
Yoox	%92

Öte yandan, test edilen bazı web siteleriyse çok başarılı oldu:

Marka	İndekslenen JavaScript İçerik Yüzdesi
AllRecipes.com	%100
Boohoo.com	%99

Gördüğünüz gibi, Google bazı web sitelerindeki JavaScript içeriğini diğerlerinden çok daha iyi dizine ekleyebilir. Bu, bu sorunların kendinden kaynaklı olduğu ve önlenebileceği anlamına gelir. Nasıl olduğunu öğrenmek için okumaya devam edin.

HTML web sitelerinde bile içeriğin dizine eklenmesinin garanti edilmediğini bilmek de önemlidir. Yanlış gidebilecek birkaç şey daha olduğu için JavaScript işi daha karmaşık hale getirir.

Google (ve diğer arama motorları) JavaScript’te neden zorlanabilir?

1. JavaScript Taramasının Karmaşıklığı

Geleneksel HTML web sitelerinin taranması durumunda, her şey kolay ve anlaşılırdır ve tüm süreç ışık hızındadır:

1. Googlebot bir HTML dosyasını indirir.
2. Googlebot, bağlantıları kaynak koddan alır ve aynı anda ziyaret edebilir.
3. Googlebot, CSS dosyalarını indirir.
4. Googlebot, indirilen tüm kaynakları Google’ın Dizin Oluşturucusuna gönderir.
5. Dizin oluşturucu sayfayı dizine ekler.

Google için, JavaScript tabanlı bir web sitesini taramaya gelince işler karmaşıklaşıyor:

1. Googlebot bir HTML dosyasını indirir.
2. Googlebot, yalnızca JavaScript yürütüldükten sonra sürece dahil edildiğinden kaynak kodda hiçbir bağlantı bulamaz.
3. Googlebot, CSS ve JS dosyalarını indirir.
4. Googlebot, JavaScript’i ayrıştırmak, derlemek ve yürütmek için Google Web Oluşturma Hizmetini (Google Web Rendering Service) kullanmalıdır. WSR Google’ın indexleme aracının bir parçasıdır.
5. WRS, verileri harici API’lerden, veritabanından vb. alır.
6. Dizin oluşturucu içeriği dizine ekleyebilir.
7. Google, yeni bağlantılar keşfedebilir ve bunları Googlebot’un tarama kuyruğuna ekleyebilir. HTML web sitesi söz konusu olduğunda, bu ikinci adımdır. Burada ise 7. adım!

Bu arada, JavaScript’i oluştururken ve dizine eklerken ters gidebilecek birçok şey var. Gördüğünüz gibi, JavaScript dahil olduğunda tüm süreç çok daha karmaşık. Bunun için aşağıdaki hususlar dikkate alınmalıdır:

• JavaScript dosyalarını ayrıştırmak, derlemek ve çalıştırmak hem kullanıcılar hem de Google için çok zaman alıcıdır. Kullanıcılarınızı mutlaka düşünün! Web sitenizin kullanıcılarının yarısının web sitenizi cep telefonlarında görüntülediği söylemek çok uçuk bir iddaa olmayacaktır. Bir mobil cihazda 1 MB JavaScript’i ayrıştırmanın ne kadar sürdüğünü biliyor musunuz? Google’dan Sam Saccone’a göre: Samsung Galaxy S7 ~850ms’de ve Nexus 5 ~1700ms’de yapabilir. JavaScript’i ayrıştırdıktan sonra derlenmesi ve yürütülmesi gerekir, bu da ek zaman alır. Her saniye önemlidir.
• JavaScript açısından zengin bir web sitesi söz konusu olduğunda, Google, web sitesi tamamen oluşturulana kadar içeriği genellikle dizine ekleyemez.
• İşleme süreci daha yavaş olan tek şey değildir. Aynı zamanda yeni bağlantılar keşfetme süreci için de durum aynıdır. JavaScript açısından zengin web sitelerinde, Google’ın sayfa oluşturulmadan önce bir sayfadaki bağlantıları bulamaması yaygın bir durumdur.

2. Googlebot Gerçek Bir Tarayıcı Gibi Davranabilir mi?

Hayır, Googlebot gerçek bir tarayıcı gibi davranmaz. Web Rendering Service konusuna daha detaylı girelim.

Bildiğiniz gibi Googlebot, Chrome’un en yeni sürümünü temel alır. Bu, Googlebot’un sayfaları oluşturmak için tarayıcının geçerli sürümünü kullandığı anlamına gelir. Ama tam olarak aynı değildir.

Googlebot, tıpkı bir kullanıcının tarayıcı kullanırken yaptığı gibi web sayfalarını ziyaret eder. Ancak, Googlebot tipik bir Chrome tarayıcısı değildir.

• Googlebot, kullanıcı izin isteklerini reddeder. (ör. Googlebot, otomatik video oynatma isteklerini reddeder).
• Çerezler, yerel ve oturum depolaması, sayfa yüklemelerinde temizlenir. İçeriğiniz çerezlere veya diğer depolanmış verilere dayanıyorsa, Google onu almaz.
• Tarayıcılar her zaman tüm kaynakları indirir. Googlebot indirmemeyi seçebilir.

İnternette gezinirken, tarayıcınız (Chrome, Firefox, Opera, her neyse) bir web sitesinin içerdiği tüm kaynakları (resimler, komut dosyaları, stil sayfaları gibi) indirir ve hepsini sizin için bir araya getirir.

Ancak Googlebot, tarayıcınızdan farklı davrandığından, amacı tüm interneti taramak ve değerli kaynakları ele geçirmektir.

www çok büyük olsa da, Google, tarayıcılarını performans için optimize eder. Bu nedenle Googlebot bazen sunucudaki tüm kaynakları yüklemez. Sadece bu da değil, Googlebot karşılaştığı tüm sayfaları ziyaret bile etmez.

Google’ın algoritmaları, oluşturma açısından belirli bir kaynağın gerekli olup olmadığını tespit etmeye çalışır. Değilse, Googlebot tarafından getirilmeyebilir. Google, resmi yönergelerinde web sitesi sahiplerini bu konuda uyarır.

Googlebot and its Web Rendering Service (WRS) component continuously analyze and identify resources that don’t contribute essential page content and may not fetch such resources.

Kaynak: Google’s Official Documentation

Türkçesi: Googlebot ve Web Oluşturma Hizmeti (WRS) bileşeni, temel sayfa içeriğine katkıda bulunmayan ve bu tür kaynakları getiremeyen kaynakları sürekli olarak analiz edip tanımlar.

Googlebot gerçek bir tarayıcı gibi davranmadığından, Google JavaScript dosyalarınızdan bazılarını seçmeyebilir. Bunun nedeni, algoritmalarının işleme açısından gerekli olmadığına karar vermesi veya yalnızca performans sorunları nedeniyle (bir komut dosyasının yürütülmesi çok uzun sürmesi) olabilir.

Ek olarak, Google’da geliştirici olan Martin Splitt tarafından onaylandığı üzere Google, bir sayfanın oluşturulduktan sonra (JS yürütüldükten sonra) fazla değişmediğine ve bu nedenle gelecekte oluşturulmayacağına karar verebilir.

Ayrıca, JavaScript’in Google tarafından oluşturulması hala geciken bir süreç olmaya devam ediyor. (ancak bu, Google’ın JavaScript’i oluşturmasına kadar genellikle haftalarca beklemek zorunda kaldınan 2017-2018’den çok daha iyi durumda).

İçeriğinizin görünmesi için Google’ın tıklamasını, kaydırmasını veya başka bir işlem gerçekleştirmesini gerektiriyorsa, dizine eklenmez.

Son bir şey daha Google’ın oluşturucusunda zaman aşımları var. Scriptlerinizi oluşturmak çok uzun sürerse, Google bunu atlayabilir.

JavaScript İçeriğini Google’a Sunmanın Farklı Yolları Nelerdir?

Web sayfalarınızı hem kullanıcılara hem de arama motorlarına sunmanın birkaç yolu vardır.

Ve bunları anlamak, yalnızca JavaScript bağlamında değil, SEO hakkında konuşurken de çok önemlidir.

Web siteniz için doğru olan nedir: İstemci tarafı oluşturma (CSR), sunucu tarafı oluşturma (SSR) veya belki daha karmaşık bir şey? Bu bölümde, hangi çözümün ihtiyaçlarınıza uygun olduğunu bildiğinizden emin olacaksınız.

Google’ın JavaScript’i tarayıp tarayamayacağını, oluşturabileceğini ve dizine ekleyip ekleyemeyeceğini tartışırken, iki çok önemli kavramı ele almamız gerekiyor: Sunucu tarafı oluşturma(server-side rendering) ve istemci tarafı oluşturma(clinet-side rendering).

JavaScript ile ilgilenen her SEO’nun bunları anlaması gerekir.

Geleneksel yaklaşımda (server-side rendering), bir tarayıcı veya Googlebot, sayfayı tamamen açıklayan bir HTML dosyası alır. İçerik kopyası zaten oradadır. Genellikle, arama motorlarının sunucu tarafında oluşturulan JavaScript içeriğiyle ilgili herhangi bir sorunu olmaz.

Giderek daha popüler hale gelen istemci tarafı oluşturma(client-side rendering) yaklaşımı biraz farklıdır ve arama motorları bazen bununla başa çıkmakta zorlanabilir.

Bu yaklaşımla, bir tarayıcının veya Googlebot’un ilk yüklemede boş bir HTML sayfası (içerik kopyası çok az olan veya hiç olmayan) alması oldukça yaygındır. Ardından asıl olay gelir: JavaScript, içerik kopyasını sunucudan eşzamansız olarak indirir ve ekranınızı günceller.

Pasta yapma benzetmemizi hatırlıyor musun? O işte burada da geçerli:

• İstemci tarafı oluşturma(client-side rendering), bir yemek tarifi gibidir. Google, pişirilmesi ve toplanması gereken kek tarifini alır.
• Sunucu tarafı oluşturma(server-side rendering). Google, pastayı tüketmeye hazır hale getirir. Pişirmeye gerek yoktur.

Web’de bu iki yaklaşımın bir karışımını göreceksiniz.

1. Sunucu Tarafı Oluşturma Nedir? (Server-side Rendering)

Sunucu tarafı oluşturma (SSR), bir uygulamanın sunucudaki HTML dosyalarını istemci için tamamen oluşturulmuş bir HTML sayfasına dönüştürme yeteneğidir. Web tarayıcısı, istemciye tam olarak oluşturulmuş bir sayfa göndererek anında yanıt veren sunucudan bir bilgi talebi gönderir.

Google herhangi bir nedenle JavaScript içeriğinizi dizine ekleyemediğinde, çözümlerden biri server-side rendering uygulamaktır. Netflix, Marvel, Staples, Nike, Hulu, Expedia, Argos ve Booking.com gibi web siteleri server-side rendering’den yararlanır.

Yine de bir sorun var: Pek çok geliştirici sserver-side rendering’i uygulamakta zorlanıyor. (ancak durum giderek daha iyi hale geliyor!).

SSR’nin daha hızlı uygulanmasını sağlayabilecek bazı araçlar vardır:

Framework	Çözüm
React	Next.js, Gatsby
Angular	Angular Universal
Vue.js	Nuxt.js

Geliştiriciler için ipucum: Web sitenizin sunucu tarafında oluşturulmasını istiyorsanız, doğrudan DOM’da çalışan işlevleri kullanmaktan kaçınmalısınız. Google’da geliştirici uzmanı olan Wassim Chegham’dan alıntı yapmama izin verin: “Aşağıda önereceğim EN ÖNEMLİ en iyi uygulamalardan biri: DOM’a asla dokunma.”

2. Dinamik Oluşturma Nedir? (Dynamic Rendering)

Başka bir uygun çözüm, dinamik oluşturma olarak adlandırılır.

Dinamik oluşturma, onu çağıran kullanıcı aracısına(user agent) dayalı olarak içerik sunma sürecidir. Bu, insan kullanıcılar için sitenizin istemci tarafında oluşturulmuş(client-side rendered) bir sürümünün ve arama motorları için ayrı bir sunucu tarafı sürümünün sunulması anlamına gelir.

Bu yaklaşımda, kullanıcılara tam özellikli bir JavaScript web sitesi sunarsınız. Aynı zamanda sunucunuz Googlebot’a (ve/veya diğer botlara) web sitenizin statik bir sürümünü gönderir.

Dinamik oluşturma, Google tarafından resmi olarak desteklenen bir yaklaşımdır.

Web sitenizde dinamik oluşturmayı uygulamak için bu araçları/hizmetleri kullanabilirsiniz:

• Prerender.io
• Puppeteer
• Rendertron

Google ayrıca dinamik oluşturmanın nasıl başarılı bir şekilde uygulanacağını açıklayan kullanışlı bir kılavuz sağlar.

2020’den itibaren Google, iki durumda dinamik oluşturmanın kullanılmasını önerir:

• Hızla değişen dizinlenebilir, JS tarafından oluşturulan içerik için.
• Tarayıcılar tarafından desteklenmeyen JS özelliklerini kullanan içerikler için.

Başarılı JavaScript SEO’nun Temelleri Nelerdir?

Artık JavaScript’in Google’ın işini biraz daha karmaşık hale getirdiğini biliyorsunuz.

Ve bu nedenle, JavaScript web sitenizin Google’da başarılı olmasını sağlamak için almanız gereken ek aksiyonlar vardır.

JavaScript SEO ilk başta korkutucu görünebilir, ancak endişe etmenizi gerektirecek bir durum yoktur. Bu bölüm, web sitenizdeki olası sorunları teşhis etmenize ve temel bilgileri doğru almanıza yardımcı olacaktır.

Burada rol oynayan üç faktör var:

1) Taranabilirlik (Google, web sitenizi uygun bir yapı ile tarayabilmeli ve tüm değerli kaynakları keşfedebilmelidir)

2) Oluşturulabilirlik (Google, web sitenizi oluşturabilmelidir)

3) Tarama bütçesi (Google’ın web sitenizi taraması ve oluşturması ne kadar sürer).

JavaScript’i oluşturmak, tarama bütçenizi etkileyebilir ve Google’ın sayfalarınızı dizine eklemesini geciktirebilir.

JavaScript içeriğiniz arama motoru dostu mu?

Google ve diğer arama motorlarının JavaScript içeriğinizi dizine ekleyip ekleyemediğini kontrol etmek için kullanabileceğiniz bir kontrol listesi.

1. Google’ın web sitenizi teknik olarak oluşturup oluşturamayacağını kontrol edin.

Bir geliştirici, web sitesi sahibi veya SEO olarak, Google’ın JavaScript içeriğinizi teknik olarak oluşturabildiğinden her zaman emin olmalısınız. Chrome’u açıp sorun olup olmadığına bakmak yeterli değil.

Bunun yerine, Google’ın Search Console’da bulunan URL Denetleme Aracındaki Canlı Testi kullanın. Googlebot’un sayfanızdaki JavaScript içeriğini tam olarak nasıl oluşturacağını gösteren bir ekran görüntüsü görmenize olanak tanır.

Ekran görüntüsünü inceleyin ve kendinize şu soruları sorun:

• Ana içerik görünür durumda mı?
• Google, benzer makaleler ve ürünler gibi alanlara erişebiliyor mu?
• Google, sayfanızın diğer önemli unsurlarını görebiliyor mu?

Daha detaya inmek istiyorsanız, oluşturulan rapordaki HTML sekmesine de göz atabilirsiniz.

Burada, sayfanızın oluşturulduktan sonraki durumunu temsil eden işlenmiş kod olan DOM’yi görebilirsiniz.

Google sayfanızı düzgün bir şekilde oluşturamazsa ne olur?

Google, sayfanızı beklenmedik bir şekilde görüntüleyebilir.

Yukarıdaki resme baktığınızda, sayfanın kullanıcıya nasıl göründüğü ile Google’ın nasıl oluşturduğu arasında önemli bir fark olduğunu görebilirsiniz.

Bunun birkaç olası nedeni vardır:

• Google, oluşturma sırasında zaman aşımlarıyla karşılaştı.
• Oluşturma sırasında bazı hatalar oluştu.
• Googlebot’tan önemli JavaScript dosyalarını engellediniz.

Daha fazla bilgi sekmesine tıklayarak, Google içeriğinizi oluşturmaya çalışırken herhangi bir JavaScript hatası oluşup oluşmadığını kolayca kontrol edebilirsiniz.

Önemli not: Google’ın web sitenizi düzgün bir şekilde oluşturabilmesini sağlamak bir zorunluluktur.

Ancak, içeriğinizin dizine ekleneceğini garanti etmez. Bu da bizi ikinci noktaya getiriyor.

2. İçeriğinizin Google’da dizine eklenip eklenmediğini kontrol edin.

JavaScript içeriğinizin gerçekten Google’da dizine eklenip eklenmediğini kontrol etmenin iki yolu vardır.

• “Site:” operatörünü kullanmak – en hızlı yöntem.
• Google Search Console’u kontrol etmek – en doğru yöntem.

Kısa bir not olarak: Google’ın JavaScript içeriğinizi dizine eklemesini sağlamanın bir yolu olarak Google Cache’i kontrol etmeyi güvenmemelisiniz.

Site: Komutu

İçeriğinizin Google tarafından dizine eklenip eklenmediğini kontrol etmek için en iyi seçeneklerden biri “site:” komutudur. Bunu iki basit adımda yapabilirsiniz.

1. Sayfanın kendisinin Google dizininde olup olmadığını kontrol edin.

İlk olarak, URL’nin kendisinin Google’ın dizininde olduğundan emin olmalısınız. Bunu yapmak için Google’a “site:URL” yazın (burada URL, kontrol etmek istediğiniz sayfanın URL adresidir)

Artık, URL’nin aslında Google’ın veritabanında olduğunu bildiğinizde şunları yapabilirsiniz:

2. Google’ın JavaScript içeriğinizi gerçekten dizine ekleyip eklemediğini kontrol edin.

Bu da çok kolaydır. WWJD aracını kullandıktan sonra sayfanızın hangi bölümlerinin JavaScript’e bağlı olduğunu bilmek için, sayfanızdan bir metin parçası kopyalamanız ve Google’a şu komutu yazmanız yeterlidir: site:{web siteniz} “{içerikten aldığınız parça}”.

içerik parçanızı içeren bir snippet görünürse, içeriğiniz Google’da dizine eklenmiş demektir.

JS tarafından oluşturulan çeşitli içerik türlerinde “site” komutunu kontrol etmenizi öneririm.

Kişisel tavsiyem: Gizli modda bir parça içeren bir “site:” sorgusu gerçekleştirin.

Google Search Console

İçeriğinizin Google tarafından dizine eklenip eklenmediğini kontrol etmenin daha kesin, ancak daha yavaş bir yöntemi Google Search Console kullanmaktır.

Söz konusu URL’yi URL inceleme aracında yazın.

Ardından taranan sayfayı görüntüle’yi tıklayın. Bu size Google’da indekslenen sayfanızın kod bütününü gösterecektir.

JavaScript tarafından oluşturulan içeriğinizin önemli parçalarının burada olup olmadığından emin olmak için sadece Ctrl+F yapın.

Google’ın içeriğinizi düzgün bir şekilde dizine ekleyip eklemediğini görmek için bu işlemi rastgele bir URL örneği için tekrarlamanızı öneririm. Sadece bir sayfayı yapıp bırakmayın; makul sayıda sayfa kontrol edin.

Google JavaScript içeriğimi dizine eklemezse ne olur?

Daha önce de belirttiğim gibi, bazı web sitelerinin JavaScript içeriklerini dizine almayla ilgili sorunları büyük ölçüde kendi kendine neden olur. Bu sorunla mücadele ediyorsanız, ilk etapta neden olabileceğini öğrenmelisiniz.

JavaScript içeriğinizin Google tarafından dizine alınmamasının birden çok nedeni vardır. Birkaç tanesi şöyledir:

• Google zaman aşımlarıyla karşılaşır. Googlebot’u ve kullanıcıları içeriği görene kadar birkaç saniye beklemeye zorlamadığınızdan emin misiniz?
• Google oluşturma(rendering) sorunları ile karşılaştı. Google’ın oluşturup oluşturamayacağını görmek için URL denetleme aracını kontrol ettiniz mi?
• Google bazı kaynakların taramasını(yani JavaScript dosyaları) atlamaya karar verdi.
• Google, içeriğin düşük kaliteli olduğuna karar verdi.
• Google’ın JavaScript içeriğini gecikmeli olarak dizine ekledi.
• Google bu sayfayı keşfedemedi. Site haritası ve dahili bağlantılarla erişilebilir olduğundan emin misiniz?

Twitter, Facebook ve diğer sosyal medya siteleri JavaScript Çalıştırır Mı?

Ne yazık ki, sosyal medya siteleri, tarayıcılarının web sitelerinde bulduğu JavaScript’i işlemez.

Yinelemek gerekirse, Facebook, Twitter veya LinkedIn gibi sosyal medya platformları JavaScript çalıştırmaz.

Bu senin için ne anlama geliyor?

İlk HTML’ye Twitter Cards yanı sıra Facebook Open Graph işaretlemesini eklemelisiniz. Aksi takdirde, insanlar içeriğinizi sosyal medyada paylaştığında düzgün bir şekilde görüntülenmeyecektir.

Hemen bir örnekle göstereyim durumu. Angular.io ve Vue.js bağlantılarını Twitter’da paylaştığınızda nasıl göründüğünü görelim:

Angular.io ikinci en popüler JavaScript framework’üdür. Maalesef onlar için Twitter JavaScript oluşturmaz ve bu nedenle JavaScript tarafından oluşturulan Twitter Cards işaretlemesini alamaz.

Şu linke tıklar mısın? Muhtemelen değil.

Şimdi bunu Vue.js bağlantısıyla karşılaştırın . Twitter kartı özel resim ve bilgilendirici bir açıklama ile çok daha iyi görünüyor!

Sosyal medyadan gelen trafiği önemsiyorsanız, ilk HTML’ye Twitter kartını ve Facebook Open Graph işaretlemesini yerleştirdiğinizden emin olun!

JS Web Sitelerinde Sık Karşılaşılan Görünmez Tehlikeler Nelerdir?

Bu noktada JavaScript’in Google ve diğer arama motorları tarafından nasıl işlendiğini iyi anlamalısınız.

Bu temeller yerine oturduğunda, başarılı yapacağınıza garanti veririm. JavaScript SEO’da fark edilmesi zor olan birkaç uyarı var ve bunlardan kaçınmanıza yardımcı olacak bilgileri bu bölümde vereceğim.

Artık temel bilgilerin çoğunu ele aldığımıza göre, SEO’ların ve web sitesi yöneticilerinin JavaScript tabanlı web sitelerini optimize ederken yaptıkları bazı yaygın hatalara bakalım.

JavaScript ve CSS Dosyalarını Googlebot İçin Engellemeyin

Googlebot, JavaScript içeriğini tarayabildiğinden ve oluşturabildiğinden, oluşturma için gereken dahili veya harici kaynaklara erişmesini engellemek için hiçbir neden yoktur.

Sayfalandırmayı (Pagination) doğru uygulayın

Birçok popüler web sitesi, büyük miktarda içeriği parçalamanın bir yolu olarak sayfalandırmayı kullanır. Ne yazık ki, bu web sitelerinin Googlebot’un yalnızca sayfalandırmanın ilk sayfasını ziyaret etmesine izin vermesi çok yaygındır.

Sonuç olarak, Google büyük miktarlardaki değerli URL’leri kolayca keşfedemez.

Örneğin, e-ticaret web siteleri söz konusu olduğunda, Googlebot, sayfalandırılmış kategori sayfalarında kategori başına yalnızca 20-30 ürüne ulaşabilecektir.

Sonuç olarak, Googlebot büyük olasılıkla tüm ürün sayfalarına erişemez.

Bu nasıl olur?

Birçok web sitesi uygun bir <a href> bağlantısı kullanmayarak sayfalandırmayı hatalı bir şekilde uygularlar. Bunun yerine ziyaretçilerin tıklamasına bağlı olan sayfalandırmayı kullanırlar.

Başka bir deyişle, Googlebot’un ardışık sayfalara ulaşmak için bir düğmeyi (Daha fazla öğe görüntüle) tıklaması gerekir.

Ama ne yazık ki, Googlebot düğmeleri kaydırmaz veya tıklamaz. Google’ın sayfalandırmanın ikinci sayfasını görmesine izin vermenin tek yolu, uygun bir <a href> bağlantısını kullanmaktır.

Önemli Not: Bağlantıların rel=”next” altında gizlenmesi de yardımcı olmuyor. Google, Mart 2019’da artık bu işaretlemeyi kullanmadıklarını duyurdu.

URL’lerde Hashtag kullanmayın

Birçok JavaScript web sitesinin hashtag (#) içeren URL’ler oluşturması hala yaygındır. Bu tür URL’lerin Googlebot tarafından taranmaması gibi bir tehlike vardır:

• Hatalı URL: example.com/#/beyaz-masa/
• Hatalı URL: example.com#beyaz-masa
• İyi URL: example.com/beyaz-masa/

URL’deki tek bir ek karakterin size zarar veremeyeceğini düşünebilirsiniz. Aksine çok zarar verebilir.

For us, if we see the kind of a hash there, then that means the rest there is probably irrelevant. For the most part, we will drop that when we try to index the content (…). When you want to make that content actually visible in search, it’s important that you use the more static-looking URLs.

Kaynak: John Mueller

Türkçesi: URL’de bir çeşit hashtag görürsek geri kalan kısmından muhtemelen alakasız olduğunu düşünürüz. Bu gibi durumlarda çoğunlukla içeriği indekse almaya çalışırken bunu bırakırız. Bu içeriği arama sonuçlarında görünür hale getirmek isterseniz daha statik görünen bir URL kullanmalısınız.

Bu nedenle, URL’nizin her zaman şöyle görünmediğinden emin olmanız gerektiğini hatırlamanız gerekir: example.com/beyaz-masa#dsfsd

Angular 1, varsayılan olarak hashtag tabanlı URL’ler kullanır, bu nedenle web siteniz bu framework kullanılarak oluşturulduysa dikkatli olun! $locationProvider’ı yapılandırarak bunu düzeltebilirsiniz (bunu nasıl yapacağınıza dair bir eğitime bakabilirsiniz).

Neyse ki, Angular framework’ün daha yeni sürümleri, varsayılan olarak Google dostu URL’leri kullanır.

JavaScript yönlendirmelere dikkat edin

JavaScript yönlendirmeleri belirli durumlarda kullanışlı bir çözüm olsa da, çevrimiçi görünürlüğünüzü çeşitli şekillerde olumsuz etkileyebilirler.

Kullanıcılarınızı kalıcı olarak sayfanızın yeni bir sürümüne yönlendirmek istiyorsanız, sunucu tarafı 301 yönlendirmesi kullanmak her zaman daha iyidir. Bunun yerine bir JavaScript yöntemi kullanarak kendinizi maruz bıraktığınız birkaç risk vardır.

Bonus Bilgiler

Bu bölümde JavaScript SEO hakkında en yaygın soruları bir araya getirdim. Soru ve cevapları dikkatli bir şekilde incelemenizi tavsiye ederim.

JavaScript SEO için kötü müdür?

JavaScript, SEO sorunlarını teşhis etmeyi çok daha zor hale getirir. Google’ın JavaScript kodunuzu web sitenizin her sayfasında çalıştıracağına dair bir garantiniz yok.

JavaScript, web sitenizi Google’da başarılı kılmak için taşımanız gereken ekstra bir yük getirir.

Ancak bu, JavaScript’in SEO için nihayetinde kötü olduğu anlamına gelmez. JavaScript ağırlıklı birçok web sitesi, organik görünürlük söz konusu olduğunda son derece iyi performans gösteriyor.

Daha da önemlisi JavaScript, tıpkı HTML ve CSS gibi modern web’in temel bir öğesidir. JavaScript olmaya devam edecek, bu yüzden ondan kaçmak yerine bu zorlukla yüzleşmelisiniz.

JavaScript SEO olmadan olabilecek en kötü şey nedir?

Geçmişte, JavaScript uygulanmış içeriğinin Google tarafından dizine eklenmemesi nedeniyle işlerinde onarılamaz zarara uğrayan Hulu gibi web sitelerinin örneklerini görmüştük.

Yapılan bazı araştırmalarda, JavaScript içeriğinin dizine eklenmesinin hiçbir zaman garanti edilmediğini gösterdi. Ancak daha da kötüsü, JavaScript içeriğinizi dizine eklenmezse, tüm sayfanızın da dizine alınmamasına neden olabilir.

Google, JavaScript’i geniş ölçekte işleme ve dizine ekleme yeteneğini hızla geliştiriyor, ancak hala dikkat edilmesi gereken birçok uyarı var.

Ancak, mevcut kaynaklar ve teknoloji söz konusu olduğunda diğer arama motorlarının (ve sosyal medyanın) Google’ın çok gerisinde olduğunu unutmamalısınız.

Web sitenizin içeriğinden herhangi biri JavaScript’e bağlıysa, arama motorlarının buna kolayca erişebildiğinden, oluşturabildiğinden ve dizine eklediğinden emin olmanız gerekir.

Googlebot bir web sitesindeki düğmeleri tıklayabilir veya kaydırabilir mi?

Googlebot sayfalarınızdaki butonları kaydırmaz ya da tıklamaz. İçeriği bir sunucudan yalnızca bir kullanıcı bir düğmeyi tıkladıktan sonra getirirseniz, Google’ın o içeriği göremeyeceğini unutmamalısınız.

JavaScript’in web performansım üzerindeki etkisini azaltabilir miyim?

Evet. Örneğin, gerekli bant genişliği kullanımını azaltmak için JavaScript kodu küçültülebilir ve sıkıştırılabilir. Yalnızca gerekli olduğu anda gerekli olan kodu sunmak için three shaking denilen yani ölü kodu elimine eden teknikleri ya da kodu parçalara ayırma gibi teknikleri de kullanabilirsiniz.

Önbelleğe alma gibi diğer teknikler de web performansınızı artırmanıza yardımcı olabilir.

Sonuç

Finalde toparlama adına özet geçmem gerekirse:

• Google’ın oluşturma hizmeti, Chrome’un en son sürümünü temel alır. Ancak, birçok sınırlaması vardır (tüm kaynakları getirmeyebilir, bazı özellikler devre dışı bırakılmıştır). Google algoritmaları, oluşturma açısından bir kaynağın gerekli olup olmadığını tespit etmeye çalışır. Gerekli olmadığına karar verirse, muhtemelen Googlebot tarafından getirilmeyecektir.
• Genellikle web sitenizin sadece kaynak sayfasını (HTML) analiz etmek yeterli değildir. Bunun yerine, DOM’u analiz etmelisiniz (Sağ tıklama -> İnceleme aracı).
• Bir JavaScript web siteniz varsa ve sosyal medyadan gelen trafiği önemsiyorsanız, sosyal paylaşımlarınızın nasıl göründüğünü kontrol edin. (resimleri ve özel açıklamaları olup olmadığını).
• Google’ın JavaScript içeriğinizi nasıl dizine eklediğini kontrol etmek için Google önbelleğini kullanmamalısınız. Google Cache yalnızca tarayıcınızın Googlebot tarafından toplanan HTML’yi nasıl yorumladığını söyler. Google’ın içeriğinizi nasıl oluşturduğu ve dizine eklediği ile tamamen alakasızdır.
• JavaScript çok hataya açıktır. JavaScript kodunuzdaki tek bir hata, Google’ın sayfanızı oluşturamamasına neden olabilir.
• URL denetleme aracını sık sık kullanın. Google’ın JavaScript içeriğinizi düzgün bir şekilde oluşturup dizine ekleyemediğini size söyleyecektir.
• Google’ın JavaScript’inizi dizine ekleyebildiğinden emin olmak için web performansını göz önünde bulundurmalısınız. Kullanıcılarınızın iyiliği için yapın ve arama motorları tarafından dizine alınabilir olsun.
• Google sayfanızı oluşturamazsa, dizine eklemek için ham HTML’yi alabilir. Bu da gerçek içeriği olmayan boş bir sayfayı dizine eklemesine sebeb olabilir.

Kaynak: https://www.onely.com/blog/ultimate-guide-javascript-seo/