JavaScript ile yapılandırılmış veri oluşturma

Modern web siteleri, çok sayıda dinamik içeriği görüntülemek için JavaScript kullanır. Web sitelerinizde yapılandırılmış veri oluşturmak için JavaScript'i kullanırken dikkat etmeniz gereken birkaç nokta vardır ve bu kılavuzda en iyi uygulamalar ile uygulama stratejilerine yer verilmiştir. Yapılandırılmış veri konusunda yeniyseniz yapılandırılmış verinin nasıl çalıştığı hakkında daha fazla bilgi edinebilirsiniz.

Yapılandırılmış verileri JavaScript ile oluşturmanın farklı yolları vardır, ancak en yaygın olanları şunlardır:

JSON-LD'yi dinamik bir şekilde oluşturmak için Google Etiket Yöneticisi'ni kullanın

Google Etiket Yöneticisi, kodu düzenlemeden web sitenizdeki etiketleri yönetmenize olanak tanır. Google Etiket Yöneticisi ile yapılandırılmış veri oluşturmak için aşağıdaki adımları izleyin:

  1. Sitenize Google Etiket Yöneticisi'ni kurup yükleyin.
  2. Kapsayıcıya yeni bir Özel HTML etiketi ekleyin.
  3. Desteklenen yapılandırılmış veri bloğunu etiket içeriğine yapıştırın.
  4. Kapsayıcıyı, kapsayıcınızın yönetici menüsündeki Google Etiket Yöneticisini Yükle bölümünde gösterildiği gibi yükleyin.
  5. Etiketi web sitenize eklemek için kapsayıcınızı Google Etiket Yöneticisi arayüzünde yayınlayın.
  6. Uygulamanızı test etme.

Google Etiket Yöneticisi'nde değişkenleri kullanma

Google Etiket Yöneticisi (GTM), değişkenlerin sayfadaki bilgileri, yapılandırılmış verilerinizin bir parçası olarak kullanmasını destekler. GTM'deki bilgileri çoğaltmak yerine, yapılandırılmış verileri sayfadan almak için değişkenler kullanın. GTM'deki bilgilerin kopyalanması, sayfa içeriği ile GTM aracılığıyla eklenen yapılandırılmış veriler arasında uyumsuzluk olma riskini artırır.

Örneğin, aşağıdaki recipe_name adlı özel değişkeni oluşturup yemek tarifi adı olarak sayfa başlığını kullanan bir Yemek tarifi JSON-LD bloğunu dinamik olarak oluşturabilirsiniz: 

function() { return document.title; }

Daha sonra, özel etiket HTML'nizde {{recipe_name}} kullanabilirsiniz.

Değişkenleri kullanarak sayfadan gerekli tüm bilgileri toplamak için değişkenler oluşturmanızı öneririz.

Aşağıda özel HTML etiketi içeriği için bir örnek verilmiştir:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Özel JavaScript ile yapılandırılmış veriler oluşturma

Yapılandırılmış veri oluşturmanın bir başka yolu, yapılandırılmış verilerinizin tamamını oluşturmak veya sunucu taraflı oluşturulan yapılandırılmış verilere daha fazla bilgi eklemek için JavaScript kullanmaktır. Her iki durumda da Google Arama, sayfayı oluştururken DOM'da bulunan yapılandırılmış verileri anlayabilir ve işleyebilir. Google Arama'nın JavaScript'i nasıl işlediği hakkında daha fazla bilgi edinmek için JavaScript ile ilgili temel bilgiler konusuna bakın.

Aşağıda JavaScript tarafından oluşturulan yapılandırılmış verilere bir örnek verilmiştir:

  1. İlgilendiğiniz yapılandırılmış veri türünü bulun.
  2. Web sitenizin HTML'sini aşağıdaki örneğe benzer bir JavaScript snippet'i içerecek şekilde düzenleyin (CMS veya barındırma sağlayıcınızın dokümanlarına bakın veya geliştiricilerinize sorun).
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Uygulamanızı Zengin Sonuçlar Testi ile test edin.

Sunucu taraflı oluşturma özelliğini kullanma

Sunucu taraflı oluşturma yöntemini kullanıyorsanız oluşturulan çıkışa yapılandırılmış verileri de ekleyebilirsiniz. İlgilendiğiniz yapılandırılmış veri türüne ait JSON-LD'nin nasıl oluşturulacağını öğrenmek için, kullanıdığınız yapının dokümanlarına bakın.

Uygulamanızı test etme

Google Arama'nın yapılandırılmış verilerinizi tarayabildiğinden ve dizine eklediğinden emin olmak için uygulamanızı test edin:

  1. Zengin Sonuçlar Testi'ni açın.
  2. Test etmek istediğiniz URL'yi girin.
  3. Test URL'si 'ni tıklayın.

    Başarılı: Her şeyi doğru yaptıysanız ve araçta yapılandırılmış veri türünüz destekleniyorsa "Sayfa zengin sonuçlar için uygundur" mesajını görürsünüz.
    Zengin Sonuçlar testi tarafından desteklenmeyen yapılandırılmış bir veri türünü test ediyorsanız oluşturulan HTML'yi kontrol edin. Oluşturulan HTML yapılandırılmış verileri içeriyorsa Google Arama bu verileri işleyebilir.

    Tekrar deneyin: Hata veya uyarı görürseniz büyük olasılıkla söz dizimi hatası veya eksik bir özellik vardır. Yapılandırılmış veri türünüzle ilgili dokümanları okuyun ve tüm özellikleri eklediğinizden emin olun. Sorununuz devam ederse aramayla ilgili JavaScript sorunlarını düzeltme hakkındaki kılavuzu da kontrol edin.