LogRocket React Meetup: React ile Yapılandırılmış Veri ve SEO

📚 İçindekiler

1. Giriş
2. Yapılandırılmış Veri Nedir?
3. Yapılandırılmış Veri Türleri
   • 3.1 Makro Veri
   • 3.2 RDFa
   • 3.3 JSON-LD
4. Schema.org ve Schema Kullanımı
5. JSON-LD ile Yapılandırılmış Veri
   • 5.1 JSON-LD Nedir?
   • 5.2 JSON-LD Örnekleri
6. Google Zengin Sonuçlar
   • 6.1 Zengin Sonuçlar Nedir?
   • 6.2 Zengin Sonuçlar Test Etme
7. React Uygulamalarında Yapılandırılmış Veri Kullanımı
   • 7.1 Yapılandırılmış Veri Eklemek
   • 7.2 React Uygulamasında Yapılandırılmış Veri Örneği
8. Yapılandırılmış Veri ve SEO
9. Sonuç
10. Kaynaklar

📝 İçindekiler

JSON-LD ile Yapılandırılmış Veri Nasıl Kullanılır?

Giriş

Yapılandırılmış Veri Nedir?

Yapılandırılmış Veri Türleri

• Makro Veri
• RDFa
• JSON-LD

Schema.org ve Schema Kullanımı

JSON-LD ile Yapılandırılmış Veri

• JSON-LD Nedir?
• JSON-LD Örnekleri

Google Zengin Sonuçlar

• Zengin Sonuçlar Nedir?
• Zengin Sonuçlar Test Etme

React Uygulamalarında Yapılandırılmış Veri Kullanımı

• Yapılandırılmış Veri Eklemek
• React Uygulamasında Yapılandırılmış Veri Örneği

Yapılandırılmış Veri ve SEO

Sonuç

Kaynaklar

💡 Giriş

Yapılandırılmış veri, arama motorlarının web sayfalarını anlamasına yardımcı olan bir kategorizasyon dilidir. Bu dil, veri içeriğini standart bir şekilde gömerek web sayfasının anlamlı bir şekilde kullanılmasını sağlar. Yapılandırılmış veri, Schema.org gibi standartlarla desteklenir ve farklı bilgi türlerini içerebilir.

Bu makalede, JSON-LD formatını kullanarak yapılı veri eklemeyi öğreneceksiniz. JSON-LD, JavaScript nesne gösterimi (JSON) formatını kullanan bir yapılandırılmış veri türüdür. Bu makalede, JSON-LD'nin ne olduğunu ve nasıl kullanıldığını öğreneceksiniz. Ayrıca, Google'ın zengin sonuçlar olarak adlandırdığı özellikleri nasıl kullanabileceğinizi öğreneceksiniz.

🧩 Yapılandırılmış Veri Nedir?

Yapılandırılmış veri, web sayfalarına eklenen verilerin anlamını açıkça belirtmek için kullanılan bir standardizasyon yöntemidir. Arama motorları, web sayfalarını tarama ve indekleme işlemlerinde yapılandırılmış veriden yararlanır. Bu veri, Schema.org tarafından sağlanan şemalar kullanılarak tanımlanır.

Yapılandırılmış veri, arama motorlarının web sayfalarını daha iyi anlamasına yardımcı olur ve sonuçların zenginleştirilmesine olanak tanır. Örneğin, bir etkinlik web sayfasında yapılandırılmış veri kullanarak etkinlik tarihleri, yerleri ve katılımcıları gibi bilgileri sağlayabilirsiniz. Böylece Google, bu bilgileri doğrudan arama sonuçlarına dahil edebilir.

🧱 Yapılandırılmış Veri Türleri

Yapılandırılmış veri, farklı formatlarda sunulabilir. En yaygın kullanılan yapılandırılmış veri formatları şunlardır:

3.1 Makro Veri

Makro veri, yapılandırılmış verileri web sayfasının HTML kodu içinde tanımlayan bir yöntemdir. Makro veri, HTML etiketleri arasında yer alır ve arama motorları tarafından taranırken analiz edilir. RDFa ve Microdata, makro veri biçimlerine örnek olarak verilebilir.

3.2 RDFa

RDFa (Resource Description Framework in Attributes), HTML belgelerine yapılandırılmış veri eklemek için kullanılan bir yöntemdir. RDFa, RDF veri modelini kullanan bir XML biçimi olarak tanımlanır. RDFa, HTML etiketlerinde özel nitelikler kullanarak verileri açıkça tanımlar.

3.3 JSON-LD

JSON-LD (JSON for Linked Data), yapılandırılmış verileri göstermek için JavaScript Object Notation (JSON) biçimini kullanır. JSON-LD, bir HTML sayfasının içine yerleştirilen JSON yapısını tanımlar. JSON-LD, bir veri nesnesini açık olarak tanımlayarak ve diğer kaynaklarla ilişkilendirerek yapılandırılmış veri sağlar.

🏢 Schema.org ve Schema Kullanımı

Schema.org, yapılandırılmış veri için bir standartlar ansiklopedisidir. Schema.org, Google, Microsoft, Yahoo ve Yandex gibi büyük arama motorları tarafından desteklenir. Birçok farklı veri türü için şemalar sağlar ve her biri için öznitelik tanımlamalarına olanak tanır.

Schema.org'da bulunan şemalar, ilgili veri türlerini açıkça tanımlar. Örneğin, "Person" şeması kişilerle ilgili bilgiler için kullanılır. Bu şema, ad, soyad, doğum tarihi gibi bilgileri içerir. Diğer şemalar arasında "Recipe" (tarif) ve "Event" (etkinlik) bulunur.

Schema.org, yapılandırılmış veri eklemek için kullanılan en yaygın kaynaklardan biridir. Web sayfanıza bu şemaları ekleyerek, arama motorlarından daha iyi sonuçlar elde edebilirsiniz.

💻 JSON-LD ile Yapılandırılmış Veri

5.1 JSON-LD Nedir?

JSON-LD (JSON for Linked Data), yapılandırılmış veri eklemek için kullanılan bir formattır. JSON-LD, bir web sayfasının içine gömülü JSON verisini tanımlar. Bu veri, bir nesne gösterimi olarak kullanılır ve diğer veri kaynaklarıyla ilişkilendirilebilir.

JSON-LD'nin avantajı, verinin web sayfasının içine gizlenmesine olanak tanımasıdır. Bu sayede web sayfanın görünümünde herhangi bir değişiklik yapmadan yapılandırılmış veri eklemek mümkündür. JSON-LD ayrıca, arama motorlarının içeriği daha iyi anlamasına yardımcı olur ve sonuçların zenginleştirilmesine olanak sağlar.

5.2 JSON-LD Örnekleri

JSON-LD yapısı, JSON nesneleri biçiminde tanımlanır. Bir JSON-LD verisi, @context ve @type gibi özel anahtarlarla işaretlenir. Ayrıca, belirli bir veri türünün özelliklerini içeren bir nesne de içerebilir.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "Çikolatalı Brownie Tarifi",
  "author": {
    "@type": "Person",
    "name": "Ebru Yılmaz"
  },
  "datePublished": "2022-01-01",
  "description": "Lezzetli çikolatalı brownie tarifi",
  "image": "https://example.com/images/brownie.jpg",
  "recipeIngredient": [
    "200 g bitter çikolata",
    "150 g tereyağı",
    "150 g şeker",
    "3 adet yumurta",
    "100 g un",
    "50 g kakao"
  ],
  "recipeInstructions": "Tarif talimatları burada yer alır.",
  "recipeYield": "6 kişilik"
}
</script>

Bu örnekte, bir "Recipe" (tarif) adında bir şema kullanılmıştır. İlgili tarifin adı, yazarı, yayınlanma tarihi, açıklaması, görüntüsü, malzemeleri ve talimatları gibi bilgiler JSON-LD formatında verilmiştir.

🌟 Google Zengin Sonuçlar

6.1 Zengin Sonuçlar Nedir?

Google Zengin Sonuçlar, yapılandırılmış verinin arama sonuçlarında gösterilmesini sağlayan bir özelliktir. Zengin sonuçlar, kullanıcılara daha fazla bilgi sunarak arama deneyimini geliştirir. Örneğin, bir etkinlik web sayfasının zengin sonuçları, etkinlik tarihlerini, yerini ve başlığını doğrudan arama sonuçlarında gösterebilir.

Google Zengin Sonuçlar, yapılandırılmış veriyi okuyarak bu verilere dayanarak zengin sonuçları oluşturur. Web sayfanıza doğru yapılandırılmış veriyi eklediğinizde, Google'ın bu veriyi kullanma olasılığını artırırsınız.

6.2 Zengin Sonuçlar Test Etme

Zengin Sonuçlar Testi, web sayfanızdaki yapılandırılmış veriyi test etmek için kullanılan bir araçtır. Bu araç, bir URL'yi veya sayfanın kodunu alır ve sayfadaki yapılandırılmış veriyi analiz eder. Bu şekilde, web sayfanızdaki yapılandırılmış verinin doğru bir şekilde olup olmadığını görebilirsiniz.

Zengin Sonuçlar Testi'ni kullanarak, yapılandırılmış verinizin yanlış veya eksik olduğu durumları tespit edebilirsiniz. Bu test aracını kullanarak, kodunuzu doğru bir şekilde hata ayıklamanız ve yapılandırılmış verinizi geliştirmeniz mümkün olacaktır.

⚛️ React Uygulamalarında Yapılandırılmış Veri Kullanımı

7.1 Yapılandırılmış Veri Eklemek

React uygulamalarında yapılandırılmış veri eklemek oldukça kolaydır. JSON-LD formatındaki veriyi kullanarak, yapılandırılmış veriyi sağlayabilirsiniz. Bu veriyi web sayfanızın içine yerleştirebilir ve React bileşenlerini kullanarak görsel ögeler oluşturabilirsiniz.

Tek yapmanız gereken, JSON-LD verisini bir JavaScript nesnesine dönüştürdükten sonra bunu sayfanızın içine eklemektir. React bileşenleri kullanarak, verileri alıp işleyebilir ve sonuçları web sayfanızda gösterebilirsiniz.

7.2 React Uygulamasında Yapılandırılmış Veri Örneği

Aşağıda, bir React uygulamasında nasıl yapılandırılmış veri ekleyebileceğinizi gösteren bir örnek bulunmaktadır. Bu örnekte, bir hayvanat bahçesi web sitesi için yapılandırılmış veri kullanılmıştır.

import React from 'react';

const AnimalStructuredData = () => {
  const animalData = {
    '@context': 'https://schema.org/',
    '@type': 'Animal',
    name: 'Ördek',
    description: 'Tatlı bir ördek',
    image: 'https://example.com/images/duck.jpg',
    diet: 'Omnivor',
  };

  return (
    <script type="application/ld+json">
      {JSON.stringify(animalData)}
    </script>
  );
};

export default AnimalStructuredData;

Bu örnekte, AnimalStructuredData isimli bir React bileşeni tanımlanmıştır. Bu bileşen, animalData adlı bir JSON-LD verisi oluşturur ve bunu sayfa içinde bir script etiketi içine yerleştirir. Sonuç olarak, yapılandırılmış veri web sayfanızın içine eklenir.

🔍 Yapılandırılmış Veri ve SEO

Yapılandırılmış veri, arama motorları tarafından web sayfalarını anlamak ve doğrudan arama sonuçlarına bilgi eklemek için kullanılır. Bu şekilde, arama sonuçları daha zengin ve kullanıcı dostu hale getirilir. Yapılandırılmış veri eklemek, web sitenizin görünürlüğünü artırabilir ve kullanıcıların dikkatini çekebilir.

SEO (Search Engine Optimization) stratejileriyle birlikte yapılandırılmış veri kullanmak, web sitenizin arama sonuçlarında daha iyi sıralanmasına yardımcı olabilir. Bununla birlikte, yapılandırılmış verinin SEO sıralamasına doğrudan etkisi olmasa da, zengin sonuçlara ulaşmanızı sağlar.

Yapılandırılmış veri kullanarak, web sitenizdeki içeriği daha anlamlı hale getirebilir ve kullanıcılara daha iyi bir deneyim sunabilirsiniz. Arama motorları, yapılandırılmış veriyi okuyarak kullanıcılara daha doğru ve ilgili sonuçlar sunabilir.

🎉 Sonuç

Bu makalede, JSON-LD kullanarak yapılandırılmış veri eklemenin nasıl yapılacağını öğrendiniz. JSON-LD, yapılandırılmış veri sağlamanın kolay ve etkili bir yoludur. Bu yapılandırılmış veri, arama motorları tarafından okunarak zengin sonuçların oluşturulmasını sağlar.

Ayrıca, Google Zengin Sonuçlar aracılığıyla web sayfanızdaki yapılandırılmış veriyi test edebilir ve sonuçları gözlemleyebilirsiniz. Bu araç, yapılandırılmış verinizin doğruluğunu kontrol etmek için kullanışlıdır.

Yapılandırılmış veri, web sayfalarınızı arama motorlarının daha iyi anlamasını sağlar ve kullanıcılara zengin bir deneyim sunmanıza yardımcı olur. Bu nedenle, SEO stratejilerinize yapılandırılmış veri eklemeyi düşünebilirsiniz.

Kaynaklar

• Schema.org: https://schema.org/
• JSON-LD: https://json-ld.org/
• Google Zengin Sonuçlar: https://developers.google.com/search/docs/guides/search-gallery