JavaScript ile yapılandırılmış veri enjekte etmek, istemci tarafı çerçeveler veya etiket yönetimi kapsayıcıları aracılığıyla dinamik olarak oluşturulan sayfalara şema işaretlemesi eklemek için desteklenen bir yöntemdir. Bir sayfa tarayıcıda çalıştırıldığında, özel betikler bir JSON-LD betik bloğu oluşturur ve bunu Belge Nesne Modeline (DOM) ekler. Google Arama bu işaretlemeyi render aşamasında işleyerek zengin sonuç varlıklarını tıpkı statik HTML şemasında olduğu gibi çıkarır.
Google, JavaScript ile enjekte edilen yapılandırılmış verileri nasıl işler?
Google, iki aşamalı bir indeksleme ardışık düzeni kullanır. Birinci aşamada Googlebot, web sunucunuz tarafından döndürülen ham HTML’yi tarar, anlık etiketleri ayrıştırır ve istemci tarafı kaynaklarını daha sonra yürütülmek üzere planlar. Yapılandırılmış veri yalnızca istemci tarafı kodun içinde yer alıyorsa, Googlebot bu ilk tarama sırasında bunu okuyamaz.
İkinci aşamada, Web Rendering Service sayfayı başsız (headless) bir tarayıcı ortamında yükler, JavaScript’i çalıştırır ve render edilmiş DOM’u oluşturur. Google daha sonra bu render edilmiş DOM’u, istemci tarafı betikleri tarafından eklenen tüm JSON-LD düğümleri de dahil olmak üzere şema işaretlemesi açısından inceler.
Google Arama bu içeriği bir web sitesinin HTML’indeki içerikle birlikte görür.
Google Search Central
Google, render edilmiş şemayı başarıyla ayrıştırmasına rağmen, işleme anlık değildir. Render kuyruğa alımı, özellikle büyük tarama bütçelerine veya ağır hesaplama yüküne sahip sitelerde keşif ve çıkarma arasında gecikmelere neden olabilir. Render işleminiz başarısız olursa veya zaman aşımına uğrarsa, Google ham HTML’e geri döner ve yapılandırılmış verileri indekslenmemiş olarak bırakır.
Yapılandırılmış verileri enjekte etmek için hangi teknik yöntemler en iyi sonucu verir?
Geliştiricilerin betik yürütmeyi kullanarak şema eklemek için üç temel yolu vardır. Her teknik, başsız e-ticaret yapı Эдlerinden etiket sistemleri aracılığıyla yönetilen eski pazarlama platformlarına kadar farklı mimari modellere uygundur.
- Çerçeve yaşam döngüsü kancaları (Lifecycle hooks): React, Next.js veya Vue gibi çerçevelerde geliştiriciler, bileşen durumu içinde JSON-LD nesneleri oluşturur ve bunları son bağlamadan (mounting) doğrudan belge başlığına enjekte ederler.
- Vanilla JavaScript DOM enjeksiyonu: Özel bir betik sayfa yüklendiğinde çalışır, pencere değişkenlerinden veya API yüklerinden dinamik öznitelikleri toplar, application/ld+json türünde bir betik öğesi oluşturur ve bunu document.head’e ekler.
- Google Tag Manager Özel HTML etiketleri: Pazarlamacılar, DOM Ready veya Container Loaded olayı tetiklendiğinde GTM dataLayer değişkenleriyle doldurulmuş JSON-LD içeren bir betik etiketini tetikler.
Doğrudan çerçeve enjeksiyonu en temiz yaklaşım olmaya devam eder çünkü yapılandırılmış verileri uygulama derleme ardışık düzenine bağlar. Etiket yöneticisi enjeksiyonu, doğrudan kod dağıtımları olmayan pazarlama ekipleri için esneklik sunar, ancak ekstra bir betik yürütme bağımlılığı katmanı ekler.
Dinamik renderinq neden artık önerilmiyor?
İstemci tarafı web geliştirmesinin ilk yıllarında mühendislik ekipleri, ağır JavaScript uygulamaları ile arama tarayıcıları arasındaki boşluğu kapatmak için dinamik renderinq’e yöneldi. Bir proxy sunucu, arama motoru kullanıcı aracılarından gelen istekleri araya sokar ve insani ziyaretçilere standart JavaScript paketleri sunarken önceden render edilmiş bir HTML anlık görüntüsü sunardı.
Dinamik renderinq bir geçici çözüm (workaround) idi ve arama motorlarında JavaScript tarafından oluşturulan içerikle ilgili sorunlara uzun vadeli bir çözüm değildi.
Google Search Central
Google artık mühendislik ekiplerine dinamik renderinq kurulumlarından uzaklaşmalarını tavsiye ediyor. İki ayrı renderinq ardışık düzenini sürdürmek; bakım yükü, kullanıcıların ve tarayıcıların ne aldığı arasındaki tutarsızlıklar ve arama doğrulamasını engelleyen yönlendirme hataları yaratır.
Proxy render motorları çalıştırmak yerine, modern üretim sistemleri sunucu tarafı renderinq (SSR), statik site oluşturma veya artımlı hidrasyon benimsemelidir. Bu mimariler, JSON-LD yapılandırılmış verilerinin doğrudan sunucu yanıtında mevcut olmasını sağlayarak render gecikmesini ortadan kaldırır ve JavaScript’i işlemeyen motorlar dahil tüm web tarayıcılarında görünürlüğü garanti eder.
Hangi hatalar JavaScript tabanlı şema uygulamalarını bozar?
Betikler aracılığıyla şema enjekte etmek, düz HTML etiketlerinde bulunmayan operasyonel riskler sunar. Tek bir yakalanmamış istisna veya ağ zaman aşımı, yapılandırılmış veri betiğinin DOM’a eklenmesini engelleyebilir.
- Yürütmeyi kullanıcı etkileşimine bağlamak: Kaydırma (scroll), tıklama veya üzerine gelme (hover) olayından sonra şema enjekte etmek üzere yapılandırılmış betikler başarısız olur çünkü Googlebot sayfa kontrolleriyle etkileşime girmez.
- JSON yüklerinde kaçış karakteri kullanılmamış dizeler (Unescaped strings): Çift tırnak işaretlerini kaçış karakteriyle düzenlemeden istemci API’leri aracılığıyla ürün açıklamaları veya inceleme metinleri almak JSON ayrıştırmasını bozar ve şemayı okunamaz hale getirir.
- Zamanlama tutarsızlıkları: Google’ın render zaman aşımından sonra biten asenkron API yanıtlarından sonra şema enjekte etmek, yapılandırılmış verilerin render edilmiş DOM anlık görüntüsünün dışında bırakılmasıyla sonuçlanır.
- Yinelenen şema beyanları: Etiket yöneticisi enjeksiyonunu eski şablon kodlamasıyla (hardcoding) birleştirmek, arama ayrıştırıcılarını kafasını karıştıran çakışan varlık düğümleri oluşturur.
Bahsedilen yöntemler, içeriği yüklemek için kaydırma veya tıklama gibi kullanıcı eylemlerine güvenmez; bu önemlidir çünkü Google Arama sayfanızla etkileşime girmez.
Google Search Central
Enjekte edilen şemayı doğrulamak, ham sayfa kaynağını incelemek yerine render edilmiş DOM çıktısını test etmeyi gerektirir. Tarayıcıda sayfa kaynağını görüntülemek yalnızca kablodan gelenleri gösterir ve JavaScript rutinleriniz tarafından yapılan her değişikliği gizler.
Alien Road bunu müşteri projelerinde nasıl uygular?
Alien Road’da teknik pazarlama ve geliştirme ekiplerimiz, ürün kataloglarının saatlik olarak değiştiği karmaşık e-ticaret platformları ve tek sayfalık uygulamalarla çalışır. JavaScript odaklı yapılandırılmış verileri denetlemek, dağıtmak ve doğrulamak için dört aşamalı, yapılandırılmış bir süreç kullanıyoruz.
1. Keşif ve mimari incelemesi
Müşteri platformunun renderinq yığınını değerlendirerek başlıyoruz. Mağaza, başsız Shopify, özel bir React vitrini veya bir Angular kontrol panelinde çalışıyorsa, yapılandırılmış veri değişkenlerinin nereden kaynaklandığını belirleriz. Katalog özelliklerini (fiyatlandırma, envanter durumu, SKU ve derecelendirmeler) standart schema.org türleriyle eşleştiririz.
2. Sunucu öncelikli enjeksiyon uygulaması
Mümkün olduğunca, yapılandırılmış veri üretimini doğrudan sunucu tarafında render edilen şablonlara veya sunucu tarafı hidrasyon ardışık düzenlerine inşa ediyoruz. Müşteriler istemci tarafı durumuna güvendiğinde, ikincil asenkron getirme döngülerinden kaçınarak, ilk boyamadan (initial paint) önce JSON-LD nesnelerini senkron olarak birleştiren özel yardımcı fonksiyonlar oluşturuyoruz.
3. Render edilmiş çıktıyı test etme
Statik kod incelemelerini atlıyor ve son render edilmiş DOM’u doğruluyoruz. Ekibimiz Google’ın Zengin Sonuçlar Testi aracı ve Search Console URL İncelemesi özelliği aracılığıyla testler çalıştırır. Bu, Googlebot’un enjeksiyon betiğini düzgün bir şekilde yürüttüğünü ve herhangi bir sözdizimi uyarısı olmadan her özelliği algıladığını doğrular.
4. Sürekli izleme ve raporlama
Müşteri dağıtımları, betik mantığının üzerine kolayca yazabilir veya değişken adlarını değiştirebilir. Geçerli Ürün, SSS veya Makale öğelerindeki beklenmeyen düşüşleri tespit etmek için Search Console’daki arama iyileştirme raporlarını haftalık olarak takip ediyoruz. Hatalar ortaya çıktığında, mühendislerimiz üretim sıralamalarını etkilemeden önce hazırlık (staging) ortamındaki tam betik hatasını saptarlar.
Enjekte edilen şemanın çalıştığını nasıl doğrulayabilirsiniz?
Dinamik olarak eklenen şemayı doğrulamak, temel tarayıcı görüntüleme yöntemleri dinamik betik yürütmelerini yansıtmadığı için özel geliştirici araçları gerektirir. Kurulumunuzu onaylamak için şu tanılama adımlarını izleyin:
- Chrome DevTools’u açın: Ham kaynağı görüntülemek yerine Elements sekmesine gidin. Betik etiketinin canlı DOM ağacında mevcut olduğunu doğrulamak için application/ld+json araması yapın.
- Konsol hatalarını kontrol edin: Şema enjeksiyon fonksiyonundan önce hiçbir JavaScript hatasının betik yürütmeyi kesintiye uğratmadığından emin olun.
- Zengin Sonuçlar Testini kullanın: Canlı sayfa URL’sini Google’ın test aracına gönderin. Google’ın sayfayı render ettiğini ve dinamik varlığı tanıdığını doğrulamak için algılanan öğeler sekmesini inceleyin.
- Search Console üzerinden inceleyin: Yayınlanan URL’lerde URL İnceleme aracını kullanın ve ‘Test Edilen Sayfayı Görüntüle’ seçeneğine tıklayın. Enjekte edilen betik bloğunuzun render edilmiş anlık görüntüde mevcut olduğunu doğrulamak için HTML sekmesini inceleyin.
Bu hafta nereden başlamalı
En yüksek değerli beş açılış sayfanızı veya ürün listenizi denetleyin. Google’ın Zengin Sonuçlar Testi aracını açın ve yapılandırılmış verilerinizin render sırasında doğru şekilde algılanıp algılanmadığını doğrulamak için her URL’de canlı bir test çalıştırın.
Şemanız Google Tag Manager’a veya istemci tarafı betiklerine dayanıyorsa, bu etiketlerin ilk sayfa yüklemesi tamamlanmadan önce tetiklenip tetiklenmediğini kontrol edin. Render gecikmesini en aza indirmek ve Google’ın zengin işaretlemenizi güvenilir bir şekilde indekslemesini sağlamak için herhangi bir asenkron veri bağımlılığını sunucu tarafında render edilmiş işaretlemeye veya derleme zamanı veri nesnelerine taşıyın.