e-ticaret eğitimi

Javascript SEO Nedir? Nasıl Yapılır?

J

Javascript gelişen kütüphaneleriyle, her geçen gün web sitelerini efektif uygulamalara dönüştürmeye devam ediyor. Javascript’in web sitelerinde kullanım alanları arttıkça verilere daha dinamik ve daha değişken olmaya da başladı haliyle. Bu durum klasik Google botlarının sitemizdeki veriler okumasını zorlaştırıyor, buna bağlı olarak da içerikler arama sonuçlarına yeterince yansımıyor.

Bu ve benzer sorunların önüne geçmek için bir kaç öneriden bahsedeceğim. Ancak öncelikle Google’ın Javascript içeriğimizi nasıl işlediğine bir göz atalım.

Google Botları Sayfaları Nasıl Okur?

Google botları erişebildiği her bir web sayfasını taramak için sıraya koyar, içeriğini okur ve gördükleriyle sayfanın bir yansıma kaydını oluşturur. Ardında dizine ekleyerek arama sonuçlarında çıkmasını sağlar.

Kaynak: https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=tr

Googlebot, taramak için sıraya koyduğu web sayfalarından birini masasının üstüne koyar ve dosyayı incelemeye başlar. Tıpkı bir insan gibi. Ayrıca düşüncelidir, çünkü öncelikle bu sayfaya bakıp bakmaması gerektiğini anlamak için bazı ayarlara bakar. Bu ayarlar da robots.txt dosyasında gizlidir. Eğer robots.txt okumaya başladığı sayfa ile ilgili bir yasak görürse sayfanın adresini tarama sırasında arkaya atarak yeni bir sayfaya bakar.

Googlebot’un bu nazik davranışını Google kendi web sitesinde şöyle açıklıyor:

Googlebot, web’in iyi bir vatandaşı olacak şekilde tasarlanmıştır.

Google Search Documents
https://developers.google.com/search/docs/guides/fix-search-javascript?hl=tr

Google sayfanın içeriğini, sayfa yüklendiğinde oluşan HTML içeriğe göre okur ve indeksler.

Peki, bir site haritası göndermeden ya da biz Google’ı direkt olarak yönlendirmeden Googlebot site içindeki diğer sayfaları nasıl buluyor?

Google taradığı sayfada oluşturulan HTML’in içindeki linklerin href özelliğinin değerlerine göre bir liste yapar. Yani sitenizin sayfaları içinde, yine sitenizin diğer sayfalarına açılan kapıları tek tek not eder ve sıralamaya koyar. Bu durum sunucu tarafından oluşturulan yani klasik yöntemle oluşturulmuş web sitelerinde de javascript uygulamaları ile oluşturulmuş web uygulamalarında da böyledir.

Ayrıca Googlebot, href özelliğine bakarken yalnızca değerine değil, diğer özelliklerine de bakar. Hedeflenen sayfaya verilen iç link nofollow değeriyle verilmişse takip listesine eklemez. Kısaca site içi bir sayfanın Google tarafından indekslenmesini istemiyorsanız linkin yapılandırırken aşağıdaki gibi bir örnek kullanabilirsiniz.

<a href="test.html" rel="nofollow">link</a>

Google’ın girdiği bir sayfayı indekslemesini istemiyorsanız sayfanın head bölümüne aşağıdaki kodları da ekleyebilirsiniz.

    <meta name="robots" content="noindex, nofollow" />

Hangi Yöntem Daha Etkili?

Google bize diyor ki, Javascript’i kullan, sorun değil ancak şuan için halen en iyi yöntem sunucu taraflı geliştirilmiş içeriklerdir. Çünkü tarayıcı istemci tarafında oluşturulan tüm içerikleri tüm tarayıcılar desteklemez, bu da kullanıcı deneyimini ve haliyle SEO performansını olumsuz etkileyebilir.

Javascript ile Oluşturulan İçeriği Nasıl Göstermeliyim?

Web sayfanız salt olarak yüklendiğinde içinde hiç bir veri yok ancak daha sonra javascript ile api ya da bir veritabanından gelen veriyi sayfaya yansıtıyorsunuz. Peki Googlebot bunu nasıl okur?

Googlebot’un sayfanın asıl içeriğini yani tüm veriler sayfaya yansıdıktan sonra gelen içeriği okuması için öncelikle Javascript’i çalıştırması gerekir. Google’ın sayfanızdaki Javascript kodlarını çalıştırması için özellikle yapmanız gerek tek şey javascript kodlarının düzgün çalışıyor olmasıdır.

Çünkü Google Javascript tabanlı web uygulamalarının SEO‘dan mahrum kalmaması için bu özelliği Chromium’ın evergreen adını verdiği seri ile birlikte getirmiştir.

Bu konudaki kaynakları incelediğimizde Google’ın bize önerdiği çok önemli iki test aracı karşımıza çıkıyor. Googlebot’un sayfasınızın tam içeriğini nasıl gördüğünü test etmek için Mobil Uyumluluk Testi veya URL Denetleme Aracı‘nı kullanmamızı öneriyor. Özellikle bu iki araçtan aldığımız veriler ışığında Google’ın web sayfasını ya da web uygulamasını tam olarak nasıl gördüğü ve hangi HTML kodlarla sayfanın oluştuğunu analiz edebiliyoruz.

Google Search Console’da Bulunan URL Denetleme Aracını Kullanarak Detaylı Analizler Yapabilir ve Önerileri Görebiliriz

Bu araçlarla yapılan testler sayesinde javascriptin çalışırken ortaya çıkardığı bir hatanın olup olmadığı, içeriğin doğru yüklenip yüklenmediği görmüş oluyoruz.

Mobil Uyumluluk Testi ile sayfamızdaki bazı sorunları tespit edebiliriz.

Şimdi Javascript ile oluşturduğumuz içeriklerin daha okunaklı olması için neler yapmamız gerektiğine bakalım:

Javascript SEO Yaparken Nelere Dikkat Etmeliyiz?

Aslında bu sorunun cevabı klasik SEO’da dikkat edilmesi gerekenlerle açıklanabilir. Ancak küçük detaylarla farklılıklar oluşabiliyor. Şimdi madde madde ilerleyelim.

Sayfanızı Oluştururken Benzersiz Başlıklar Kullanın

<title> etiketleri arasına yazdığınız başlığın benzersiz olması çok önemli.

Hatasız Javascript Kodu Geliştirin

Javascript ile çalışan web uygulamanız için çalışan javascriptin hatasız çalışması dikkat edin.

Sunucu Cevap Kodlarına Dikkat Edin

Sunucudan gelen cevap kodları Google’ın sitenizi anlaması için önemlidir. Bu yüzden Google’ın direktiflerine uyarak sayfanızda dönen sunucu kodlarını iyi optimize edin. Örnek durum kodları:

Sunucu Cevap KoduNe zaman kullanılır?
301 / 302Sayfa yeni bir URL’ye taşınmıştır.
401 / 403Sayfa, izin sorunları nedeniyle kullanılamaz.
404 / 410Sayfa artık mevcut değildir.
5xxSunucu tarafında bir şeyler ters gitmiştir.

Sayfa İçi Robots Etiketlerine Dikkat Edin

Sayfanıza test aşamasındayken noindex ya da nofollow etiketi eklemişseniz, indekslenmesini istediğiniz sayfadan bu kodları kaldırın.

Ertelenmiş Yükleme Ayarlarını Yapın

Sayfanızın hızlı yüklenmesi ve hızlı şekil alması kullanıcı deneyimini ve dolayısıyla SEO performansını olumlu etkiler. Bu yüzden sayfanın ilk yüklenmesinde gereksiz olan nesne ve kütüphanelerin yüklenmesini erteleyin.

Lazy Load Özelliğini Kullanın

Websitenizde resimlerin yüklenmesini gerekli olmadığı durumlarda iptal etmek ve gerekli olduğu an yüklenmesini sağlamak için Lazy Load eklentilerini ya da kütüphanelerini kullanın.

Google’ın örnek gösterdiği medium.com’a ait Lazy Load örneği.
Kaynak: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=tr

Sağlıcakla kalın.

Sayfa Kaynakları:
https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=tr
https://developers.google.com/search/docs/guides/lazy-loading?hl=tr
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=tr

Yazar Hakkında

Şevket Erer

Yazılım Geliştirme Uzmanı - Girişimci

Yorum Yap

Son Yazılar

Son Yorumlar

Arşivler

Kategoriler

Şevket Erer

Yazılım Geliştirme Uzmanı - Girişimci

Etkileşim

Aşağıdaki bağlantılardan sosyal medya hesaplarıma ulaşabilir, soru, öneri ve iş birliği tekliflerinizi iletebilirsiniz.