Link paylaşınca önizleme çıkmıyorsa sebep genellikle dört şeyden biridir: sayfada Open Graph etiketleri (og:title, og:description, og:image, og:url) yoktur, og:image göreli URL veya erişilemeyen bir görseldir, platform eski önizlemeyi önbellekte tutuyordur ya da etiketler yalnızca JavaScript ile ekleniyordur. Önizleme botları JavaScript çalıştırmaz; etiketlerin sunucudan gelen HTML'de olması gerekir.
Open Graph etiketleri nedir, hangileri gerekli?
Open Graph etiketleri, sayfanın head bölümünde property özniteliğiyle tanımlanan ve bir link paylaşıldığında WhatsApp, LinkedIn, Facebook, Slack ve benzeri platformların önizleme kartında hangi başlık, açıklama ve görselin gösterileceğini belirleyen meta etiketleridir. Etiketler Facebook'un geliştirdiği protokolden gelir ve bugün neredeyse tüm platformlar tarafından okunur.
- —og:title: Kartta görünen başlık; sayfa başlığından kısa ve marka ekinden bağımsız olabilir.
- —og:description: Bir iki cümlelik açıklama; bazı platformlar kısaltır veya göstermez.
- —og:image: Önizleme görselinin mutlak https URL'si. Kartın en belirleyici öğesi.
- —og:url: Sayfanın canonical URL'si; paylaşım sayaçları ve önbellek bu adrese bağlanır.
- —og:type: Genellikle "website", blog yazılarında "article".
- —Ek olarak faydalı: og:site_name, og:locale (tr_TR, en_US), og:image:width, og:image:height ve og:image:alt.
İlgili hizmetler
Twitter Card etiketleri Open Graph'tan farklı mı?
Twitter Card etiketleri, X (eski adıyla Twitter) için tanımlanan ve name özniteliğiyle yazılan meta etiketleridir. X, twitter:title, twitter:description ve twitter:image bulamazsa Open Graph karşılıklarını kullanır; bu yüzden pratikte zorunlu olan tek X etiketi, büyük görselli kart için twitter:card değerinin summary_large_image olarak ayarlanmasıdır.
twitter:card yoksa X genellikle küçük kare görselli özet kart gösterir. twitter:site ile markanın X hesabını belirtmek isteğe bağlıdır. 404 Ajans'ın sitesinde her sayfa için Open Graph ve Twitter etiketleri aynı veri nesnesinden üretilir; böylece iki set arasında başlık veya görsel tutarsızlığı oluşmaz.
Çok dilli sitelerde Open Graph nasıl kurulur?
Çok dilli sitelerde her dil sürümü kendi Open Graph etiketlerini taşımalıdır: og:title ve og:description o dilde yazılır, og:url o dil sürümünün canonical URL'sini gösterir, og:locale ise tr_TR veya en_US gibi dil-bölge kodunu içerir. İsteğe bağlı og:locale:alternate etiketi diğer dil sürümlerini belirtir.
Sık yapılan hata, İngilizce sayfada da Türkçe başlık ve açıklamanın gösterilmesidir; bu genellikle etiketlerin tek bir sabit şablondan gelmesinden kaynaklanır. Metin içeren önizleme görsellerinde her dil için ayrı görsel üretmek de kartın tutarlı olmasını sağlar.
Önizleme görseli hangi boyutta olmalı?
Önizleme görseli için en güvenli boyut 1200x630 pikseldir (yaklaşık 1.91:1 oran). Bu boyut Facebook, LinkedIn, X ve WhatsApp'ta büyük kart olarak düzgün görünür. Görsel mutlak https URL'si ile verilmeli, JPEG veya PNG formatında olmalı ve önemli metin ile logo kenarlardan uzak, ortada tutulmalıdır; bazı platformlar görseli kırpar.
- —Boyut: 1200x630 piksel; 600 piksel genişliğin altındaki görseller birçok platformda küçük kart olarak gösterilir.
- —Format: JPEG veya PNG en geniş uyumluluğu sağlar; WebP'yi bazı önizleme botları desteklemeyebilir.
- —Dosya boyutu: Küçük tutun; birkaç yüz KB altındaki görseller, özellikle WhatsApp'ta, daha güvenilir yüklenir.
- —Erişim: Görsel oturum, çerez veya bot engeli olmadan herkese açık olmalı; CDN'in bot koruması önizleme botlarını engellememeli.
- —Sayfaya özel görsel: Tüm sayfalarda aynı logo yerine, en azından ana hizmet ve blog sayfaları için başlığı içeren özel kartlar dönüşümü artırır.
Devamı için
SPA sitelerde önizleme neden çıkmıyor?
SPA (tek sayfa uygulaması) sitelerde önizleme çıkmamasının nedeni, WhatsApp, LinkedIn, Facebook ve X'in önizleme botlarının JavaScript çalıştırmamasıdır. Bu botlar sunucudan gelen ham HTML'i okur. İstemci tarafında render edilen bir React veya Vue sitesinde ham HTML her URL için aynı boş şablondur; sayfaya özel etiketler bot için hiç var olmaz.
Sonuç olarak her paylaşım ana sayfanın başlığını ve görselini gösterir ya da hiçbir şey göstermez. Çözüm, etiketleri sunucuda üretmektir: SSR, statik site üretimi (SSG) veya build sırasında prerender. 404 Ajans'ın sitesi React 18 ve Vite ile yazılmıştır ve özel bir prerender adımıyla her rota için başlık, açıklama, canonical ve Open Graph etiketlerini içeren statik HTML üretir; bu yüzden her blog yazısı kendi kartıyla paylaşılır.
Paylaşım önbelleği nasıl temizlenir?
Paylaşım önbelleği, platformların bir URL'nin önizlemesini ilk taramadan sonra bir süre saklamasıdır; etiketleri düzeltseniz bile eski kart görünmeye devam edebilir. Facebook ve LinkedIn için resmi hata ayıklama araçları önbelleği yeniler; WhatsApp ve X için resmi bir yenileme aracı yoktur.
- —Facebook Sharing Debugger: URL'yi girip "Scrape Again" ile yeniden taratın; eksik veya hatalı etiketleri de listeler.
- —LinkedIn Post Inspector: URL'yi incelemek önizlemeyi yeniler ve LinkedIn'in hangi etiketleri okuduğunu gösterir.
- —X: Kart doğrulama aracının önizleme özelliği kaldırıldı; gönderi oluşturma ekranındaki önizleme ile kontrol edin, önbellek zamanla yenilenir.
- —WhatsApp: Resmi araç yok; test için URL'ye zararsız bir sorgu parametresi (örneğin ?v=2) ekleyerek yeni bir önizleme alınabilir.
- —Görseli değiştirdiyseniz dosya adını da değiştirin; aynı adla yüklenen görsel CDN ve platform önbelleklerinde eski haliyle kalabilir.
Bölgenizde destek
Önizleme sorunları için kontrol listesi
Önizleme sorunlarını gidermek için kontrol listesi, en sık rastlanan nedenleri sırayla eler. İlk adım her zaman sayfanın kaynak kodunu (DOM'u değil, sunucudan gelen HTML'i) görüntülemektir; etiketler orada yoksa sorun platformda değil, render yöntemindedir.
- —Sunucudan gelen HTML'de og:title, og:description, og:image ve og:url var mı?
- —og:image ve og:url mutlak https URL mi, göreli yol mu?
- —Görsel tarayıcıda gizli pencerede açılıyor mu, 200 dönüyor mu?
- —Görsel 1200x630 civarında ve makul dosya boyutunda mı?
- —robots.txt veya CDN bot koruması facebookexternalhit, LinkedInBot, Twitterbot gibi botları engelliyor mu?
- —Sayfada aynı etiketten birden fazla var mı (ör. şablon ve eklenti ikisi de ekliyor)?
- —Düzeltmeden sonra Facebook Sharing Debugger ve LinkedIn Post Inspector ile önbellek yenilendi mi?