Yükleniyor

Open Graph ve Twitter Card Nedir? Sosyal Medya Önizleme Rehberi

Bilgi Merkezi / Open Graph ve Twitter Card Nedir?

Open Graph ve Twitter Card Nedir?

Giriş

Bir web sayfasının bağlantısını sosyal medyada paylaştığınızda görünen başlık, açıklama ve görsel otomatik olarak oluşmaz; bu bilgileri siz belirlemeniz gerekir. Open Graph (OG) ve Twitter Card, sayfanızın HTML'sine eklediğiniz meta etiketleridir ve Facebook, LinkedIn, X (Twitter), WhatsApp gibi platformların bağlantı önizlemelerini nasıl oluşturacağını kontrol ederler. Doğru yapılandırılmış Open Graph ve Twitter Card etiketleri; tıklama oranlarını artırır, marka tutarlılığını güçlendirir ve içeriğinizin sosyal medyada daha profesyonel görünmesini sağlar. Bu rehberde her iki teknolojinin ne olduğunu, nasıl çalıştığını ve nasıl doğru uygulanacağını adım adım ele alıyoruz.

Neden Önemlidir?

Open Graph ve Twitter Card etiketleri olmadan sosyal medya platformları sayfanızı kendiliklerinden analiz eder ve çoğunlukla hatalı, eksik veya istenmeyen bir önizleme oluşturur. Bu durum:

Paylaşılan içeriğin tıklanma oranını (CTR) düşürür.
Marka imajını zedeleyecek küçük veya alakasız görsellerin görünmesine yol açar.
İçeriğinizin değerini tam olarak yansıtmayan başlık ve açıklamaların çıkmasına neden olur.
Reklam kampanyalarında paylaşılan URL'lerin beklenmedik görünmesine sebep olur.

Open Graph protokolü, ogp.me adresinde belgelenmiş açık bir standarttır ve Facebook tarafından geliştirilmiştir. Twitter Card ise X (Twitter) Geliştirici Dokümantasyonu'nda tanımlanmış bir meta etiket sistemidir.

LinkedIn ve Twitter'da paylaşılan linkin büyük görsel önizlemesiyle doğru Open Graph çıktısını gösteren ekran görüntüsü

Open Graph ve Twitter Card: Sosyal Medya Önizlemelerini Kontrol Edin

Open Graph Nedir?

Open Graph, Facebook'un 2010 yılında geliştirdiği ve web sayfalarını "sosyal nesnelere" dönüştüren bir meta etiket protokolüdür. Günümüzde Facebook, LinkedIn, WhatsApp, Telegram, Slack ve Pinterest başta olmak üzere pek çok platform Open Graph etiketlerini okuyarak bağlantı önizlemelerini oluşturur.

Open Graph etiketleri sayfanızın <head> bölümüne eklenir ve property niteliğiyle tanımlanır:

<!-- Zorunlu Open Graph etiketleri -->
<meta property="og:title" content="Sayfa Başlığı" />
<meta property="og:description" content="Sayfa açıklaması buraya gelir." />
<meta property="og:image" content="https://example.com/og-gorsel.webp" />
<meta property="og:url" content="https://example.com/sayfa/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Site Adınız" />
<meta property="og:locale" content="tr_TR" />

Open Graph Etiket Referansı

Temel ve gelişmiş Open Graph etiketleri ile açıklamaları:

Etiket	Zorunlu	Açıklama
`og:title`	Evet	Önizlemede görünecek başlık. 60-90 karakter önerilir.
`og:description`	Önerilir	Önizleme açıklaması. 155-200 karakter arası idealdir.
`og:image`	Evet	Paylaşım görseli. Mutlak URL olmalı; en az 1200×630 px önerilir.
`og:url`	Evet	Sayfanın kanonik URL'si. Canonical etiketiyle eşleşmeli.
`og:type`	Evet	`website`, `article`, `product` gibi içerik türünü belirtir.
`og:site_name`	Önerilir	Sitenizin genel adı. Marka tutarlılığını sağlar.
`og:locale`	Önerilir	İçerik dili ve bölge. Türkçe için `tr_TR`.
`og:image:width` / `og:image:height`	Önerilir	Görselin boyutları. Platform önizleme motorunun yeniden boyutlandırmasını engeller.
`og:image:alt`	Önerilir	Görsel açıklaması. Erişilebilirlik için eklenmelidir.
`og:image:type`	Önerilir	MIME türü: `image/jpeg`, `image/png`, `image/webp`.

Twitter Card Nedir?

Twitter Card, X (eski adıyla Twitter) platformunun paylaşılan bağlantılar için kendi önizleme sistemini tanımlamak amacıyla oluşturduğu meta etiket standardıdır. X, Open Graph etiketlerini de okuyabilir; ancak platform kendine özgü twitter: önekli etiketleri öncelikli olarak değerlendirir.

Dört farklı Twitter Card türü mevcuttur:

summary: Küçük kare görsel + başlık + açıklama. Genel sayfalar için uygundur.
summary_large_image: Büyük yatay görsel + başlık + açıklama. Blog yazıları ve haber sayfaları için tercih edilir.
app: Mobil uygulama tanıtımı için; App Store / Google Play bağlantısı içerir.
player: Video veya ses içeriği için gömülü oynatıcı gösterir.

En yaygın kullanılan summary_large_image türü için örnek:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@kullaniciadiniz" />
<meta name="twitter:title" content="Sayfa Başlığı" />
<meta name="twitter:description" content="Sayfa açıklaması." />
<meta name="twitter:image" content="https://siteniz.com/twitter-gorsel.webp" />
<meta name="twitter:image:alt" content="Görsel açıklaması" />
<meta name="twitter:dnt" content="on" />

Open Graph ile Twitter Card Arasındaki Fark

Her iki standart arasındaki temel farklar ve hangi platformun hangisini okuduğu:

Özellik	Open Graph	Twitter Card
Geliştiren	Meta (Facebook)	X (Twitter)
Etiket Öneki	`og:` (property)	`twitter:` (name)
Okuyan Platformlar	Facebook, LinkedIn, WhatsApp, Telegram, Slack, Pinterest, Discord	X (Twitter); Open Graph'a geri döner
Görsel Boyutu	Min. 1200×630 px (1.91:1)	Min. 800×418 px (summary_large_image)
Öncelik (X'te)	İkincil (fallback)	Birincil

X, kendi twitter: etiketlerini bulamazsa og: etiketlerine geri döner. Bu nedenle yalnızca Open Graph etiketleri eklemek teknik olarak yeterlidir; ancak X kullanıcılarına özel deneyim için Twitter Card etiketlerini ayrıca eklemek en iyi uygulamadır.

Nuxt.js'te Open Graph ve Twitter Card Nasıl Eklenir?

Nuxt.js projelerinde useHead() composable'ı ile her sayfaya özgü meta etiketleri tanımlanır:

useHead({
  title: 'Sayfa Başlığı - Site Adı',
  meta: [
    // Open Graph
    { property: 'og:title', content: 'Sayfa Başlığı' },
    { property: 'og:description', content: 'Sayfa açıklaması.' },
    { property: 'og:image', content: 'https://siteniz.com/og-gorsel.webp' },
    { property: 'og:image:alt', content: 'Görsel açıklaması' },
    { property: 'og:image:width', content: '908' },
    { property: 'og:image:height', content: '606' },
    { property: 'og:image:type', content: 'image/webp' },
    { property: 'og:url', content: 'https://siteniz.com/sayfa/' },
    { property: 'og:type', content: 'article' },
    { property: 'og:site_name', content: 'Site Adınız' },
    { property: 'og:locale', content: 'tr_TR' },

    // Twitter Card
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@kullaniciadiniz' },
    { name: 'twitter:title', content: 'Sayfa Başlığı' },
    { name: 'twitter:description', content: 'Sayfa açıklaması.' },
    { name: 'twitter:image', content: 'https://siteniz.com/og-gorsel.webp' },
    { name: 'twitter:image:alt', content: 'Görsel açıklaması' },
    { name: 'twitter:dnt', content: 'on' },
  ],
  link: [
    { rel: 'canonical', href: 'https://siteniz.com/sayfa/' }
  ]
})

Open Graph Görseli İçin En İyi Pratikler

OG görseli, paylaşılan içeriğin en çok dikkat çeken unsurudur. Aşağıdaki kurallara uymak tıklama oranını doğrudan etkiler:

Boyut: Minimum 1200×630 piksel, en boy oranı 1.91:1. Daha küçük görseller Facebook'ta küçük kare olarak görünür.
Dosya boyutu: 8 MB altında tutun. WebP formatı hem kalite hem boyut açısından idealdir.
Metin alanı: Facebook, görsel yüzeyinin %20'sinden fazlasını kaplayan metni kısıtlayabilir.
Güvenli alan: Görsel içeriğini ortada tutun; bazı platformlar kenarları kırpar.
Mutlak URL kullanın: Göreli URL'ler (/gorsel.webp) sosyal botlar tarafından okunamaz.
HTTPS zorunlu: HTTP görsel bağlantıları büyük çoğunlukla engellenir.
Her sayfa için özgün görsel: Tüm sayfalarda aynı görseli kullanmak marka etkisini düşürür.

Open Graph ve Twitter Card Nasıl Test Edilir?

Etiketlerinizi yayına almadan önce resmi test araçlarıyla doğrulayın:

Facebook Sharing Debugger:developers.facebook.com/tools/debug — Facebook ve Instagram için önizlemeyi görüntüler, önbelleği temizlemenizi sağlar.
Twitter Card Validator:cards-dev.twitter.com/validator — X platformunda nasıl görüneceğini test eder.
LinkedIn Post Inspector:linkedin.com/post-inspector — LinkedIn önizlemesini kontrol eder ve önbelleği yeniler.
OpenGraph.xyz:opengraph.xyz — Birden fazla platformdaki görünümü tek ekranda karşılaştırır.

Etiketleri güncelledikten sonra platformların önizleme önbelleklerini temizlemek için ilgili debugger araçlarında "Yeniden çek" veya "Önbelleği temizle" işlemi yapmanız gerekir. Aksi takdirde eski önizleme görüntülenmeye devam edebilir.

Yaygın Hatalar ve Çözümleri

Görsel görünmüyor: URL'nin mutlak ve HTTPS olduğundan, görselin herkese açık erişilebilir olduğundan emin olun. robots.txt ile engellenmediğini kontrol edin.
Eski önizleme çıkıyor: Facebook Debugger veya LinkedIn Inspector ile önbelleği temizleyin.
Başlık sayfa title ile aynı çıkıyor: og:title'ı <title> etiketinden bağımsız olarak tanımlayın; sosyal medyaya özel daha çekici bir başlık yazabilirsiniz.
Görsel kırpılıyor: Görselin 1200×630 px olduğundan ve kritik içeriğin merkeze yerleştirildiğinden emin olun.
WhatsApp görsel göstermiyor: Görselin boyutu 300 KB'ın altında veya 300×200 px'den büyük olmalıdır.
og:url ile canonical eşleşmiyor: Her ikisi de aynı kanonik URL'yi göstermeli; farklılık indeksleme sorunlarına yol açar.

Open Graph, SEO ve Meta Tags İlişkisi

Open Graph etiketleri Google'ın arama sıralamasını doğrudan etkilemez; ancak sosyal paylaşım kalitesini artırarak dolaylı SEO faydası sağlar. Daha çekici önizlemeler → daha yüksek tıklama oranı → daha fazla organik trafik ve geri bağlantı. Meta etiketleri ve SEO optimizasyonu hakkında kapsamlı bilgi için Meta Tags Nedir? ve SEO Nedir? sayfalarımızı inceleyebilirsiniz.

Sıkça Sorulan Sorular

Open Graph nedir?

Open Graph, Facebook tarafından geliştirilen ve web sayfalarının sosyal medyada nasıl görüneceğini tanımlayan bir meta etiket protokolüdür. Sayfa başlığı, açıklaması, görseli ve URL'si gibi bilgileri Facebook, LinkedIn, WhatsApp ve Telegram gibi platformlara iletir.

Twitter Card nedir?

Twitter Card, X (Twitter) platformunun paylaşılan bağlantılar için geliştirdiği önizleme meta etiketi standardıdır. summary, summary_large_image, app ve player olmak üzere dört farklı kart türü sunar. X, kendi etiketlerini bulamazsa Open Graph etiketlerine geri döner.

Open Graph görseli için önerilen boyut nedir?

Open Graph görseli için minimum 1200×630 piksel boyutu ve 1.91:1 en boy oranı önerilir. Dosya boyutu 8 MB altında tutulmalı, görsel HTTPS üzerinden herkese açık erişilebilir olmalı ve mutlak URL ile belirtilmelidir.

Open Graph etiketleri SEO'yu etkiler mi?

Open Graph etiketleri Google'ın arama sıralamasını doğrudan etkilemez. Ancak sosyal medyada daha çekici önizlemeler oluşturarak tıklama oranını (CTR) artırır; bu da dolaylı olarak organik trafik ve geri bağlantı kazanımını destekler.

Open Graph etiketlerini nasıl test edebilirim?

Facebook Sharing Debugger (developers.facebook.com/tools/debug), Twitter Card Validator ve LinkedIn Post Inspector ile etiketlerinizin doğru çalışıp çalışmadığını test edebilirsiniz. Etiketleri güncelledikten sonra önbelleklerin temizlenmesi için bu araçlardaki "yenile" özelliğini kullanın.

Sonuç

Open Graph ve Twitter Card etiketleri, web sitenizin sosyal medyadaki görünümünü ve profesyonelliğini doğrudan belirler. Bu etiketler olmadan platformlar kendi inisiyatifleriyle belirlediği içerikleri gösterir; bu da markanızın istediğiniz şekilde temsil edilmemesine yol açar. Doğru yapılandırılmış OG ve Twitter Card etiketleri; tıklama oranlarını artırır, marka güvenilirliğini pekiştirir ve içeriğinizin sosyal medyada hak ettiği ilgiyi görmesine katkı sağlar. Site Tasarım TR olarak teknik SEO ve meta etiket optimizasyonu konularında profesyonel destek sunuyoruz.

Sosyal medya önizlemelerinizi ve teknik SEO yapılandırmanızı optimize etmek için bizimle iletişime geçebilirsiniz.

Diğer İçerikler

Web Araçları

PDF Birleştirici

Birden fazla PDF dosyasını tek bir PDF’de birleştirin. Sıra değiştirme, önizleme ve yüksek kaliteli çıktı desteği. Tarayıcıda, hızlı ve ücretsiz!

PDF & DokümanFavori

Renk Seçici

Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.

Web TasarımAraç

PDF Ayırıcı (Sayfa Bölme)

Tek PDF dosyasını istediğiniz sayfalara ayırın. Belirli sayfaları seçin veya aralık belirleyin, saniyeler içinde yeni PDF’ler oluşturun – tamamen tarayıcıda!

PDF & DokümanYeni

PDF Küçültücü & Sıkıştırıcı

PDF dosyalarınızı kalite kaybı minimumda %50-90 küçültün. Dosya boyutu seçimi, sayfa optimizasyonu ve tamamen tarayıcıda işlem – sunucuya yükleme yok!

PDF & DokümanPopüler

Base64 Encoder & Decoder

Metin ve görselleri Base64 formatına dönüştürün veya Base64 kodunu çözün. API geliştirme ve veri aktarımı için vazgeçilmez.

Kod & GeliştirmeGeliştirici

Alarm Saati & Hatırlatıcı

Tarayıcınızda saniyeler içinde alarm kurun. Sabah uyanma, toplantı hatırlatması, mola zamanı veya "yatma vakti" için ideal. Birden fazla alarm, özelleştirilebilir sesler, bildirim desteği ve kolay erteleme.

Günlük VerimlilikHer Gün Kullan

Emoji Seçici

1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.

Emoji & İçerikÜcretsiz

Resim Format Dönüştürücü

PNG → JPG, JPG → PNG, WEBP → JPG/PNG, HEIC → JPG gibi en popüler formatlar arasında saniyeler içinde dönüşüm yapın. Kalite ayarı, toplu işlem desteği ve tamamen tarayıcıda – indirme olmadan!

MultimedyaPopüler

Ücretsiz Fotoğraf Düzenleyici

Tarayıcıda profesyonel fotoğraf düzenleme. Parlaklık, kontrast, doygunluk, sıcaklık, netlik, vignette ve 10+ hazır filtre ile Lightroom benzeri deneyim. Hiç indirme gerekmez, tamamen ücretsiz!

MultimedyaYeni

QR Kod Oluşturucu

URL, Wi-Fi, vCard, metin gibi verilerinizi saniyeler içinde özelleştirilebilir QR koda çevirin. Logo, renk ve SVG/PNG indirme desteği.

QR & PaylaşımPopüler