Googlebot, JavaScript ağırlıklı web sitelerini iki aşamalı bir süreç gerçekleştirerek işler: ilk tarama ve sonraki oluşturma. Google HTML’i başlangıçta getirse de, daha sonra sayfayı nihai DOM içeriğini anlamak için JavaScript’i yürüttüğü bir oluşturma geçişi için sıraya alır. Bu ertelenmiş işleme, uygun sunucu tarafı stratejileri olmadan istemci tarafı oluşturmaya güvenmenin önemli indeksleme gecikmelerine yol açabileceği anlamına gelir.
Googlebot JavaScript’inizi nasıl işler?
Googlebot bir URL ile karşılaştığında, önce ham HTML’i ayrıştırır. İçeriğiniz tarayıcıda çalışan JavaScript tarafından kesin olarak oluşturuluyorsa, bu içerik ilk tarama sırasında görünür olmayacaktır. Googlebot sayfayı oluşturmak için kaynak ayırmalıdır, bu da işlem süresi tüketir. İlk getirme ile oluşturma geçişi arasındaki bu boşluk, çoğu indeksleme sorununun meydana geldiği yerdir.
Googlebot tarafından kullanılan oluşturma motoru Chromium projesine dayanmaktadır. Komut dosyalarınızı yorumlar, stilleri uygular ve sayfanın nihai durumunu oluşturur. Bu süreç kaynak yoğun olduğundan, Google aynı anda kaç sayfayı oluşturacağını sınırlayabilir. Siteniz yüklenmek için ağır hesaplamalar gerektiriyorsa, bot diğer görevlere öncelik verebilir ve içeriğinizi bir sonraki döngüye kadar indekslenmemiş bırakabilir.
Yaygın bir hata, modern arama motorlarının tüm JavaScript’i insan tarafından işletilen bir masaüstü tarayıcısıyla aynı şekilde yürüttüğünü varsaymaktır. Gerçekte, oluşturma ortamının belirli kısıtlamaları vardır. Botun komut dosyalarınızın yürütülmesini bitirmesini beklerken zaman aşımına uğramamasını sağlamak için verimli kod gereklidir.
JavaScript siteleri için yaygın tuzaklar nelerdir?
Birçok geliştirici, komut dosyaları henüz oluşturma motoru tarafından desteklenmeyen API’lere güvendiğinde veya aşırı ağ istekleri kritik oluşturma yolunu engellediğinde sorunlarla karşılaşır. Yaygın hatalar şunlardır:
- Birincil navigasyon bağlantıları için istemci tarafı oluşturmaya güvenmek.
- DOM’u hızlı bir şekilde güncellemeyen karmaşık durum yönetimi kullanmak.
- Kritik kaynakları verimsiz komut dosyası yürütme dizileriyle engellemek.
- Eski arama motoru tarayıcıları için yedek içerik sağlamamak.
- Bellek sınırlarını tüketen uzun süreli senkron komut dosyaları kullanmak.
Sık karşılaşılan bir diğer sorun, karma tabanlı yönlendirme kullanımıyla ilgilidir. Siteniz karma içeren URL’ler kullanıyorsa (örneğin, example.com/#/page), Googlebot bunları ayrı sayfalar olarak ele almakta zorlanabilir. Bu, tarayıcı karmadan sonraki her şeyi yeni bir belge yerine yerel bir referans olarak yorumladığı için alt sayfaları dizinden etkili bir şekilde gizler.
Dahası, üçüncü taraf komut dosyalarına bağımlılık öngörülemeyen davranışlar yaratabilir. Bir izleme komut dosyası veya reklam sağlayıcısı düzgün yüklenmezse, tüm sayfa yürütmesinin takılmasına neden olabilir. Temel içeriğin ikincil pazarlama veya analiz komut dosyalarından bağımsız olarak yüklendiğinden emin olmak için bağımlılıklarınızı denetlemenizi öneririz.
Oluşturma verimliliğini nasıl artırabilirsiniz?
Arama motorlarının sitenizi nasıl gördüğünü iyileştirmek için saf istemci tarafı oluşturmadan uzaklaşmayı düşünün. Sunucu tarafı oluşturma (SSR) veya statik site oluşturma (SSG), sunucunun tamamen doldurulmuş bir HTML belgesi göndermesine olanak tanır. İstemci tarafı oluşturma kullanmanız gerekiyorsa, sayfa kodunuzun temiz olduğundan ve işlem yükünü en aza indirmek için standart web uygulamalarına uyduğundan emin olun.
Kod bölme, verimliliği artırmak için hayati bir stratejidir. Botu devasa bir tek sayfalık uygulama paketini yüklemeye zorlamak yerine, JavaScript’inizi daha küçük, belirli parçalara bölün. Bu, oluşturma motorunun yalnızca belirli bir görünüm için gerekli olanı ayrıştırmasına olanak tanır, bu da birincil içeriğinizin indekslenmesini hızlandırır.
Ek olarak, veritabanı sorgularınızı ve API yanıt sürelerinizi optimize etmek yardımcı olur. JavaScript’iniz bir arka uçtan veri getiriyorsa, bu yanıtların hızlı olduğundan emin olun. Googlebot arka uç verileri için süresiz beklemez; API’niz yanıt vermek için çok uzun sürerse, oluşturma geçişi vaktinden önce sonuçlanabilir ve bu da eksik içeriğin indekslenmesine neden olur.
Alien Road bunu nasıl uygular
Tipik bir çalışmada, bir müşteri sitesinin oluşturulmuş DOM’unu Googlebot tarafından getirilen ham HTML ile karşılaştırarak denetlemeye başlıyoruz. Eksik meta verileri veya yalnızca kullanıcı etkileşiminden sonra görünen içeriği kontrol ediyoruz. Ekibimiz daha sonra, oluşturma motorunun görevini zaman aşımı hataları olmadan tamamlayabilmesini sağlamak için kod bölme ve JavaScript paketlerini optimize etme gibi performans ayarlamaları uyguluyoruz.
Örneğin, bir e-ticaret sitesi ürün fiyatlarını yalnızca bir kullanıcı bir düğmeye tıkladıktan sonra görüntülüyorsa, mimari yaklaşımı ayarlıyoruz. Fiyat bilgilerinin ilk HTML yanıtında mevcut olduğundan emin oluyoruz. Bu basit değişiklik, tarayıcının fiyatı hemen görmesini sağlar ve keşif için karmaşık istemci tarafı etkileşimlerine olan bağımlılığı ortadan kaldırır.
Meta veriler, arama motorlarının bir web sayfasının bağlamını ve alaka düzeyini anlamak için kullandığı bilgilerden oluşur.
Google Search Central
Hangi tanı araçlarına öncelik vermelisiniz?
Sayfalarınızı test etmek, oluşturma boşluklarını belirlemek için gereklidir. Arama motorunun tam olarak ne gördüğünü görmek için Googlebot ortamını taklit eden araçlara öncelik vermelisiniz. Doğru içgörüler sağlayan araçları kullanmak, sağlıklı bir site mimarisini korumanın anahtarıdır.
- Belirli sayfalarınızın oluşturulmuş HTML’ini görüntülemek için URL Denetleme Aracını kullanın.
- İndeksleme hatalarını belirlemek için arama konsolunuzdaki Kapsam raporunu gözden geçirin.
- Googlebot’un komut dosyası dosyalarınızı ne sıklıkla istediğini izlemek için sunucu günlüklerinizi izleyin.
- İçeriğin görünmesini engelleyen JavaScript hataları için konsol günlüklerini denetleyin.
- Performans metriklerini analiz etmek için Chrome DevTools’taki Lighthouse aracını kullanın.
URL Denetleme Aracı, bir tarayıcıda gördüklerinizle Google’ın indeksledikleri arasındaki boşluğu gözlemlemenin en doğrudan yoludur. ‘Taranan Sayfayı Görüntüle’ye tıkladığınızda, oluşturma motoru görevini bitirdikten sonra sayfanızın nihai durumuna bakıyorsunuz. Metin veya yapısal öğeler burada eksikse, teknik iyileştirme için acil bir hedefiniz var demektir.
Modern çerçevelerin rolü nedir?
React, Vue veya Angular gibi modern çerçeveler güçlü yetenekler sunar, ancak arama görünürlüğü için dikkatli yapılandırma gerektirirler. Varsayılan olarak, bu çerçeveler genellikle her şeyi istemcide oluşturur. Arama motoru başarısını sağlamak için çerçevenizi evrensel veya izomorfik oluşturmayı destekleyecek şekilde yapılandırmalısınız.
Bu yapılandırma, uygulamanızın ilk istek sırasında sunucuda oluşturulmasına olanak tanır. Kullanıcı (veya bot) tam bir HTML belgesi alır ve ardından çerçeve sayfayı istemci tarafında hidratlar. Bu, her iki dünyanın da en iyisini sunar: Googlebot için hızlı içerik teslimi ve insan ziyaretçileriniz için zengin, etkileşimli bir deneyim.
Teknik denetiminiz için sonraki adımlar
Bu hafta URL Denetleme Aracını kullanarak en önemli 10 sayfanızı denetleyerek başlayın. ‘Taranan Sayfayı Görüntüle’ çıktısını canlı sitenizle karşılaştırın. Kritik içeriğin eksik olduğunu fark ederseniz, bu belirli bölümler için sunucu tarafı oluşturmayı uygulamaya öncelik verin. Komut dosyalarınızın küçültüldüğünden emin olun ve mevcut oluşturma motorunun tam olarak desteklemeyebileceği deneysel özellikleri kullanmaktan kaçının.