Oğuzhan KARAGÜZEL

OĞUZHAN KARAGÜZEL

Yazılım geliştirici

Open Graph, Structured Data (Schema.org) ve ARIA Rehberi

Yazar: Oğuzhan KARAGÜZEL ·

SEO serisinin üçüncü bölümünde, sayfanın arama sonuçlarında ve sosyal medyada nasıl göründüğünü belirleyen iki konuyu ele alıyoruz: Open Graph ve yapılandırılmış veri (Structured Data). Sonunda erişilebilirliğin temel taşı olan ARIA etiketlerine de değineceğiz. Önceki bölüm: Teknik SEO: robots.txt, Sitemap ve Canonical.

Open Graph Nedir ve Neden Kullanılır?

Open Graph, Facebook tarafından geliştirilen ve web sayfalarının sosyal medya platformlarında daha etkili paylaşılmasını sağlayan bir meta etiket protokolüdür. LinkedIn, WhatsApp ve X gibi birçok platform da bu etiketleri okur. Etiketler; sayfanın başlığını, açıklamasını, görselini ve türünü tanımlayarak paylaşım kartının nasıl görüneceğini belirler.

  • Daha çekici paylaşımlar: Doğru görsel ve başlıkla paylaşılan bağlantı daha profesyonel görünür.
  • Daha fazla etkileşim: İyi hazırlanmış bir kart tıklanma ve paylaşım olasılığını artırır.
  • Kontrol: Sayfanın sosyal medyada nasıl görüneceğine siz karar verirsiniz; platformun tahminine bırakmazsınız.
  • Sosyal medya desteği: Open Graph doğrudan bir sıralama faktörü değildir, ancak paylaşım ve trafik yoluyla sitenin görünürlüğüne dolaylı olarak katkı sağlar.

Temel ve Ek Open Graph Etiketleri

Open Graph etiketleri HTML'in <head> bölümüne meta etiketi olarak eklenir. Temel etiketler:

  • og:title: Sayfanın başlığı.
  • og:description: Sayfanın kısa açıklaması. Meta description ile aynı metin burada da kullanılabilir.
  • og:image: Paylaşıldığında görünecek ana görselin tam URL'si.
  • og:url: Sayfanın asıl (canonical) adresi.
  • og:type: Sayfanın türü; makale için article, genel sayfalar için website.

Ek etiketler arasında og:site_name (sitenin adı), og:locale (dil ve bölge, örneğin tr_TR), og:video ve og:audio (sayfada video ya da ses varsa dosyanın URL'si) yer alır. Tüm etiketleri bir arada gösteren örnek bir sayfa:

HTML
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Örnek Sayfa</title>

  <!-- Open Graph -->
  <meta property="og:title" content="Örnek Sayfa Başlığı" />
  <meta property="og:description" content="Bu sayfa Open Graph etiketleriyle optimize edilmiştir." />
  <meta property="og:image" content="https://www.example.com/image.jpg" />
  <meta property="og:url" content="https://www.example.com/page.html" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Örnek Web Sitesi" />
  <meta property="og:locale" content="tr_TR" />
</head>
<body>
  <!-- Sayfa içeriği -->
</body>
</html>

Open Graph İpuçları ve Test Etme

  • Görsel kalitesi: Görsel en az 1200x630 piksel olmalı ve yüksek çözünürlüklü olmalıdır. SVG formatı desteklenmez; mümkünse JPEG tercih edin. Görselin tam (mutlak) URL ile verilmesi gerekir.
  • Başlık ve açıklama: Kısa, öz ve çekici olmalıdır; kullanıcının ilgisini çeken ilk şey budur.
  • Test etme: Etiketlerin doğru çalışıp çalışmadığını ve kartın nasıl görüneceğini Facebook'un Sharing Debugger aracıyla kontrol edebilirsiniz. Platformlar kartları önbelleğe alır; görseli değiştirdikten sonra araçta yeniden tarama yapmanız gerekebilir.

Etiketleri Kim Yönetecek?

Open Graph etiketlerini içerik editörünün mü yoksa sistemin mi yöneteceğine karar vermek gerekir. Editör yönetecekse yönetim panelinde ona yol gösterin: görsel formatı, boyutu, açıklama uzunluğu ve anahtar kelime konularında ipuçları gösterin. Editöre bırakmayacaksanız özellikle görsel gibi alanlar için standartlar belirleyin. Meta description, og:description için de varsayılan olarak kullanılabilir.

Structured Data (Yapılandırılmış Veri) Nedir?

Yapılandırılmış veri, sayfa içeriğinin arama motorları tarafından daha iyi anlaşılması için belirli bir biçimde işaretlenmiş bilgidir. Arama motoru bu sayede sayfanın bir makale, ürün, etkinlik ya da kuruluş hakkında olduğunu "tahmin etmek" yerine açıkça öğrenir.

  • Zengin sonuçlar (rich results): Arama sonuçlarında yıldız puanı, fiyat, etkinlik tarihi gibi ek bilgiler görünebilir; bu da tıklama oranını artırabilir.
  • Daha iyi anlaşılma: Arama motoru sitenin ve markanın ne olduğunu daha net kavrar.
  • Kullanıcı deneyimi: Kullanıcılar ürün fiyatı, değerlendirme gibi bilgileri sonuç sayfasında görür.
  • Sesli asistanlar: İçeriğin net biçimde işaretlenmesi, arama motorlarının ve asistanların sayfayı doğru yorumlamasına yardımcı olabilir.

Dikkat: Yapılandırılmış veri tek başına sıralamayı yükseltmez; ancak zengin sonuç gösterimi ve doğru anlaşılma sağlar. İşaretlenen bilgi sayfada görünen içerikle de uyumlu olmalıdır.

Formatlar: JSON-LD, Microdata ve RDFa

Yapılandırılmış veri Schema.org sözlüğüyle üç farklı biçimde yazılabilir. Schema.org; Google, Bing, Yahoo ve Yandex tarafından desteklenen, ürün, etkinlik, makale ve kuruluş gibi pek çok türü tanımlayan ortak bir kelime hazinesidir.

  1. JSON-LD: Önerilen ve en yaygın formattır. HTML içeriğinden bağımsız bir <script type="application/ld+json"> bloğu olarak eklenir, kolay yönetilir. Bu yazının geri kalanı JSON-LD üzerine kuruludur.
  2. Microdata: HTML etiketlerinin içine itemscope, itemtype ve itemprop özellikleriyle yerleştirilir.
  3. RDFa: Benzer şekilde HTML özellikleriyle (vocab, typeof, property) işaretleme yapar.

Microdata örneği:

HTML
<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">John Doe</h1>
  <p itemprop="jobTitle">Software Engineer</p>
  <a href="mailto:johndoe@example.com" itemprop="email">johndoe@example.com</a>
</div>

JSON-LD Örnekleri: Article, Product, Event

Aşağıdaki bloklar sayfanın <head> ya da <body> bölümüne eklenebilir.

Article (Makale)

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Structured Data Nedir ve Nasıl Kullanılır?",
  "author": { "@type": "Person", "name": "Ali Veli" },
  "publisher": {
    "@type": "Organization",
    "name": "Örnek Yayıncılık",
    "logo": { "@type": "ImageObject", "url": "https://www.example.com/logo.png" }
  },
  "datePublished": "2026-10-23",
  "image": "https://www.example.com/image.jpg"
}
</script>

Product (Ürün)

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Örnek Ürün",
  "image": "https://www.example.com/image.jpg",
  "description": "Bu, örnek bir ürün açıklamasıdır.",
  "sku": "12345",
  "brand": { "@type": "Brand", "name": "Örnek Marka" },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/product",
    "priceCurrency": "TRY",
    "price": "99.99",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Event (Etkinlik)

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Örnek Etkinlik",
  "startDate": "2026-11-10T19:00",
  "endDate": "2026-11-10T23:00",
  "location": {
    "@type": "Place",
    "name": "Etkinlik Merkezi",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "1234 Örnek Sokak",
      "addressLocality": "İstanbul",
      "postalCode": "34000",
      "addressCountry": "TR"
    }
  },
  "image": "https://www.example.com/event.jpg",
  "description": "Bu, örnek bir etkinlik açıklamasıdır.",
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/event",
    "priceCurrency": "TRY",
    "price": "50",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Breadcrumb, Organization ve LocalBusiness

Bir sayfada birden fazla işaretleme türü birlikte kullanılabilir. En sık kullanılanlar şunlardır.

BreadcrumbList (Gezinme Yolu)

Kullanıcının sitede nerede olduğunu gösterir ve arama motorunun site yapısını anlamasına yardımcı olur.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Ana Sayfa", "item": "https://www.example.com" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.example.com/blog" },
    { "@type": "ListItem", "position": 3, "name": "Yapılandırılmış Veri", "item": "https://www.example.com/blog/yapilandirilmis-veri" }
  ]
}
</script>

Organization (Kuruluş)

Şirket ya da kurum hakkında temel bilgileri verir.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Örnek Şirket",
  "url": "https://www.example.com",
  "logo": "https://www.example.com/logo.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "+90-123-456-7890",
    "contactType": "customer service",
    "areaServed": "TR",
    "availableLanguage": "Turkish"
  }]
}
</script>

LocalBusiness (Yerel İşletme)

Belirli bir konumda hizmet veren işletmeler içindir; adres, harita koordinatı ve çalışma saatlerini tanımlar.

JSON-LD
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Örnek Kafe",
  "image": "https://www.example.com/kafe.jpg",
  "priceRange": "$$",
  "telephone": "+90-123-456-7890",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Örnek Sokak",
    "addressLocality": "İstanbul",
    "postalCode": "34000",
    "addressCountry": "TR"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": "41.01224", "longitude": "28.976018" },
  "url": "https://www.example.com/kafe",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "08:00",
    "closes": "22:00"
  }]
}
</script>

Doğrulama ve Yazılımcı Notları

Yapılandırılmış veriyi doğrulamak için Google'ın Rich Results Test aracını ve Schema.org'un Schema Markup Validator (validator.schema.org) aracını kullanın. Bu araçlar işaretlemenin geçerli olup olmadığını ve arama sonuçlarında nasıl görünebileceğini gösterir. Eski rehberlerde geçen "Structured Data Testing Tool" artık kullanımdan kaldırılmıştır. Hazır JSON-LD üretmek için technicalseo.com üzerindeki Schema Markup Generator gibi araçlardan da yararlanabilirsiniz.

Yazılımcı olarak dikkat edeceğimiz noktalar:

  • Uygun bir türü olan her sayfaya yapılandırılmış veri eklenmelidir.
  • Yönetimi kısmen kullanıcıya bırakılmalıdır (örneğin CMS'te düzenlenebilir alanlar).
  • Hata kontrolü yapılmalıdır; geçersiz JSON-LD hiç yazılmamış kadar faydasızdır.
  • Sayfadaki tüm bilgiler için uygun türler doldurulmaya çalışılmalıdır: Organization, Article, BreadcrumbList, Person gibi.

ARIA-label ve ARIA-labelledby

ARIA (Accessible Rich Internet Applications), web uygulamalarını yardımcı teknolojiler için daha erişilebilir kılan WAI-ARIA standardıdır. Ekran okuyucular gibi araçların bir öğenin amacını anlayabilmesi için kullanılır. Erişilebilir bir site daha geniş bir kitleye ulaşır ve genel kullanıcı deneyimini de iyileştirir.

aria-label

Bir öğeye doğrudan erişilebilir bir ad verir. Öğenin görünür bir metni olmadığında ya da yetersiz olduğunda kullanılır:

HTML
<button aria-label="Yorum yap">+</button>

Ekran okuyucu bu butonu "+" yerine "Yorum yap" olarak okur.

aria-labelledby

Öğenin adını, sayfadaki başka bir öğenin içeriğinden alır. Genellikle bir bölümü ya da iletişim penceresini kendi başlığıyla adlandırmak için kullanılır:

HTML
<section aria-labelledby="sepet-baslik">
  <h2 id="sepet-baslik">Sepetim</h2>
  ...
</section>

Ekran okuyucu bu bölüme geldiğinde onu "Sepetim" olarak tanıtır. Form alanları için ise ARIA yerine doğal yöntemi, <label for="..."> etiketini kullanın. Özetle aria-label kısa ve doğrudan bir ad vermek için, aria-labelledby ise sayfada zaten var olan bir metne bağlanmak için uygundur. Mümkün olduğunda önce doğal HTML öğelerini (<button>, <label>, <nav>) kullanın; ARIA'yı bunların yetmediği yerde ekleyin.

Kontrol Listesi

  1. Her sayfada og:title, og:description, og:image, og:url ve og:type var mı?
  2. og:image en az 1200x630 piksel, JPEG ve mutlak URL ile mi veriliyor?
  3. Sharing Debugger ile paylaşım kartı denendi mi?
  4. Her sayfada uygun JSON-LD (Organization, Article, BreadcrumbList vb.) bulunuyor mu?
  5. JSON-LD, Rich Results Test ya da Schema Markup Validator ile doğrulandı mı?
  6. İşaretlenen bilgiler sayfada görünen içerikle uyumlu mu?
  7. Metni olmayan butonlarda ve formlarda aria-label ya da aria-labelledby kullanıldı mı?

Serinin son bölümünde web sitesi hızı ve Core Web Vitals konusunu ele alıyoruz.