JavaScript SEO en iyi uygulamaları, arama motoru botlarının kod ağırlıklı web uygulamalarıyla nasıl karşılaştığını, bunları nasıl çalıştırdığını ve anladığını optimize etmeyi içerir. React veya Angular gibi modern çerçeveler tarayıcıya genellikle boş bir HTML kabuğu sunduğundan, indeksleme gerçekleşmeden önce son içeriğin tamamen render edildiğinden emin olmak için stratejiler uygulamanız gerekir. Googlebot, JavaScript’i üç aşamada işler: tarama, render etme ve indeksleme. Bu aşamaları başarıyla yönetmek, sitenizin ilk script etiketleri yerine kullanıcılarınızın gördüğü gerçek metin ve görseller için sıralanmasını sağlar. İçeriğiniz render edilmiş HTML’de görünmüyorsa, arama motorları sayfalarınızı ilgili arama sorgularıyla ilişkilendirmekte zorlanacaktır.
Googlebot JavaScript render işlemini nasıl yönetir?
Render aşaması, çoğu JavaScript SEO sorununun meydana geldiği yerdir. Googlebot bir URL keşfettiğinde, onu tarama kuyruğuna ekler. Ancak, standart HTML sayfalarından farklı olarak, JavaScript ağırlıklı sayfalar ikincil bir render kuyruğuna gönderilir çünkü script dosyalarını çalıştırmak önemli ölçüde daha fazla CPU gücü ve zaman gerektirir. Bu iki dalgalı indeksleme süreci, ilk tarama ile Google’ın içeriğinizi nihayet gördüğü an arasında bir gecikme olabileceği anlamına gelir. Sunucu yanıt süreleriniz yavaşsa veya script dosyalarınız çok büyükse, Googlebot zaman aşımına uğrayabilir veya render işlemini erteleyebilir, bu da kısmen indekslenmiş sayfalara veya eksik içeriğe yol açar. Geliştiriciler, bu riskleri en aza indirmek için bir sayfanın kararlı hale gelmesi için gereken süreyi izlemelidir.
İlk HTML ile render edilmiş DOM arasındaki fark, herhangi bir teknik denetim için kritik bir metriktir. Bir SaaS platformu için tipik bir hesapta, genellikle ilk kaynak kodunun sadece birkaç satırlık script referansı içerdiğini görüyoruz. JavaScript çalışmazsa veya bir bot zaman aşımına uğrarsa, sayfa boş görünür. Googlebot, modern ECMAScript sürümlerini çalıştırma konusunda çok daha verimli hale geldi, ancak yine de bir render bütçesi dahilinde çalışıyor. Bu, scriptlerinizin harici bir API’den veri getirmesini süresiz olarak beklemeyeceği anlamına gelir. Temel içeriğinizin yürütmenin ilk saniyelerinde kullanılabilir olmasını sağlamak, tutarlı indeksleme için bir gerekliliktir.
Render edilmiş HTML’de içerik görünürlüğünü sağlama
İçeriğinizin görünür olduğundan emin olmak için, scriptler çalışmayı bitirdikten sonra botun aslında ne gördüğünü doğrulamanız gerekir. Yaygın bir yöntem, render edilmiş anlık görüntüyü görmek için Google Search Console’daki URL Denetleme aracını kullanmaktır. Bu araç, render aşamasından sonra oluşturulan HTML’ye net bir bakış sağlar. Ana başlıklarınızın veya ürün açıklamalarınızın bu anlık görüntüde eksik olduğunu fark ederseniz, bu JavaScript’inizin bot için doğru şekilde çalışmadığını gösterir. Bu genellikle script hataları, robots.txt dosyanızdaki engellenmiş kaynaklar veya bir düğmeye tıklamak ya da sayfayı aşağı kaydırmak gibi kullanıcı etkileşimlerine olan bağımlılıklar nedeniyle olur.
Meta veriler ve kanonik etiketler de render edilmiş HTML’de bulunmalıdır. Uygulamanız sayfa başlığını veya meta açıklamasını güncellemek için istemci tarafı bir yönlendiriciye güveniyorsa, bu değişikliklerin sayfa tamamlanmış kabul edilmeden önce gerçekleştiğinden emin olun. Örneğin, React Helmet gibi bir kütüphane kullanan bir React uygulaması, head etiketlerinin DOM’da gerçekten güncellendiğini doğrulamak için kontrol edilmelidir. Bot yalnızca varsayılan şablon meta verilerini görürse, arama sonuçlarındaki tıklama oranlarınız zarar görür. Ayrıca, JavaScript uygulamanız aynı görünüm için birden fazla URL deseni oluşturduğunda yinelenen içerik sorunlarını önlemek için tutarlı kanonik etiketler gereklidir.
JS siteleri için en yaygın teknik engeller nelerdir?
- Googlebot’un sayfayı doğru şekilde render etmesini engelleyen, robots.txt dosyasındaki temel .js dosyalarının engellenmesi.
- URL’lerde History API (pushState) yerine hash parçaları (#) kullanılması, bu da URL’leri çoğu bot için taranamaz hale getirir.
- Standart ‘a href’ bağlantıları yerine dahili navigasyon için ‘onclick’ gibi kullanıcı olaylarının gerekli olması.
- İçerik DOM’a yüklenmeden önce render motorunun zaman aşımına uğramasına neden olan yavaş API yanıtları.
- JavaScript uygulaması her zaman 200 OK durumu döndürdüğü için 404 gibi sunucu tarafı hata kodlarının sağlanamaması.
- Tarayıcıların takip etmesi için sayfalandırılmış yedek bağlantıları olmayan sonsuz kaydırma uygulamaları.
Tipik bir senaryoda, özel bir JavaScript tabanlı ürün filtresi kullanan bir Shopify mağazası, yanlışlıkla binlerce ürün sayfasını arama motorlarından gizleyebilir. Filtre, standart çapa etiketleri aracılığıyla bağlanmayan sorgu parametreleri kullanıyorsa, Googlebot kataloğun daha derin sayfalarını asla bulamayacaktır. Bu, temiz, taranabilir bağlantı yapıları kullanmanın önemini vurgular. Sitenizdeki her önemli sayfaya basit bir bağlantı aracılığıyla ulaşılabildiğini kontrol etmelisiniz. Bir botun bir sonraki sayfaya giden bağlantıyı bulmak için karmaşık bir script çalıştırması gerekiyorsa, dahili bağlantı eşitliğinizin site genelinde etkili bir şekilde dağıtılmadığı muhtemeldir.
SSR, CSR ve Statik Oluşturma arasında seçim yapma
Sunucu Tarafı Render (SSR), bu indeksleme gecikmelerinin çoğu için birincil çözüm görevi görür. Her istek için sunucuda tam HTML oluşturarak, en temel tarayıcının bile istemci tarafı kodunun tek bir satırını çalıştırmaya gerek kalmadan içeriğinizi hemen görebildiğinden emin olursunuz. Bu, özellikle ürün açıklamalarının ve fiyat verilerinin doğru ve hızlı bir şekilde indekslenmesi gereken e-ticaret platformları için yararlıdır. SSR sunucunuzdaki yükü artırabilse de, taramanın ilk aşamasında tamamen doldurulmuş bir HTML belgesine sahip olmanın faydası genellikle altyapı maliyetlerinden daha ağır basar. Birçok ekip, performansı dengelemek için Artımlı Statik Yenileme (Incremental Static Regeneration) gibi hibrit yaklaşımları seçer.
İstemci Tarafı Render (CSR) genellikle Create React App gibi araçlar için varsayılandır, ancak SEO için en risklisidir. Bir CSR ortamında, tarayıcı veya bot neredeyse boş bir HTML dosyası ve bir JavaScript paketi alır. Bot daha sonra sayfayı oluşturmak için scripti çalıştırmalıdır. Siteniz yüksek hacimli sayfalara sahipse, render bütçesi Googlebot’un bir günde bu sayfalardan kaç tanesini işleyebileceğini sınırlayabilir. Daha küçük siteler için bu hemen bir sorun olmayabilir, ancak binlerce URL’ye ölçeklendikçe, yeni içeriğin indekslenmesindeki gecikme büyüme için bir darboğaz haline gelebilir. Next.js veya Nuxt.js gibi bir çerçeveye geçmek, saf CSR’den daha bot dostu yöntemlere geçişe yardımcı olabilir.
JavaScript SEO performansınızı nasıl test edebilirsiniz?
Test etme Google Search Console ile başlar. Googlebot’un yükleyemediği herhangi bir kaynak olup olmadığını görmek için URL Denetleme aracındaki Canlı Test özelliğini kullanın. Bazen üçüncü taraf bir script veya belirli bir CSS dosyası engellenmiş olabilir, bu da render aşamasında düzeni bozabilir. Ekran görüntüsü bozuk veya boş görünüyorsa, konsol günlüğü hatalarını görmek için ‘Daha Fazla Bilgi’ sekmesini araştırmanız gerekir. Bu günlükler genellikle normal kullanıcılar için görünmez ancak SEO için ölümcül olan script hatalarını veya API zaman aşımlarını ortaya çıkarır. ‘Sayfa İndeksleme’ raporunun düzenli izlenmesi, Google’ın render sorunları nedeniyle sayfaları indeksleyemediğini de gösterecektir.
Bir diğer etkili yöntem, JavaScript render özelliği etkinleştirilmiş Screaming Frog gibi özel bir tarayıcı kullanmaktır. Render motorunu Chrome’a ayarlayabilir ve ‘Orijinal HTML’ ile ‘Render Edilmiş HTML’i karşılaştırabilirsiniz. Bu karşılaştırma, scriptleriniz tarafından hangi içeriğin eklendiğini tam olarak görmenizi sağlar. Kelime sayısında veya bağlantı sayısında önemli farklılıklar bulursanız, bu JavaScript’inizin botların kaçırabileceği çok fazla ağır iş yaptığına dair bir işarettir. H1 etiketi ve ana navigasyon gibi en önemli SEO öğelerinin mümkün olduğunda kodun hem orijinal hem de render edilmiş sürümlerinde bulunmasını hedeflemelisiniz.
Tek sayfalık bir uygulamada dahili bağlantıları optimize etme
Dahili bağlantı, taranabilirliğin bel kemiğidir. Birçok tek sayfalık uygulamada (SPA), geliştiriciler kullanıcıları sayfalar arasında hareket ettirmek için olay dinleyicileri olan düğmeler kullanır. Bu, insanlar için hızlı bir deneyim yaratsa da, botlar düğmelere tıklamaz. Uygun bir ‘href’ özniteliğine sahip standart çapa etiketleri kullanmalısınız. Çerçeveniz geçişi sayfa yeniden yüklenmeden yönetse bile, temel HTML tarayıcı için net bir yol sağlamalıdır. Örneğin, bir Vue.js uygulamasında, standart bir ‘a’ etiketi olarak render edilen ‘router-link’ bileşenini kullanmalısınız. Bu, bağlantı eşitliğinin siteniz boyunca akmasını ve yeni sayfaların tarama sırasında doğal olarak keşfedilmesini sağlar.
Ayrıca, bağlantı olarak ‘div’ veya ‘span’ öğelerini kullanmaktan kaçınmalısınız. Yaygın bir hata, bir ‘span’ öğesini bağlantı gibi görünecek şekilde stillendirmek ve ona bir JavaScript tıklama işleyicisi eklemektir. Arama motorları bunları navigasyon öğeleri olarak tanımaz. Site mimariniz bu standart dışı bağlantılara bağlıysa, Search Console’unuzda muhtemelen çok sayıda ‘Keşfedildi – şu anda indekslenmedi’ sayfası göreceksiniz. Bu, botun site haritanızdan sayfaların var olduğunu bilmesi ancak tarama sırasında onlara herhangi bir dahili bağlantı bulamaması nedeniyle olur, bu da Google’ın bu sayfaları düşük öncelikli veya yetim içerik olarak algılamasına yol açar.
Script ağırlıklı sayfalar için tarama bütçesini yönetme
Tarama bütçesi, Googlebot’un belirli bir zaman dilimi içinde sitenizde taradığı sayfa sayısıdır. JavaScript render işlemi, bu bütçenin basit HTML ayrıştırmasından çok daha fazlasını tüketir. Bunu optimize etmek için JavaScript paketlerinizin boyutunu en aza indirmelisiniz. Büyük dosyaların indirilmesi ve çalıştırılması daha uzun sürer, bu da botun sizinkini bitirmeden başka bir siteye geçmesine neden olabilir. Kod bölme gibi teknikler kullanmak, yalnızca mevcut sayfa için gerekli olan kodu sunmanıza olanak tanır ve yürütme süresini azaltır. Tam bir SSR çerçevesine geçemiyorsanız, Prerender.io gibi bir hizmetten de yararlanabilirsiniz, çünkü bu hizmet sayfanızın önbelleğe alınmış statik bir sürümünü özellikle arama botlarına sunar.
- Googlebot’un belirli bileşenleri nasıl render ettiğini görmek için ‘Zengin Sonuçlar Testi’ni kullanarak sitenizi denetleyin.
- Daha iyi indeksleme için tüm görsellerin arka plan resmi stilleri yerine ‘img src’ kullandığından emin olun.
- Yavaş yüklenen içeriğin, modern tarayıcılar tarafından desteklenen ‘IntersectionObserver’ API tarafından tetiklendiğinden emin olun.
- Sayfalandırmanızın, içeriği aynı URL’de JS aracılığıyla güncellemek yerine her sayfa için benzersiz URL’ler kullandığını doğrulayın.
- Mobil ve masaüstü render işlemini karşılaştırmak için çeşitli SEO araçlarındaki ‘Google gibi getir’ eşdeğerlerini kullanın.
- Googlebot’un büyük script dosyalarına aşırı zaman harcayıp harcamadığını görmek için sunucu günlüklerinizi izleyin.
Bu hafta JavaScript SEO’nuzu geliştirmek için atılacak acil adımlar
En önemli 10 sayfanızı belirleyerek ve bunları Google Search Console URL denetleme aracından geçirerek başlayın. Özellikle render edilmiş HTML anlık görüntüsünde eksik metin arayın ve başarısız kaynaklar için konsol hata günlüklerini kontrol edin. Kritik içeriğin eksik olduğunu fark ederseniz, geliştirme ekibinizle bu belirli öğeler için hidratasyon veya sunucu tarafı render uygulama hakkında konuşun. Genellikle, etkileşimli bileşenleri istemci tarafında tutarken yalnızca birincil içeriği sunucu tarafına taşımak en iyi dengeyi sağlar. Bu, en değerli varlıklarınızın uygulamanızın modern hissini feda etmeden indeksleme aşamasına hazır olmasını sağlar.
Ardından, her sayfaya standart bir çapa etiketi aracılığıyla erişilebildiğinden emin olmak için dahili bağlantı yapınızı gözden geçirin. Botların içeriğinizi daha verimli bir şekilde keşfetmesine yardımcı olmak için düğme tabanlı navigasyonu uygun bağlantılarla değiştirin. Son olarak, Googlebot’un /static/js/ veya /dist/ gibi JavaScript klasörlerinize erişmesini engellemediğinizden emin olmak için robots.txt dosyanızı kontrol edin. Bot scriptleri indiremezse, sayfayı render edemez, bu da sitenizi arama sonuçlarından etkili bir şekilde gizler. Bu teknik temellerin düzenli denetimleri, JavaScript ağırlıklı sitenizi arama ortamında görünür ve rekabetçi tutacaktır.
Okumaya devam et: SEO (Arama Motoru Optimizasyonu) · SEO