JavaScript SEO: Uygulanabilecek En İyi Pratikler ve Hata Ayıklama Araçları

Last Updated on 30 Ağustos 2021 by Yıldırım SERTBAŞ

JavaScript, doğru kullanıldığında bazı avantajlara sahiptir. Fakat hatalı kullanımlarda sitenizi bir anda yok edebilir. Bu içerikte JavaScript SEO hakkında uygulanabilecek en iyi pratikler ve Javascript hata ayıklama araçları hakkında bilgiler bulabilirsiniz.

JavaScript, web sitesi sayfalarını daha etkileşimli ve daha az sıkıcı hale getirmek için harika bir seçenektir.

Ancak, yanlış uygulandığında bir web sitesinin SEO’sunu öldürmenin de iyi bir yoludur.

Web siteniz ne kadar harika olursa olsun, Google, JavaScript sorunları nedeniyle web sitenizi dizinine ekleyemezse, organik trafiğinizin hatırı sayılır bir bölümünü kaybedebilir, sıralamalardan aniden düşebilirsiniz.

Bu yazıda, JavaScript SEO çalışmalarında yapılabilecek en iyi pratikler hakkında bilmeniz gereken her şeyi ve JavaScript sorunlarında hata ayıklamak için kullanabileceğiniz araçları öğreneceksiniz.

JavaScript SEO için Neden Tehlikelidir: Gerçek Dünyadan Örnekler

SEO forumlarında sıkça karşılaşılan sorulardan bir tanesi sitemi React ile yeni dizayn ettim. Web sitemin trafiği inanılmaz derecede düştü. Ne oldu siteme?

React’i başka herhangi bir JS framework’ünün yerine kullanabilirsiniz bu çokda önemli değildir. Fakat herhangi biri, SEO etkileri dikkate alınmadan uygulanırsa bir web sitesine zarar verebilir.

İşte JavaScript’te nelerin yanlış gidebileceğine dair bazı örnekler.

Örnek 1: Web Sitesindeki Navigasyon Bağlantıları Taranabilir Değil

website navigasyonu taranmıyor - Javascript SEO

Buradaki sorun site navigasyonundaki bağlantılar web standartlarına uygun değildir. Sonuç olarak, Google bunları göremez veya takip edip tarayamaz.

  • Google’ın dahili sayfaları keşfetmesini zorlaştırır.
  • Web sitesi içerisindeki yetki düzgün bir şekilde dağıtılmamış olur.
  • Web sitesindeki sayfalar arasındaki ilişkilere dair net bir gösterge olmamış olur.

Sonuç olarak, Googlebot’un izleyemediği bağlantılara sahip bir web sitesi, dahili bağlantının gücünden yararlanamayacaktır.

Örnek 2: Uygun Olmayan Lazy Loading Uygulamasına Bağlı Görsel Aramalarda Azalma

yanlış lazy loading uygulaması - js seo

Lazy loading, sayfa yükleme süresini azaltmanın harika bir yolu olsa da, yanlış uygulandığında da tehlikeli olabilir.

Bu örnekte Lazy Loading, Google’ın sayfadaki resimleri görmesini engelliyor.

  • Lazy loading altında “gizlenen” içerik Google tarafından keşfedilmeyebilir. (yanlış uygulandığında).
  • İçerik Google tarafından keşfedilmezse, içerik sıralanmaz.

Sonuç olarak, görsel arama trafiği çok zarar görebilir. Görsel aramaya büyük ölçüde güvenen herhangi bir işletme için özellikle kritiktir.

Örnek 3: Web Sitesi SEO Dikkate Alınmadan React’e Geçirildi

sitenin react'e geçmesi

Bu örnek de sitenin React’e geçtikten sonra trafiğinin nerdeyse sıfırlandığı yani kaba tabirle sitenin çöpe döndüğü bir örnektir. Bu örnekteki sitede;

  • URL’ler taranabilir değildi.
  • Görseller taranabilir değildi.
  • Başlık etiketleri tüm web sitesi sayfalarında aynıydı.
  • Dahili sayfalarda metin içeriği bulunuyordu.

Bu örnekte yanlış olan nedir?

  • Google sayfada herhangi bir içerik görmezse, bu sayfayı sıralamaz.
  • Googlebot’a birden çok sayfa aynı görünüyorsa, bunlardan yalnızca birini seçip geri kalanını cananonikleştirebilir.

Bu örnekte, web sitesi sayfaları Google’a tamamen aynı görünüyordu, bu yüzden onları tekilleştirdi ve ana sayfayı kanonik olarak kullandı.

Google – JavaScript İlişkileri Hakkında Bilmeniz Gerekenler

Google’ın içeriğinizi nasıl ele aldığına gelince, bilmeniz gereken birkaç ana şey vardır.

Google İçeriğinizle Etkileşim Kurmaz

Googlebot, sayfalarınızdaki düğmeleri tıklayamaz, içeriği genişletemez / daraltamaz vb.

Googlebot, herhangi bir ek etkileşim olmaksızın yalnızca oluşturulan HTML’de bulunan içeriği görebilir.

Örneğin, genişletilebilir bir metin bölümünüz varsa ve metni kaynak kodda veya oluşturulmuş HTML’de mevcutsa, Google bunu dizine ekler.

Aksine, içeriğin başlangıçta sayfa kaynak kodunda veya DOM’da bulunmadığı ve yalnızca bir kullanıcı onunla etkileşim kurduktan sonra (ör. Bir düğmeyi tıkladıktan sonra) yüklendiği bir bölümünüz varsa, Google bu içeriği görmez.

Google Scroll Yapmaz

Googlebot, bir web sitesinde normal bir kullanıcı gibi davranmaz; sayfalarda gezinmez. Dolayısıyla, içeriğiniz sonsuz sayıda kaydırmanın arkasında “gizliyse”, Google bunu görmez.

Google, sadece bir tarayıcıda render edilen içeriği göremez (client-side rendering) server side’la karşılaştırdığımızda.

Bu nedenle, Google’ın web sitenizi dizine eklemesini ve sıralamasını istiyorsanız (ve trafiğe ve satışa ihtiyacınız varsa bunu istersiniz), client-side rendering kötü bir fikirdir.

Not: Client-side rendering isteğin taratıcı tarafında oluşturulması yani render edilmesidir. Süreç şu şekilde ilerler.

  • HTML dosyası indirilir, içerik okunur aynı zamanda sayfa içinde diğer linkler varsa onlara da gidilir.
  • İçeriğin önemli bir kısmı JS olduğu için JS kaynakları indirilir, içeriği okunur ve render edilmek üzere sıraya alınır.
  • CSS indirilir ve içeriği okunur.
  • İçeriği okunan JS render edilir ve sayfa oluşturulur.

Çoğu istek taratıcı tarafında çözümleneceği için çok iyi bir kullanıcı deneyimi oluşturur. TTFB çok iyi değerlerdedir ve sunucuya fazla yük bindirmez. Fakat bunlara rağmen Google’un okuması konusunda sıkıntılar çıkarır. Her sayfaya ayrı meta çalışmaları problemler çıkaracaktır.

Peki, JavaScript gerçekten bu kadar kötü müdür?

Javascript en ideal olacak şekilde siteye uygulandıysa tabiki bu kadar kötü de değildir.

Yazının ilerleyen kısımları da tam olarak uygulanabilecek en iyi pratikler hakkında olacak.

JavaScript SEO En İyi Pratikler

Web Standartlarına Göre Bağlantılar Ekleyin

“Web standartları” göz korkutucu gibi görünse de gerçekte bir HREF özelliğini kullanarak bağlantılarınızı buna göre vermek oldukça basit ve bir o kadar da etkili bir pratiktir.

<a href=”link buraya gelecek”>İlgili anchor text</a>

Bu şekilde, Google bağlantıları kolayca bulabilir ve takip edebilir (bunlara bir nofollow özelliği eklemediğiniz sürece.)

Web sitenize dahili bağlantılar eklemek için aşağıdaki teknikleri kullanmayın:

  • window.location.href = “/ page-url”
  • <a onclick=“goto(‘https://store.com/page-url’)”>
  • # page-url

Bu arada, insanları bu sayfanın belirli bir bölümüne getirmek istiyorsanız, bu da bir seçenek olarak düşünülebilir.

Ancak Google, URL’nizin “#” ile birlikte tüm varyasyonlarını dizine eklemeyecektir.

Web Standartlarına Göre Görsel Ekleme

Dahili bağlantılarda olduğu gibi, Googlebot’un resimleri kolayca keşfedip dizine ekleyebilmesi için resim kullanımı da web standartlarına uygun olmalıdır.

Keşfedilmek için, “src” HTML etiketinden bir resim bağlanmalıdır.

<img src=”görsel linki.png” />

Çoğu JavaScript tabanlı lazy load kütüphanesi, gerçek resim URL’sini depolamak için bir “data-src” attribute kullanır ve “src” etiketini, hızlı yüklenen bir yer tutucu resim veya gif ile değiştirir.

Örneğin:

<img data-src="görsel linki.png" class="inline lazyloaded" src="placeholder-imge.gif"></div>

<img data-src> resimle ilgili ek bilgileri depolar. Sayfa hızı optimizasyonuna yardımcı olur ve doğru uygulandığında iyi çalışır.

Google’ın yer tutucu yerine gerçek görüntünüzü almasını istiyorsanız, yer tutucu görüntüyü hedef görüntüyle değiştirin, böylece hedef görüntünün yolunu gösterir.

Son Google Search Central Live etkinliği sırasında, JavaScript Kütüphanesi kullanılarak geç yüklenen görüntülerle ilgili sorunların nasıl ayıklanacağına dair canlı bir örnek olay incelemesi yaptım.

Alternatif olarak, doğal Lazy Loading’i kullanarak JavaScript’i devre dışı da bırakabilirsiniz. Şimdilerde birçok tarayıcı tarafından desteklenmektedir.

Server-side Rendering Kullanın

Google’ın içeriğinizi okumasını ve sıralamasını istiyorsanız, bu içeriğin yalnızca kullanıcının tarayıcısında değil, sunucuda da bulunduğundan emin olmalısınız.

Alternatif olarak, kullanıcılara tarayıcılarında HTML + JavaScript içeriği sunulurken arama motorlarının algılanması ve bunlara statik HTML sayfaları sunulması anlamına gelen dinamik rendering de kullanabilirsiniz.

Oluşturulan HTML’nin Google’ın Okumasını İstediğiniz Tüm Ana Bilgilere Sahip Olduğundan Emin Olun

Oluşturulan HTML’nin aşağıdakiler gibi doğru bilgileri gösterdiğinden emin olmanız gerekir.

  • Sayfanın kopyası.
  • Görüntüler.
  • Kanonik etiket.
  • Başlık ve meta açıklama.
  • Meta robot etiketi.
  • Yapılandırılmış veriler.
  • hreflang.
  • Diğer önemli etiketler.

SEO için JavaScript Uygulamasında Hata Ayıklama Araçları

Doğru içeriği içerip içermediğini kontrol etmek için bir sayfanın yalnızca kaynak koduna bakmanızın gerektiği günler geride kaldı.

JavaScript, farklı öğeleri ekleyebilmesi, kaldırabilmesi veya değiştirebilmesi açısından bunu daha karmaşık hale getirdi. Kaynak koduna bakmak yeterli değildir; bunun yerine oluşturulan HTML’yi kontrol etmeniz gerekir.

Adım 1: Bir Web Sitesinin İçeriği Sunmak İçin Ne Kadar JavaScript’e Dayalı Olduğunu Kontrol Edin

JavaScript kullanan bir web sitesi gördüğümde genellikle yaptığım ilk şey, ona ne kadar bağlı olduğunu kontrol etmektir. Bunu yapmanın en kolay yolu, tarayıcınızda JS’yi devre dışı bırakmaktır.

Bunun için Web Developer Chrome uzantısını kullanıyorum.

Ayarları açın, JavaScript’i Devre Dışı Bırak’ı tıklayın ve sayfayı yeniden yükleyin:

javascript iptal edilmesi

Bunu yaptıktan sonra, herhangi bir JS olmadan bir sayfanın nasıl görüneceğini göreceksiniz.

Yukarıdaki örnekte, JavaScript olmadan hiçbir içeriğin mevcut olmadığını görebilirsiniz.

Bu yöntemin size JavaScript’in içerik dağıtımını ne kadar etkilediğine dair genel bir bakışı kazandıracaktır. Tabiki buradan yol çıkarak Google’ın içeriği indeksleyip indeksleyemeceği sonucuna varamayız.

Yukarıdaki gibi boş bir sayfa görseniz bile, bu hiçbir şeyin çalışmadığı anlamına gelmez. Bu, bir web sitesinin büyük ölçüde JavaScript’e dayandığı anlamına gelir.

Bu nedenle, bir sonraki adımda size göstereceğim araçlarla oluşturulan HTML’yi test etmeniz gerekir.

Adım 2: Googlebot’a Doğru İçeriğin ve Etiketlerin Sunulup Sunulmadığını Kontrol Edin

Google Mobile-friendly Test Tool

Google’ın Mobil Uyumluluk Test Aracı, bilgileri doğrudan Google’dan aldığınız için, mobil olarak oluşturulmuş HTML’yi kontrol etme söz konusu olduğunda en iyi ve en güvenilir araçlardan biridir.

Yapmanız gerekenler şunlardır.

  • Mobile-friendly Test Tool‘u açın.
  • URL’nizi kontrol edin.
  • HTML sekmesindeki bilgilere bakın.
Google Mobile-friendly Test Tool

Doğru bilgilere sahip olduğundan emin olmak için kodu kontrol etmeniz gerekeceğinden teknik SEO tarafı devreye girer.

Not: Bu kontrolleri yapmak için Zengin Sonuçlar Testi aracını da kullanabilirsiniz.

URL Inspection Tool in Google Search Console

URL denetleme aracı ayrıca, Googlebot’un sayfa içeriğinizi değerlendirmek için kullandığı sayfanızın ham HTML’sine erişmenizi sağlar.

url denetleme aracı

The Mobile-friendly Test Tool vs URL Inspection Tool

Peki, bu araçlar arasındaki fark nedir ve hangisi tercih edilir?

Kısa cevap, Mobil Uyumluluk Testi ve URL inceleme aracı aynı temel teknolojiyi kullandığından çıktıda hiçbir fark yoktur.

Yine de diğer yönlerden bazı farklılıklar vardır.

  • URL inceleme aracını kullanmak için, kontrol ettiğiniz web sitesinin Google Arama Konsoluna erişiminizin olması gerekir. Böyle bir erişiminiz yoksa Mobil Uyumluluk Testi’ni (veya Zengin Sonuçlar Testi) kullanın.
  • URL inceleme aracı size aynı sayfanın iki sürümünü gösterebilir – son taranan sürüm ve canlı sürüm. Bir şey JavaScript tarafından bozulmuşsa eğer kullanışlıdır ve yeni uygulamayı öncekiyle karşılaştırabilirsiniz.

Mobil Uyumluluk Testi ve Zengin Sonuçlar Testi size yalnızca mevcut canlı sayfa sürümünüz için çıktı sağlar.

Diğer Hata Ayıklama Araçları

View Rendered Source Chrome Eklentisi

Kaynak kodu ile işlenmiş HTML arasındaki farkı gösterdiği için bu uzantıyı seviyorum. Sayfada hangi JavaScript’in değiştiğine dair bir genel bakış sunar. En solda Raw yani ham HTML, ortada Rendered yani işlenmiş HTML en sağda da aradaki farkı belirtilen sütunu görebilirsiniz. Sarı ile işaretlenenler eklenmiş kırmızı ile işaretlenenler de silinmiş satırları gösterir.

ham html render html farkı

Not: Mobil olarak oluşturulmuş HTML ile masaüstü karşılaştırmasını kontrol ettiğinizden emin olun.

Bunu yapmak için, önce Chrome denetleme aracına bir mobil görünüm yüklemeniz ve ardından View Rendered Source uzantısını kullanmanız gerekir.

Chrome denetleme aracına bir mobil görünüm yükleyin ve ardından View Rendered Source uzantısını kullanmanız gerekir.

mobil görünüm

JavaScript Rendering Check

Bence bu, kodu kontrol etmenize bile gerek bırakmadığı için en kullanıcı dostu Javascript hata ayıklama aracıdır diyebilirim.

Sayfa kaynak kodundaki ana öğeleri, sizin için kontrol eder ve bunları render edilmiş HTML’deki aynı öğelerle karşılaştırır (yine, mobil sürümü kontrol ettiğinizden emin olun)

İlgili araca buradan erişebilirsiniz: https://www.searchviu.com

JS hata ayıklama - searchviu.com

Bu örnekte JavaScript’in sayfadaki dahili bağlantılar gibi ana bir unsuru değiştirdiğini görüyorum. Aracın farklı bir bölümünde değişen elemanlarla ilgili detaylı bilgilendirmeyi görebilirsiniz.

Tabi bu tip değişiklikler her zaman kötü bir şey değildir, ancak bir SEO uzmanı olarak, bu değişikliklerin kontrol ettiğiniz sayfaya zarar verip vermediğini araştırmanız gerekir.

Ayrıca, kaynak kodunda değil, oluşturulan HTML’de bulunan başlık etiketini ve diğer önemli etiketleri görmek için SEO Pro uzantısını da kullanabilirsiniz:

JavaScript SEO sorunlarını araştırmak veya uygulanabilecek en iyi pratik çözümlerin uygulandığından emin olmak için yukarıda bahsedilen araçların bir kombinasyonunu kullanmayı tercih edebilirsiniz.

JavaScript SEO hakkında diğer içeriklerimi de göz atmanızı kesinlikle tavsiye ederim.

Kaynak: https://www.searchenginejournal.com/javascript-seo-debugging-tools/

“JavaScript SEO: Uygulanabilecek En İyi Pratikler ve Hata Ayıklama Araçları” üzerine 2 yorum

  1. Merhaba Yıldırım bey, WordPress blogumda LiteSpeed Cache eklentisini kullanıyorum. Aynı zamanda bu eklentiyi CloudFlare ve Quic.Cloud ile birlike eş zamanlı çalışacak şekilde ayarladım. Lazy Load Images ayarını ON konumuna getirmiştim. Yazınızın başındaki yorumunuzu okuyunca biraz tedirgin oldum. Sizce bu özelliği OFF konumuna mı getirmeliyim? Teşekkürler.

    Yanıtla
    • Selamlar. Konu başlığında belirttiğim durum lazy loading’in javascript’te yazılan bir script ile yapılması. Bunu bir kod bütünü olarak düşünebilirsiniz. Sizin siteniz WordPress ve litespeed cache kullanıyorsunuz. Sizi endişelendirecek bir durum yok. İlgili ayarı “ON” yaparak özelliği aktif halde tutmanızı öneririm. Konu başlığı altında güncelleme yapıp daha net ifade ederim bunu ayrıca diğer ziyaretçiler için. İşlerinizde kolaylıklar dilerim.

      Yanıtla

Yorum yapın