Open Graph Nedir?

Paylaşım önizlemesi nasıl oluşur?

WhatsApp'ta, LinkedIn'de ya da Facebook'ta bir bağlantı paylaştığınızda platformun sunucusu sayfayı ziyaret eder, HTML'in <head> bölümündeki etiketleri okur ve bir önizleme kartı oluşturur. Open Graph etiketi yoksa platform başlığı <title> öğesinden, görseli sayfada rastgele bulduğu bir resimden almaya çalışır; sonuç çoğu zaman logo kırpıntısı ya da alakasız bir ikon olur.

Protokolün resmî tanımına göre her sayfada dört temel özellik bulunmalıdır: og:title, og:type, og:image ve og:url. og:description, og:site_name ve og:locale isteğe bağlıdır ama pratikte neredeyse her zaman eklenir.

<meta property="og:title" content="Kurumsal Web Tasarım Süreci">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.ornek.com/blog/web-tasarim-sureci/">
<meta property="og:image" content="https://www.ornek.com/og/web-tasarim-sureci.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Tasarım ekibinin masada wireframe çizimleri">
<meta property="og:description" content="Keşif toplantısından yayına, bir kurumsal sitenin aşamaları.">
<meta property="og:locale" content="tr_TR">
<meta name="twitter:card" content="summary_large_image">

og:url sayfanın kalıcı kimliği gibi çalışır; canonical URL ile aynı olması gerekir. Aksi hâlde aynı içeriğin paylaşımları farklı adresler altında dağılabilir.

Paylaşım görseli: boyut ve önbellek

Open Graph protokolünün kendisi bir görsel boyutu önermez; boyutlar platformdan platforma değişir. Meta'nın geliştirici belgeleri yüksek çözünürlüklü ekranlar için en az 1200×630 piksel, 1,91:1'e yakın bir en-boy oranı ve en fazla 8 MB dosya boyutu önerir; kabul edilen en küçük boyut 200×200 pikseldir. Aynı belge, og:image:width ve og:image:height etiketleri verildiğinde görselin ilk paylaşımda da hemen gösterilebileceğini belirtir.

Uygulamada dikkat edilmesi gerekenler:

• Görsel URL'si mutlak olmalı ve oturum açmadan erişilebilmelidir; robots.txt ile engellenmiş bir klasördeki görsel çoğu platformda görünmez.
• Platformlar önizlemeyi önbelleğe alır. Görseli değiştirdiğinizde aynı dosyanın üzerine yazmak yerine yeni bir URL kullanın ve platformun hata ayıklama aracıyla sayfayı yeniden taratın.
• Kartlar farklı oranlarda kırpılabilir; önemli metni ve logoyu görselin ortasında tutun.
• Protokol, og:image verildiğinde og:image:alt ile görselin açıklamasının da verilmesini ister; bu, ekran okuyucu kullananlar için önizlemeyi anlamlı kılar.

X (Twitter) kartları

X, paylaşım önizlemesi için kendi twitter: önekli etiketlerini kullanır. Kart tipini twitter:card belirler: summary küçük kare görselli, summary_large_image büyük görselli karttır. X'in kart belgelerine göre twitter:title, twitter:description ve twitter:image yoksa sırasıyla og:title, og:description ve og:image kullanılır. Bu yüzden Open Graph etiketleri eksiksizse çoğu sitede yalnızca twitter:card eklemek yeterlidir. Aynı belgeler kart görselinin 5 MB'tan küçük olmasını, JPG, PNG, WEBP veya GIF biçiminde olmasını ister; SVG desteklenmez.

SEO ile ilişkisi

Open Graph bir sosyal paylaşım standardıdır ve sıralama faktörü olarak belgelenmiş değildir. Yine de arama tarafıyla bağı vardır: Google, arama sonuçlarındaki başlık bağlantısını otomatik belirlerken kullandığı kaynaklar arasında og:title içeriğini de sayar. Sayfanın title etiketi ile og:title birbirinden tamamen kopuksa, sonuç sayfasında beklemediğiniz bir başlık görülebilir. Paylaşım açıklaması da meta açıklama ile aynı olmak zorunda değildir, ama aynı sayfayı anlatmalıdır.

En sık hatalar her sayfada aynı Open Graph etiketlerinin kullanılması, staging adresinin og:url içinde kalması ve görselin göreli yol ile verilmesidir. Bir sayfanın hangi Open Graph ve X kartı etiketlerini taşıdığını SEO Analiz Aracı ile görebilirsiniz.