Bu Çözümlerle JavaScript Web Sitenizi SEO Dostu Hale Getirin

Yayınlanan: 2022-01-19

Çoğu modern web sitesi JavaScript içerir, bu da onları dinamik ve etkileşimli hale getirir. Arama motoru botları oldukça akıllı olmalarına rağmen, yine de çok fazla JavaScript içeriği oluşturamayabilirler ve bu da sayfa sıralamasını etkiler.

JavaScript içeriği, büyük ölçüde web sitenizin kodu nasıl oluşturduğuna bağlıdır.

Örneğin, sunucu tarafı oluşturmada , sunucu web sitesinin içeriğini içerir. Bir istek üzerine tarayıcı, tam olarak oluşturulmuş HTML'yi alır.

Ancak, istemci tarafı oluşturmada JavaScript, DOM kullanılarak tarayıcı tarafından oluşturulur.

Oluşturma için üçüncü seçenek, istemci tarafında oluşturulan içeriğin tarayıcıya gittiği, sunucu tarafında oluşturulan içeriğin ise arama motorlarına gittiği dinamik oluşturmadır .

Oluşturma teknikleri, JS'nin nasıl oluşturulduğunu ve dolayısıyla sayfa sıralamalarını etkiler.

Tüm web sitenizin JS kodunun oluşturulduğundan emin olmak için uygun JavaScript SEO uygulamalarını izlemelisiniz. Ama önce JavaScript SEO'nun ne olduğunu anlayalım.

JavaScript SEO nedir?

JavaScript SEO, arama motorlarının bir web sitesinin (veya web sayfasının) JavaScript kodunu (dinamik içerik) taramasını ve dizine eklemesini kolaylaştırır. Google veya başka herhangi bir arama motoru JavaScript'i üç aşamada işler, yani tarama, oluşturma ve indeksleme. Google'ın tüm bunları yapabilmesi için JavaScript içeriğinin SEO dostu, yani görünür ve kullanılabilir olması gerekir.

Google, bir sayfadaki JavaScript içeriğini nasıl işler?

Googlebot'un JavaScript'i işlemek için izlediği adımlar şunlardır:

  • HTTP isteği aracılığıyla tarama kuyruğundan bir URL getirir
  • Sitenin taranmasına izin vermediği URL'ler için robots.txt dosyasını kontrol eder
  • 'İzin verilmeyen' URL'leri atlar, diğer URL'ler için yanıtı ayrıştırır ve bunları tarama kuyruğuna ekler
  • Dizine eklenmemek üzere işaretlenenler dışındaki sayfaları oluşturma için kuyruğa alır
  • Chromium sayfayı oluşturur, JavaScript'i yürütür ve sayfayı dizine ekler
  • Bağlantılar için oluşturulan HTML'yi tekrar ayrıştırır
  • URL'leri tarama için kuyruğa alır

Google ne zaman JavaScript İçeriğini dizine eklemez?

google ve javascript

Google, doğru şekilde uygulandığında JavaScript'i dizine ekleyebilir. Örneğin, JS ve CSS dosyalarınızdan bazıları gizliyse, Google web sitesini doğru şekilde tarayamayabilir. Benzer şekilde, ham HTML'de oluşturulan HTML'de bulunmayan bağlantılarınız varsa, Google bu bağlantıların taranmasını veya dizine eklenmesini atlayabilir.

Ayrıca, JavaScript doğrudan HTML'ye gömülü değilse, Google'ın dosyayı yürütmek için indirmesi gerekir. Ayrıca, arama motorlarında (daha iyi performans için) bir web sayfasının önbelleğe alınmış bir sürümü olabilir ve sayfadaki JavaScript, bununla senkronize olmayabilir.

JavaScript kodunun her bitinin okunması gerektiğinden, JavaScript'in aşırı kullanılması sayfa hızını yavaşlatabilir veya zaman aşımı hatalarına neden olabilir.

JavaScript SEO neden önemlidir?

JavaScript SEO, Google'ın (veya arama motorlarının) SEO için taradığı birçok sayfa öğesini ve sıralama faktörünü etkilediği için önemlidir:

Sayfa içi öğe Potansiyel SEO sorunu Olası SEO çözümü
İşlenen içerik Arama motorları (Google gibi), kaynakları sitenizin robots.txt dosyasında engellenmişse sayfanızı oluşturamaz. Ayrıca Google, engellenen veya gizlenen JS ve CSS dosyalarını dizine alamaz veya oluşturamaz. Sayfanın temel içeriğinde JavaScript'i azaltın, sunucu tarafı oluşturma, dinamik oluşturma, hibrit oluşturma (istemci tarafı ve sunucu tarafı kombinasyonu) gibi istemci tarafı oluşturma için alternatif yaklaşımları takip edin
Bağlantılar Bazı bağlantılar dahiliyse veya JavaScript, kullanıcı tıkladığında bir URL'ye bağlantılar oluşturursa, Google bu tür bağlantıları keşfedemez. Bağlantılar için açıklayıcı bağlantı metinleri olan href özniteliğine sahip bağlantı bağlantılarını kullanın. <div> ve <span> etiketleri gibi sözde bağlantılar taranmaz
meta veri Site, vue-meta gibi Node.js paketlerini kullanmıyorsa, arama motorları her görünüm veya sayfa için aynı veya daha kötüsü hiçbir meta veri tarıyor olabilir. Tepki-kask, vue-meta, tepki-meta-etiketler gibi Node.js paketlerini kullanın
Tembel yüklü görüntüler Arama motoru tarayıcısı, geç yükleme için işaretlenmiş hiçbir içeriği seçmez. Arama motoru içerik için kaydırma yapamaz ve bu nedenle bazı içerikler asla oluşturulamayabilir. Kullanılabilir olduklarında DOM öğelerinin görünürlüğünü ve konumunu anlayan IntersectionObserver API'sini kullanın. Tarayıcının (Chrome) yerel tembel yükleme özelliğini de kullanabilirsiniz.
Sayfa yükleme süreleri Çok fazla JavaScript içeriğine sahip bir sayfanın yüklenmesi yavaş olabilir ve bu da arama sıralamasını etkileyebilir. Kritik JS kodunu satır içi ekleyin ve kritik olmayan JS kodunu ana içerik oluşturulana kadar erteleyin, böylece genel JS kodunu azaltın.

JavaScript SEO için en iyi uygulamalar

En iyi uygulamalardan bazılarını izleyerek, arama motorlarının sayfaları daha iyi taramasını ve oluşturmasını sağlayabiliriz:

Tanımlanmış web standartlarına göre bağlantılar ve resimler ekleyin

Tüm bağlantıları onclick , #pageurl veya window.location.href='/page-url yerine ahref etiketini kullanarak ekleyin. Google, bağlantıları kolayca tarayabilir ve takip edebilir.

 <a href=”http://geekflare.com”>Welcome to Geek world</a>

Aynı şekilde, görüntüleri img data-src etiketini değil, img src etiketini kullanarak ekleyin:

 <img src=”myimg.png” />

Sunucu tarafı oluşturmayı tercih edin

Web sitenizin içeriğinin kullanıcı tarayıcısından ayrı olarak sunucuda mevcut olduğundan emin olun.

Oluşturulan HTML'nizin göstermek istediğiniz tüm önemli içeriğe sahip olduğundan emin olun

Oluşturulan HTML, doğru başlığa, meta robotlara, meta açıklamalara, resimlere, yapılandırılmış verilere ve kurallı etiketlere sahip olmalıdır.

JavaScript web sitenizi SEO dostu hale getirme

javascript kodu

Web sayfanızda JavaScript SEO uygulamasını test etmek için aşağıdaki adımları takip edebilirsiniz:

  • Web sitenizin ne kadar JavaScript kullandığını bilin: Bunun için tarayıcınızda JavaScript'i devre dışı bırakmanız yeterlidir. Çok fazla içerik görmüyorsanız, bu, web sitenizin büyük ölçüde JavaScript'e dayandığı anlamına gelir.
  • Googlebot'un tüm önemli içeriği ve etiketleri alıp almadığını kontrol edin: Googlebot'un içeriği oluşturmak için ham HTML'yi nasıl kullandığını kontrol etmek için Google mobil uyumlu test aracını veya zengin sonuçlar test aracını kullanabilirsiniz.
  • JavaScript'in sayfayı nasıl değiştirdiğini ve kaynak HTML ile işlenmiş olanı nasıl karşılaştırdığını anlamak için İşlenmiş Kaynağı Görüntüle gibi krom uzantılarını da kullanabilirsiniz.
  • SEO Pro Chrome uzantısını kullanarak oluşturulan HTML'deki önemli etiketleri (başlık, meta açıklama vb.) kontrol edebilirsiniz.

Çözüm

Bu makalede, JavaScript'in SEO yönetimini nasıl biraz karmaşık hale getirebileceğini ve kodunuza çok fazla JavaScript eklemenin neden olabileceği olası sorunları çözme yaklaşımlarını öğrendik.

JavaScript web sitenizi SEO dostu yapmak için bazı en iyi uygulamaları ve araçları da gördük. Google'ın dinamik içeriğinizi tanımasına ve taramasına yardımcı olan diğer harika araçlar Prerender, AngularJS ve Huckabuy'dur.

Web sitesi yükleme süresini azaltmanın en iyi yollarından bazılarına da göz atabilirsiniz.