SEO için JavaScript nasıl denetlenir?

Yayınlanan: 2023-03-06

JavaScript, web üzerinde her yerde bulunur. HTML ve CSS doğası gereği statik olduğundan, istemci tarafında dinamik işlevsellik sağlamak için JavaScript yaygın olarak benimsenmiştir; bu, bir tarayıcıda indirildiğini ve çalıştırıldığını söylemenin havalı bir yoludur.

Sayısız çerçeve/kütüphane ve diğer varyasyonların tümü hızlı bir şekilde geliştirilmekte olduğu için dilin talepleri yüksektir. Bu nedenle, teknolojinin düzenli olarak arama motoru desteğini ve dolayısıyla SEO alanındaki en iyi uygulamaları geride bırakması yaygın ve belki de kaçınılmazdı . bir ekranda javascript JavaScript'i denetlemeden önce, ortaya çıkması muhtemel yaygın sorunlar ve tüm ihtiyaçları karşılamak için yapmanız gereken tavizler olduğu konusunda dikkatli olmanız gerekir.

JavaScript denetleme sürecimizi beş temel alana ayırdık ve şunları belirlemenize olanak sağladık:

  1. Bir sitenin büyük ölçüde JavaScript'e güvenip dayanmadığı
  2. JavaScript varlıklarının uygun şekilde önbelleğe alınıp alınmadığı/güncellenip güncellenmediği
  3. JavaScript'in site performansı üzerindeki etkisi nedir?
  4. JavaScript dosyalarının doğru ve verimli bir şekilde getirilip getirilmediği
  5. Durumsal JavaScript sorunları: sonsuz kaydırma yönlendirmesi ve yönlendirmeleri

Ama içine dalmadan önce…

Web sitesi yapısında hızlı bir 101

Mevcut web siteleri üç ana teknolojiden oluşur:

Köprü metni biçimlendirme dili (HTML)

Bu, genel kaplardan metne, bağlantılara, medyaya ve meta verilere kadar her şeyi temsil eden bir öğe hiyerarşisi ile diğer her şeyin dayandığı yapıdır.

Çok çeşitli uygulamaları etkinleştirmek için basit, sağlam ve anlam odaklıdır.

Tarayıcılar ham HTML'yi mantıklı bir şekilde biçimlendirecek olsa da, sunum şu şekilde daha iyi gerçekleştirilir:

Basamaklı stil sayfaları (CSS)

Bu, HTML'nin çeşitli şekillerde biçimlendirilebildiği ve yeniden düzenlenebildiği sunum katmanıdır .

Herhangi bir HTML öğesi hedeflenebilir, taşınabilir, renklendirilebilir, yeniden boyutlandırılabilir ve hatta canlandırılabilir. Aslında bu, web sitesi tasarımının gerçekleştirilmesidir .

Ancak, bazı sınırlı özellikler haricinde, statik kalır ve bizi şu noktaya getirir:

JavaScript (JS)

Bu, kullanıcı etkileşimi, zaman veya sunucu değişiklikleri gibi olaylara yanıt olarak HTML ve CSS'yi aktif olarak değiştirebilen dinamik katmandır. Bu, kullanıcı deneyimi açısından nelerin başarılabileceğini büyük ölçüde açar .

Bir web sitesini ziyaret ettiğinizde, tarayıcınız HTML dosyasını indirir ve ardından okur, her bir bölümü birbiri ardına yorumlar ve yürütür. Harici varlıklar (CSS/JS/medya/yazı tipleri) indirilir ve öğeler ilgili direktiflere ve talimatlara göre bir araya getirilir.

Nihai sonucu elde etmek için bir web sitesinin yapı taşlarını bir araya getirme işlemine oluşturma denir . Bu, SEO ile son derece alakalı çünkü Google, tarayıcılara benzer bir şey yapacak (bazı ekstra analiz adımlarıyla) ve sıralama yaparken bunu dikkate alacaktır. Aslında Google, kullanıcının deneyimini kopyalamaya çalışır.

Google, JavaScript'i nasıl işler?

Google, JavaScript'i işleyecektir. Başka bir deyişle, kullanıcıların ne göreceğini daha iyi anlamak için JavaScript öğelerinizi HTML ve CSS ile birlikte yükleyecektir, ancak iki temel husus vardır:

  1. Google, siteleri taramak için mümkün olduğunca az kaynak kullanmak istiyor.
  2. Daha fazla JavaScript, oluşturmak için daha fazla kaynağa ihtiyaç duyulduğu anlamına gelir.

Bu sorunlardan dolayı, Google'ın web oluşturma hizmeti mümkün olduğu kadar verimli çalışmaya yöneliktir ve bu nedenle aşağıdaki stratejileri benimser:

  • Googlebot, her zaman ilk kez taradığı bir sayfayı oluşturur. Bu noktada, o sayfayı gelecekte oluşturması gerekip gerekmediğine karar verir. Bu, sayfanın gelecekteki taramalarda ne sıklıkta oluşturulacağını etkileyecektir.
  • Kaynaklar, temel sayfa içeriğine katkıda bulunmayan her şeyi belirlemek için analiz edilir. Bu kaynaklar getirilemeyebilir.
  • Kaynaklar, ağ isteklerini azaltmak için agresif bir şekilde önbelleğe alınır, bu nedenle güncellenen kaynaklar başlangıçta göz ardı edilebilir.
  • Tarama sırasında bir sayfadan diğerine durum korunmaz (örn. tanımlama bilgileri saklanmaz, her sayfa “yeni” bir ziyarettir).

Buradaki ana nokta, genel olarak, Google'ın JavaScript aracılığıyla oluşturulan içeriği dizine eklemesinin daha uzun süreceği ve bazen bazı şeyleri tamamen gözden kaçırabileceğidir.

Peki, ne kadar önemli içerik etkileniyor? Bir şey değiştiğinde SERP'lere yansıması ne kadar sürer? Bunun gibi soruları denetim boyunca aklınızda bulundurun.

JavaScript SEO denetimi için beş adımlı kılavuz

JavaScript SEO denetimi gerçekleştirmek için herkesin kendine özgü bir yolu olacaktır, ancak nereden başlayacağınızdan emin değilseniz veya mevcut sürecinizden birkaç adımı kaçırdığınızı düşünüyorsanız, okumaya devam edin.

1. Bir sitenin JavaScript'e ne kadar bağımlı olduğunu anlayın

Başlangıçta, sitenin JavaScript'e büyük ölçüde güvenip güvenmediğini ve eğer öyleyse, ne ölçüde olduğunu belirlemek önemlidir. Bu, sonraki analizinizin ne kadar derin olması gerektiğini yönlendirmenize yardımcı olacaktır.

Bu, birkaç yöntemle elde edilebilir:

  • JavaScript Ne Yapar?
  • JavaScript'i Chrome aracılığıyla yerel olarak devre dışı bırakın
  • Chrome'da manuel olarak kontrol edin
  • Wappalyzer
  • çığlık atan kurbağa

JavaScript Ne Yapar (WWJSD)

Onely tarafından sağlanan ve JavaScript içeren ve içermeyen HTML, meta etiketler ve bağlantıların ekran görüntülerini sunarak bir URL'nin basit, yan yana karşılaştırmasını sağlayan bir araç .

javascript sayfası ne yapardı Mobil mi yoksa masaüstü mü kontrol etmek istediğinizi dikkatlice düşünün. Mobil öncelikli ilkeler genel olarak geçerli olsa da, JavaScript daha çok masaüstü deneyiminin bir parçası olarak kullanılma eğilimindedir. Ama ideal olarak, zamanınız varsa, ikisini de test edin!

WWJSD'de Javascript kullanımını analiz etme adımları:

  1. WWJSD'yi ziyaret edin
  2. Mobil veya masaüstü seçin
  3. URL girin
  4. Formu gönder

Chrome aracılığıyla yerel olarak devre dışı bırak

Chrome tarayıcı, herhangi bir JavaScript'i yerinde devre dışı bırakmanıza ve doğrudan test etmenize olanak tanır:

chrome'da javascript'i devre dışı bırakma Chrome kullanarak JavaScript kullanımını analiz etme adımları:

  1. Devtools'u açmak için F12'ye basın ve açık değilse Elements sekmesini seçin
  2. Cmd+Shift+P (veya Ctrl+Shift+P)
  3. "Devre Dışı Bırak" yazın ve *JavaScript'i Devre Dışı Bırak*'ı seçin
  4. Sayfayı yenile
  5. yeniden etkinleştirmeyi unutmayın

Chrome'da manuel olarak kontrol edin

Biraz farklı sonuçlar sağladıkları için Chrome'da kaynak HTML'yi kontrol etmenin iki yolu vardır.

Kaynağın görüntülenmesi, HTML'yi başlangıçta alındığı gibi görüntülerken, kaynağı incelemekdinamik değişiklikleri yürürlüğe koyar - JavaScript tarafından eklenen her şey görünür olacaktır.

Kaynak görüntüleniyor: kaynak görüntüleme Kaynak inceleniyor: kaynak inceleniyor Bu en iyi, tam bir JavaScript çerçevesi olup olmadığını kontrol etmenin hızlı bir yolu olarak kullanılır. İlk kaynak indirme işlemi daha kısa olacak ve muhtemelen içeriğin çoğu eksik olacak, ancak denetçi daha dolu olacak.

Dinamik olarak yüklendiğinden şüphelendiğiniz bazı metinleri her ikisinde de aramayı deneyin; içerik veya gezinme başlıkları genellikle en iyisidir.

JavaScript kullanımını Chrome kullanarak manuel olarak analiz etme adımları:

 Kaynağı görüntüle:

  1. Tarayıcı görünümünde sağ tıklayın
  2. Kaynağı Görüntüle'yi seçin

Kaynağı inceleyin:

  1. Devtools'u açmak için F12'ye basın
  2. Açık değilse Öğeler sekmesini seçin

Wappalyzer

Bu, bir sitenin arkasındaki teknoloji yığınının dökümünü sağlayan bir araçtır. Genellikle makul miktarda bilgi vardır, ancak özellikle JavaScript çerçeveleri arıyoruz:

wappalyzer JavaScript kullanımını analiz etmek için Wappalyzer'ı kullanma adımları

  1. Wappalyzer Chrome uzantısını yükleyin
  2. İncelemek istediğiniz siteyi ziyaret edin
  3. Wappalyzer simgesine tıklayın ve çıktıyı inceleyin

▪️ Bir şeyin burada listelenmemiş olması, kullanılmadığının %100 doğrulanmadığının farkında olun!

Wappalyzer, bir çerçeveyi tanımlamak için parmak izine güvenir. Yani, bu çerçeveye özgü tanımlayıcıları ve kalıpları bulmak.

Bunları değiştirmek için herhangi bir çaba gösterilmişse, Wappalyzer çerçeveyi tanımlamayacaktır. Bunu doğrulamanın, bu belgenin kapsamı dışında kalan başka yolları da vardır. Bir geliştiriciye sorun.

çığlık atan kurbağa

Bu, JavaScript görünürlük denetiminin derinlemesine bir incelemesidir. JavaScript oluşturma etkinleştirildiğinde , Screaming Frog, taranan bir site üzerinde JavaScript'in etkisinin kapsamlı bir dökümünü, işlenmiş içerik/bağlantı kapsamı ve olası sorunlar da dahil olmak üzere sağlayabilir. çığlık atan kurbağa Javascript sorunlarını analiz etmek için Screaming Frog'u kullanma adımları:

  1. Yapılandırma menüsüne gidin
  2. *Örümcek*'i seçin
  3. Oluşturma sekmesini seçin
  4. Açılır menüden JavaScript'i seçin
  5. (isteğe bağlı) AJAX zaman aşımını azaltın ve zorlanıyorsa tarama performansını iyileştirmek için işareti kaldırın

2.Zorunlu önbellek yenileme kullanın

Önbelleğe alma, web sitelerinin daha verimli yüklenmesini sağlayan bir işlemdir. Bir URL'yi ilk kez ziyaret ettiğinizde, gereken tüm varlıklar, tarayıcınız veya barındırma sunucunuz gibi çeşitli yerlerde depolanır. Bu, sayfaları her ziyarette sıfırdan yeniden oluşturmak yerine, daha hızlı sonraki ziyaretler için bir sayfanın bilinen son sürümünün saklandığı anlamına gelir.

Bir JavaScript dosyası güncellendiğinde, önbelleğe alınan sürümün kullanılmasını istemezsiniz. Google ayrıca oldukça agresif bir şekilde önbelleğe alır, bu nedenle web sitenizin en güncel sürümünün oluşturulmasını sağlamak için bu özellikle önemlidir.

Önbelleğe alınan dosyaya son kullanma tarihi eklemek gibi bununla başa çıkmanın birkaç yolu vardır, ancak genellikle en iyi "isteğe bağlı" çözüm zorunlu önbellek yenileme kullanmaktır .

Prensip basittir: Diyelim ki site için JavaScript'in büyük bölümünü içeren 'main.js' adlı bir JavaScript dosyanız var. Bu dosya önbelleğe alınırsa, Google o sürümü kullanır ve tüm güncellemeleri yok sayar; en iyi ihtimalle, oluşturulan sayfa güncelliğini yitirecektir; en kötü ihtimalle bozulur.

En iyi uygulama, önceki sürümden ayırt etmek için dosya adını değiştirmektir. Bu genellikle bir tür sürüm numarası gerektirir veya dosyanın parmak izini alarak bir kod oluşturur.

Bunu başarmak için iki strateji vardır:

  1. Bir URL değişkeni olarak eklenen 'Son Güncelleme' zaman damgasına sahip birkaç dosya.
  2. Dosya adının kendisinde kullanılan benzersiz bir kod – 'filename.code.js' aşağıdaki gibi yaygın bir kalıptır:

önbelleğe almayı önlemek için dosya adını değiştirme Takip edilecek adımlar:

  1. Chrome devtools'u yüklemek için F12'ye basın
  2. 'Ağ' sekmesine gidin
  3. Filtre uygula
    • *Filtre* alanında, ana etki alanı için şu şekilde filtre uygulayın: `domain:*.website.com`
    • JS olmayan dosyaları dışlamak için JS filtresini tıklayın
  4. Dosya listesini gözden geçirin ve değerlendirin - gerekirse geliştirici yardımı alın

‼️ İlgili JavaScript dosyaları normalde ana etki alanında bulunsa da, bazı durumlarda içerik dağıtım ağında (CDN) olduğu gibi harici olarak barındırılabilirler.

WP Engine tarafından barındırılan sitelerde, yukarıdaki örneğe göre ana etki alanı yerine '*.wpenginepowered.com' için filtrelemeniz gerekebilir. Burada katı ve hızlı kurallar yoktur - (filtrelenmemiş) JS listesindeki alanları inceleyin ve en iyi kararınızı kullanın. Görebileceklerinize bir örnek: '*.wpenginepowered.com' için filtreleme yaparken etki alanı listesi örneği Etki Alanı sütunu görünmüyorsa, mevcut bir sütun başlığına sağ tıklayın ve Etki Alanı'nı seçin.

3. JS'nin site performansı üzerindeki etkisini belirleyin

Site performansı söz konusu olduğunda, dikkat edilmesi gereken birkaç şey vardır.

İşlem süresi

Bu, bazıları aşağıdaki zamanlama görselleştirmesinde temsil edilen ve en büyük içerikli ağrı (LCP), kümülatif düzen kayması (CLS) ve ilk giriş gecikmesi (FID) gibi metriklere bakan Önemli Web Verileri (CWV) ile bağlantılıdır .

Özellikle, özetteki yükleme ve komut dosyası oluşturma süreleriyle ilgileniyorsunuz. Bunlar aşırı ise, muhtemelen büyük ve/veya verimsiz komut dosyalarının bir işaretidir.

Şelale görünümü ayrıca sitenin diğer bileşenlerinin yanı sıra her bir CWV'nin sahip olduğu etkinin yararlı bir görselleştirmesini sağlar. CWV'nin şelale görünümü Adımlar:

  1. Chrome devtools'u açmak için F12'ye basın
  2. "Performans" sekmesine gidin
  3. Paneldeki yenile düğmesine tıklayın
  4. Özet sekmesini gözden geçirin (veya derin dalış yapmak istiyorsanız Aşağıdan Yukarıya)

Sıkıştırma

Bu basit ama önemli bir kontrol; dosyaların verimli bir şekilde sunulmasını sağlar.

Düzgün yapılandırılmış bir ana bilgisayar, site varlıklarını tarayıcılar tarafından mümkün olan en kısa sürede indirilebilecek şekilde sıkıştıracaktır. Ağ hızı genellikle site yükleme süresinin en önemli (ve değişken) geçiş noktasıdır. CWV yükleme süresi Adımlar:

  1. Chrome devtools'u açmak için F12'ye basın
  2. 'Ağ' sekmesine gidin
  3. Filtre uygula
  4. 'Filtre' alanında, ana etki alanı için şu şekilde filtre uygulayın: `domain:*.website.com`
  5. JS olmayan dosyaları dışlamak için JS filtresini tıklayın
  6. 'İçerik Kodlama' sütununun içeriğini inceleyin. 'gzip', 'compress', 'deflate' veya 'br' yazıyorsa, sıkıştırma uygulanıyor demektir.

️ İçerik kodlama sütunu görünmüyorsa:

  1. Mevcut bir sütuna sağ tıklayın
  2. "Yanıt Başlıkları"nın üzerine gelin
  3. 'İçerik Kodlama'yı tıklayın
  4. kapsam

Özelliklerle dolu varlık çerçevelerindeki (ör. Bootstrap, Foundation veya Tailwind) artış, daha hızlı geliştirme sağlar, ancak aslında kullanılmayan büyük JavaScript parçalarına da yol açabilir.

Bu kontrol, her bir dosyanın ne kadarının geçerli URL'de gerçekte kullanılmadığını görselleştirmeye yardımcı olur.

‼️ Bir sayfada kullanılmayan JavaScript'in diğerlerinde kullanılabileceğini unutmayın!Bu, esas olarak rehberlik amaçlıdır ve optimizasyon için bir fırsat olduğunu gösterir. kullanılmayan javascript'i kontrol et Adımlar:

  1. Chrome devtools'u açmak için F12'ye basın
  2. Cmd+Shift+P (veya Ctrl+Shift+P)
  3. 'Kapsamı Göster'i tıklayın
  4. Paneldeki yenile düğmesine tıklayın
  5. Filtre uygula
    • *Filtre* alanında, ana etki alanı için filtre uygulayın. Burada joker karakter yok; 'website.com' yapacaktır.
    • Filtre girişinin yanındaki açılır menüden JavaScript'i seçin

küçültme

JavaScript başlangıçta insanlar tarafından okunabilir bir şekilde, biçimlendirme ve akıl yürütmesi kolay terimlerle yazılmıştır. Bilgisayarlar bunu umursamıyor - tüm dosyayı tek bir kod satırı olarak yorumluyorlar ve tutarlı bir şekilde atıfta bulunulduğu sürece nesnelerin ne olarak adlandırıldığı umurlarında değil.

Bu nedenle, dosyaları mümkün olan en küçük boyuta küçültmek iyidir. Buna küçültme denir ve yaygın bir uygulamadır, ancak yine de bazen gözden kaçırılır.

Farklılıkları tespit etmek önemsizdir: küçültülmüş dosya ^ Küçültülmüş = iyi! küçültülmüş dosya değil ^ Küçültülmemiş = iyi değil!

️ Bu, esas olarak ÜRETİM'deki siteler için geçerlidir.Geliştirme/test aşamasındaki siteler, hataların bulunmasını kolaylaştırmak için küçültülmemiş dosyalara sahip olma eğilimindedir.

Adımlar:

  1. Chrome devtools'u açmak için F12'ye basın
  2. 'Ağ' sekmesine gidin
  3. Filtre uygula
    • 'Filtre' alanında, ana etki alanı için şu şekilde filtre uygulayın: domain:*.website.com
    • JS olmayan dosyaları dışlamak için JS filtresini tıklayın
  4. Her dosyayı kontrol et
    • dosya adına tıklayın
    • Görünen panelde 'Yanıt' sekmesine gidin

paketleme

Ağ isteklerinin sayısını azaltmak için birden çok JavaScript dosyası daha az dosya (veya bir!) halinde paketlenebilir. Esasen, ana etki alanından ne kadar çok JavaScript dosyası çekilirse, bu yaklaşımın kullanılma olasılığı o kadar azalır.

Bu, çoğu zaman gerçekten bir anlaşmayı bozmaz, ancak ayrı JavaScript dosyalarının sayısı ne kadar ciddi olursa, onları bir araya getirerek o kadar fazla zaman kazanılabilir.

Özellikle WordPress'in, dosyaların gerektiğinde ve gerektiğinde eklentiler tarafından yüklenmesini teşvik ettiğini unutmayın; bu, bazı sayfaların çok sayıda JavaScript dosyası ve diğerlerinin çok az yüklenmesine neden olabilir. Yani bu her şeyden çok bir fırsat tatbikatı.

Adımlar:

  1. Küçültmeden 1-3 arasındaki adımları tekrarlayın
  2. Kaç tane dosya olduğuna dikkat edin - birden üçe kadar genellikle iyiye işarettir

4. JavaScript dosyalarının doğru ve verimli bir şekilde getirilip getirilmediğini anlayın

Bakılması gereken birkaç şey var.

Kaynak, robots.txt tarafından engellendi

robots.txt dosyasında engellenen JavaScript dosyaları, bir site oluşturulurken Google tarafından getirilmez ve bu da potansiyel olarak oluşturma işleminin bozuk veya eksik verilerle sonuçlanmasına neden olur.

robots.txt dosyasında hiçbir JavaScript'in engellenip engellenmediğini kontrol ettiğinizden emin olun.

Komut dosyası yükleme

Bir sayfaya JavaScript dosyaları eklendiğinde yükleme sırası önemlidir.

Kullanıcıya yönelik içerikten önce çok fazla dosya alınıyorsa, kullanıcının siteyi görmesi daha uzun sürecek, bu da kullanılabilirliği etkileyerek hemen çıkma oranını artıracaktır. Etkili bir komut dosyası yükleme stratejisi, bir sitenin yükleme süresini en aza indirmeye yardımcı olacaktır.

  • Doğrudan yöntem: <script src=”file.js”>

Doğrudan yöntem, dosyayı oraya ve sonra yükleyecektir. Dosya getirilir, indirilir veya önbellekten alınır (bu, devtools 'Ağ' sekmesinde göründüğü zamandır) ve tarayıcı sayfayı yüklemeye devam etmeden önce ayrıştırılır ve yürütülür.

  • Zaman uyumsuz yöntem: <script async src=”file.js”>

Async yöntemi, dosyayı eşzamansız olarak getirecektir. Bu, arka planda dosyayı indirmeye/almaya başlayacağı ve hemen sayfayı yüklemeye devam edeceği anlamına gelir. Bu komut dosyaları, yalnızca sayfanın geri kalanının yüklenmesi tamamlandığında çalışır.

  • Erteleme yöntemi: <script defer src=”file.js”>

Erteleme yöntemi, dosyayı async yönteminde olduğu gibi eşzamansız olarak getirir, ancak bu komut dosyalarını, sayfanın yüklenmesi bitmemiş olsa bile, getirildikten hemen sonra çalıştırır.

Peki, bu yöntemlerden hangisi en iyisidir?

Klasik SEO yanıtı, duruma göre değişir. İdeal olarak, zaman uyumsuz/defer olabilen herhangi bir komut dosyası öyle olmalıdır. Geliştiriciler, kodun ne yaptığına bağlı olarak hangisinin en uygun olduğunu belirleyebilir ve şu ya da bu şekilde daha verimli bir şekilde işlenebilmeleri için komut dosyalarını daha fazla parçalamaya ikna edilebilir.

İçerik yüklenmesini geciktirmedikleri için her iki tür de genellikle HTML'nin ana <head> alanına yerleştirilebilir. Doğrudan yöntemle yükleme bazen kaçınılmazdır, ancak kural olarak sayfa içeriğinin sonunda, kapanış </body> etiketinden önce yapılmalıdır. Bu, herhangi bir komut dosyası yüklenmeden/çalıştırılmadan önce ana sayfa içeriğinin kullanıcıya iletilmesini sağlar. Yine, bu her zaman mümkün (veya arzu edilir) değildir, ancak dikkat edilmesi gereken bir şeydir.

Üçüncü taraf komut dosyasının etkisini inceleyin

Siteler genellikle çeşitli amaçlar için üçüncü taraf komut dosyalarını çeker; en yaygın olarak buna analitik ve reklam kaynakları dahildir. Ayrılma noktası, bunların genellikle kendi ek komut dosyalarını yüklemesidir ve bu da daha fazlasını yükleyebilir. Bu, ilke olarak devtools ağ verileri aracılığıyla incelenebilir, ancak tam resmi kavramak zor olabilir.

Şans eseri, nelerin nereden yüklendiğine dair bilgi sağlamak için bağımlılıkları görsel olarak haritalayabilen kullanışlı bir araç var: bağımlılıkları gösteren araç Buradaki amaç, nelerin yüklendiğini belirlemek ve gereksiz oldukları, artık kullanılmadıkları veya genel olarak uygun olmadıkları durumlarda üçüncü taraf komut dosyalarının sayısını azaltmak için fırsatları tespit etmektir.

Adımlar:

  1. WebPagetest'i ziyaret edin
  2. 'Site Performansı' testinin seçili olduğundan emin olun
  3. URL'yi girin ve 'Test Başlat'ı tıklayın
  4. Sonuç özet sayfasında, 'Görünüm' açılır menüsünü bulun
  5. 'Harita İste'yi seçin

5. Durumsal JavaScript sorunlarının farkında olun

JS Çerçeveleri

Şüphesiz popüler JavaScript çerçevelerinden bir veya daha fazlasıyla karşılaşmışsınızdır - React, Vue ve Angular öne çıkan örneklerdir.

Bunlar, önceden oluşturulmuş sayfaları indirmenin aksine, tarayıcıda kısmen veya tamamen bir web sitesi oluşturmak için genellikle JavaScript'e güvenir.

Bu, performans ve bakım açısından faydalı olabilse de, SEO için baş ağrısına da neden olur, en tipik şikayet, Google'ın her sayfayı tam olarak oluşturmasının daha fazla iş anlamına gelmesidir. Bu, indekslemeyi geciktirir - bazen önemli ölçüde. SEO topluluğundaki pek çok kişi bunu “JavaScript = kötü” olarak kabul eder ve çerçevelerin kullanımını caydırır. Bu tartışmalı bir şekilde bebeği banyo suyuyla birlikte dışarı atma durumudur.

Çok uygun bir alternatif, Prerender gibi bir hizmet kullanmaktır . Bu, sitenizi arama motoru tarayıcıları için oluşturacak ve önbelleğe alacaktır, böylece sitenizi ziyaret ettiklerinde sitenizin güncel ve eksiksiz bir temsilini görerek hızlı indeksleme sağlarlar.

Sonsuz kaydırma

Sonsuz kaydırma sarsıntılı olma eğilimindedir ve sayfalandırma kadar sağlam değildir , ancak bunu yapmanın doğru ve yanlış yolları vardır.

Bloglar ve kategoriler gibi sayfalandırma içermesi muhtemel tüm URL'leri kontrol edin ve sayfalandırma olup olmadığına bakın. Bunun yerine sonsuz kaydırma kullanılıyorsa, her bir sonuç grubu arasında gezinirken URL çubuğunu izleyin; siz kaydırdıkça URL 'sayfayı' yansıtacak şekilde güncelleniyor mu?

Öyleyse, bu Google için yeterince iyidir ve düzgün bir şekilde taranmalıdır.

Değilse, bu geliştiriciler tarafından düzeltilmelidir.

URL güncellemeleri ideal olarak ?page=2 veya /page/2 gibi "temiz" bir şekilde uygulanmalıdır. Bunu bir karma ile yapmanın yolları var (#page-2 gibi), ancak Google şu anda bunu taramayacak.

Yönlendirme

Bir JavaScript çerçevesi (örn. React, Vue, Angular) kullanılıyorsa, Wappalyzer ile kontrol edin . Muhtemelen göreceğiniz birkaç URL vardır:

  • https://www.website.com/pretty/standart/rota
  • https://www.website.com/#/wait/what/is/this
  • https://www.website.com/#!/again/what

İkinci ve üçüncü örneklerdeki hash, JavaScript çerçeveleri tarafından oluşturulabilir. Göz atmak için sorun yok, ancak Google bunları düzgün bir şekilde tarayamaz.

Bu nedenle, aksi takdirde "doğru" görünen URL segmentlerinden önce # (veya bunun bir varyasyonunu) görürseniz, hash içermeyen bir URL biçiminde bir değişiklik önermeye değer.

Yönlendirmeler

JavaScript yönlendirmelerinden genel olarak kaçınılmalıdır. Arama motorları tarafından tanınacak olsalar da, çalışmak için render gerektirirler ve bu nedenle SEO için optimal değildirler.

Bunları, JavaScript oluşturma etkinken bir Screaming Frog taraması çalıştırarak ve JS sekmesi/filtresi altındaki JS yönlendirmelerini inceleyerek kontrol edebilirsiniz.

Bazı özel JS güdümlü özelliklerin bir JS yönlendirmesini gerektirdiği durumlar olabilir. Bunlar kuraldan ziyade istisna olduğu sürece, sorun değil.

Çözüm

Javascript, SEO için sorunlara yol açabilir, ancak bunlar, önemli potansiyel sorun alanlarını dikkatlice anlayarak ve denetleyerek en aza indirilebilir:

1) Bir site JavaScript'e ne kadar bağımlıdır?

2) JavaScript varlıklarının uygun şekilde önbelleğe alınıp alınmadığı/güncellenip güncellenmediği

3) JavaScript'in site performansı üzerindeki etkisi nedir?

4) JavaScript dosyalarının doğru ve verimli bir şekilde getirilip getirilmediği

5) Sonsuz kaydırma yönlendirmesi ve yeniden yönlendirmeler gibi durumsal JavaScript sorunları

JavaScript denetimi veya SEO hakkında herhangi bir sorunuz varsa, bizimle iletişime geçmekten çekinmeyin - sohbet etmekten memnuniyet duyarız.