Sosyal Paylaşım Önizleme (Open Graph)
Müşteriniz bağlantınızı WhatsApp'tan gönderiyor. Karşı tarafta çıplak bir adres mi görünüyor, yoksa görselli bir kart mı?
Sayfanızdaki mevcut etiketleri okuyup aşağıyı doldurur. Eksikleri tamamlayıp önizlemeyi görebilirsiniz.
Görsel tarayıcınız tarafından doğrudan sizin sunucunuzdan çekilir; bizim sunucumuzdan geçmez.
Görsel yüklenebiliyorsa gerçek ölçüsü otomatik okunur ve etikete o yazılır; aşağıdaki seçim yalnız görsel henüz hazır değilken gerekiyor.
Facebook / LinkedIn
X
X açıklamayı göstermiyor; kartta yalnız görsel, başlık ve alan adı var.
Başlığı yazınSayfanın <head> bölümüne girer.
Giriş
Bir bağlantı paylaşıldığında iki şeyden biri oluyor: ya görselli, başlıklı, açıklamalı bir kart çıkıyor, ya da çıplak bir adres. Aradaki fark tıklanma oranında iki üç kata kadar çıkabiliyor ve bu fark tamamen sayfanın head bölümündeki birkaç satıra bağlı.
O satırların adı Open Graph. Facebook'un 2010'da tanımladığı bu etiketleri bugün WhatsApp, LinkedIn, Telegram, Slack, Discord ve X dahil neredeyse bütün platformlar okuyor. Yani dört beş satırlık tek bir işaretleme, paylaşıldığınız her yerde çalışıyor.
Bu sayfa kartın neden bazen boş çıktığını, hangi ölçünün hangi platformda ne yaptığını, değişikliği yaptığınız halde eski kartın neden görünmeye devam ettiğini ve etiketleri nereye koymanız gerektiğini anlatıyor.
Open Graph nedir?
Bir bağlantı sosyal ağda ya da mesajlaşma uygulamasında paylaşıldığında görünen başlık, açıklama ve görselden oluşan karta paylaşım kartı deniyor. Kartı besleyen etiketlerin standardına Open Graph adı veriliyor; 2010'da Facebook tarafından ortaya konuldu ve bugün neredeyse bütün platformlar okuyor.
Etiketler sayfanın <head> bölümünde duruyor ve dördü zorunlu sayılıyor: og:title, og:description, og:image ve og:url. X (Twitter) ayrıca kendi twitter:card etiketini okuyor; olmadığında Open Graph etiketlerine düşüyor.
Bu araç sayfayı açıp etiketleri okuyor ve kartın farklı platformlarda nasıl görüneceğini gösteriyor. İngilizce kaynaklarda benzerleri Open Graph preview ya da social share preview adıyla anılıyor.
Neden görselin ölçüsü önemli?
Çünkü yanlış ölçüdeki görsel kırpılıyor ve genelde en kötü yerinden kırpılıyor. Önerilen ölçü 1200 × 630 piksel, yani 1,91:1 oranı. Bu orandan sapan görseller platforma göre farklı kırpılıyor ve üzerindeki yazı kesiliyor.
İkinci sık sorun: adresin tam yazılmaması. og:image değerine /gorsel.jpg gibi göreli bir adres yazmak çalışmıyor; platformlar https:// ile başlayan tam adres bekliyor. Kartın boş çıkmasının en yaygın sebebi bu.
Bir de önbellek var. Facebook ve LinkedIn kartı bir kez çektikten sonra saklıyor; etiketi düzelttiğinizde eski kart görünmeye devam ediyor. Platformların kendi hata ayıklama araçlarından önbelleği yenilemek gerekiyor.
Kart neden boş çıkıyor?
Bağlantıyı gönderdiniz ve karşı tarafta yalnız adres göründü. Sebebi neredeyse her zaman şu dört şeyden biri.
Etiketler hiç yok. Sayfada og:title, og:description ve og:image bulunamadığında platform elindekiyle bir şey kurmaya çalışıyor: genelde <title> etiketini alıyor, görsel yerine hiçbir şey koymuyor. Kart teknik olarak çıkıyor ama görselsiz, yani neredeyse görünmez oluyor.
Görsel adresi tam değil. Open Graph göreli yol kabul etmiyor. og:image içeriğine /gorsel.jpg yazmak çalışmıyor; https://siteniz.com/gorsel.jpg yazmak gerekiyor. Aynısı og:url için de geçerli.
Görsel https değil ya da dışarıdan çekilemiyor. Çoğu platform güvensiz kaynaktan görsel almıyor. Bir de az bilinen bir engel var: sunucunuz Cross-Origin-Resource-Policy: same-origin başlığı gönderiyorsa görseliniz kendi sitenizde açılıyor ama başka bir sitenin içinden çekilemiyor. Kart üreticisi de tam olarak bunu yapmaya çalışıyor.
Sayfa robots.txt ile kapatılmış. Facebook ve LinkedIn kendi tarayıcılarıyla (facebookexternalhit, LinkedInBot) sayfayı okumaya geliyor. Bu tarayıcılar engelliyse kart üretilemiyor. robots.txt üreticisiyle kimin engellendiğini görebilirsiniz.
Yukarıdaki araca adresinizi yazdığınızda bu dördü tek tek denetleniyor: etiketler okunuyor, görsel gerçekten indirilmeye çalışılıyor, ölçüsü ve oranı ölçülüyor.
Hangi ölçü, hangi platform?
Tek bir görselle bütün platformları idare edebiliyorsunuz ama ölçüyü doğru seçmek gerekiyor.
1200 × 630 piksel güvenli seçim. Bu 1,91:1 oranına denk geliyor ve Facebook'un belgelediği ölçü bu. LinkedIn, Slack ve Telegram da aynı oranı kullanıyor; X'in summary_large_image kartı da bu orana yakın çalışıyor.
Genişliğin 1200 pikselin altına düşmesi kartın küçük biçime geçmesine sebep olabiliyor: görsel büyük bir bant yerine yanda küçük bir kutu olarak çıkıyor. Aradaki görsel fark, aynı bağlantının fark edilip edilmemesi kadar büyük.
WhatsApp ayrı davranıyor. Sohbette kart üretirken görseli kareye yakın bir alana yerleştiriyor, yani 1200 × 630'un sağı ve solu kırpılıyor. Bu yüzden görselin önemli kısmını, özellikle yazıyı, ortaya toplamak gerekiyor. Kenara yazılan bir logo WhatsApp'ta kaybolabiliyor.
Kare bir görsel (1200 × 1200) WhatsApp'ta iyi duruyor ama Facebook ve X'te üstten alttan kırpılıyor. Trafiğinizin çoğu WhatsApp'tan geliyorsa kare mantıklı; genel kullanım için 1200 × 630 ve ortaya toplanmış bir kompozisyon daha iyi bir denge.
Araç seçtiğiniz ölçüyü dört platformun kendi kart biçiminde ayrı ayrı çiziyor; kırpmanın nereden geçtiğini tahmin etmek yerine görüyorsunuz.
Değiştirdiniz ama eski kart görünüyor
En sık yaşanan ve en çok zaman kaybettiren durum bu. Etiketleri düzelttiniz, sayfayı yayınladınız, bağlantıyı gönderdiniz ve karşınıza yine eski görsel çıktı.
Sebep basit: platformlar kartı her paylaşımda yeniden üretmiyor. Bağlantıyı ilk gördüklerinde okuyup önbelleğe alıyorlar ve bir sonraki paylaşımlarda oradan gösteriyorlar. Sizin değişikliğinizden haberleri yok.
Çözüm platforma göre değişiyor. Facebook ve WhatsApp için Facebook'un Sharing Debugger sayfasına adresi yazıp "Scrape Again" demek yeterli; WhatsApp aynı altyapıyı kullandığı için o da tazeleniyor. LinkedIn için Post Inspector aynı işi yapıyor. X kendi önbelleğini bir süre sonra kendiliğinden yeniliyor, elle tetiklenen bir yolu artık yok.
Pratik sonuç: bağlantıyı ilk kez paylaşmadan önce etiketleri doğru koyun. İlk paylaşım kartı belirliyor ve düzeltmek her platformda ayrı bir işe dönüşüyor.
Bir de yanıltıcı bir durum var: kendi telefonunuzda kart doğru görünürken başkasında eski hâli çıkabiliyor. İkiniz farklı önbelleklere bakıyorsunuz demektir; ölçüyü kendi ekranınızdan değil, yukarıdaki denetleyicilerden alın.
Etiketleri nereye koyacaksınız?
Etiketler sayfanın head bölümüne, <body> başlamadan önce giriyor. Tarayıcılar için sıra önemli değil ama kart üreticileri sayfanın tamamını indirmeden kesebiliyor; bu yüzden etiketleri head içinde mümkün olduğunca yukarıya koymak güvenli.
Dört etiket zorunlu sayılabilir: og:title, og:description, og:image ve og:url. Beşincisi olan og:type çoğu sayfa için website, blog yazıları için article oluyor.
X için ayrıca twitter:card değerini summary_large_image yapmak gerekiyor. Bu satır yoksa X, Open Graph etiketlerinizi okusa bile küçük kart gösteriyor.
Başlık ve açıklamayı arama sonucundaki başlıkla aynı yazmak zorunda değilsiniz, hatta yazmamak daha iyi. Arama sonucundaki başlık bir sorguya cevap veriyor; sosyal kart ise akışta kaydıran birini durdurmaya çalışıyor. İkisi farklı işler. Arama tarafı için meta başlık ve açıklama üreticisine bakın.
WordPress kullanıyorsanız bu etiketleri çoğu SEO eklentisi zaten basıyor; sorun genelde eksik etiket değil, eklentinin varsayılan görseli oluyor. Araç sayfanızda hangi etiketin gerçekten bulunduğunu okuyup gösterdiği için, eklentinin ne yazdığını görmenin en hızlı yolu bu.
WhatsApp'ta önizlemeyi düzeltmenin yolu yok
Türkiye'de bağlantıların büyük kısmı WhatsApp üzerinden paylaşılıyor ve WhatsApp bu konuda diğer platformlardan farklı davranıyor.
Facebook'un Sharing Debugger'ı ve LinkedIn'in Post Inspector'ı var; adresi yapıştırıp önbelleği temizleyebiliyor, kartı yeniden çektirebiliyorsunuz. WhatsApp'ta böyle bir araç yok. Önizleme WhatsApp'ın sunucularında saklanıyor ve dışarıdan yenilenemiyor.
Pratik sonuç şu: etiketleri paylaşmadan önce doğru kurun. Yanlış bir kartla paylaşılan bir bağlantı, etiketi düzeltseniz bile bir süre eski hâliyle görünmeye devam ediyor.
Geçici çözüm, adrese anlamsız bir parametre eklemek (?v=2 gibi): WhatsApp için yeni bir adres olduğu için kartı yeniden çekiyor. Kalıcı bir çözüm değil ama acil durumda işe yarıyor.
Görselin ölçüsü ve dosya boyutu
Tek bir ölçü bütün platformlarda temiz çıkıyor: 1200 × 630 piksel, yani 1,91:1 oranı. Facebook, LinkedIn, WhatsApp, Slack, Discord ve iMessage bu ölçüyü olduğu gibi kullanıyor. X (Twitter) 16:9 oranını tercih ediyor ama 1200 × 630 görseli kayda değer bir kayıp olmadan kırpıyor.
Dosya boyutu da önemli ve çoğu kaynakta atlanıyor. WhatsApp büyük görselleri çekmekte zorlanıyor; 300 KB'ın altında kalan bir dosya belirgin biçimde daha güvenilir yükleniyor.
Pratik ayar: görseli PNG değil JPEG olarak, yüzde 80-85 kalitede kaydedin. 1200 × 630 bir görsel bu ayarla genelde 200 KB'ın altında kalıyor ve paylaşım kartında gözle fark edilir bir kayıp olmuyor.
Görselin üzerine yazı koyacaksanız kenarlardan uzak durun: platformlar kırpma oranlarını zaman zaman değiştiriyor ve kenara yaslanmış yazı ilk kesilen şey oluyor.
Sık sorulanlar
Hreflang, kurulumu bir kez yapılıp sonra unutulan bir şey değil; site her büyüdüğünde bakım isteyen bir eşleştirme. Aşağıdaki dört soru çok dilli siteye geçerken en çok tereddüt edilen noktalar; cevaplarda kuralın yanında ne zaman hiç gerekmediğini de yazdık.
X (Twitter) için ayrı etiket yazmam gerekir mi?
Şart değil. X, twitter: etiketlerini bulamazsa Open Graph etiketlerine düşüyor; og:title, og:description ve og:image doğruysa kart çıkıyor.
Tek fark kartın biçimi. twitter:card yazmazsanız küçük, yan görselli kart çıkıyor; büyük görselli kart için twitter:card değerini summary_large_image yapmanız gerekiyor. Araç bu satırı da üretiyor.
Her sayfaya ayrı görsel gerekir mi?
Gerekmiyor ama işe yarıyor. Tek bir kurumsal görseli bütün sayfalarda kullanmak kartı doldurmaya yeter; ancak paylaşılan her bağlantı aynı görünür.
Kararı paylaşılma ihtimaline göre verin. Hizmet sayfaları, kampanyalar ve yazılar ayrı görseli hak ediyor. İletişim ve hakkımızda gibi nadiren paylaşılan sayfalarda ortak görsel yeterli.
Görsel koymazsam ne olur?
Platform kendi kararını veriyor ve sonuç genelde kötü oluyor: sayfadaki ilk yeterince büyük görseli alıyor, bulamazsa görselsiz ince bir satır gösteriyor.
Sayfadaki ilk görsel çoğu zaman logo, bir simge ya da yazının içindeki alakasız bir kare oluyor. Kartın tıklanma oranını asıl belirleyen şey görsel olduğu için burası boş bırakılacak yer değil.
Başlık ve açıklama kaç karakter olmalı?
Başlıkta 60 karakter civarı güvenli; üstü çoğu platformda kesiliyor. Açıklamada 110 ile 160 arası iyi çalışıyor, çünkü mobil uygulamalar iki satırdan sonrasını göstermiyor.
Bunlar arama sonucundaki başlık ve açıklamadan farklı olabilir ve çoğu zaman olmalı da. Arama sonucunda amaç sorguya cevap vermek; kartta amaç bağlantıyı gören kişiyi merak ettirmek.
Yazdığım adres bir yere kaydediliyor mu?
Hayır. Sayfayı getirmek için bir isteğin sunucumuzdan geçmesi gerekiyor: tarayıcı, başka bir sitenin etiketlerini doğrudan okumanıza izin vermiyor.
Sunucumuz yalnız sayfayı getirip etiketlerini ayıklıyor. Adres kayda geçmiyor, sayfa saklanmıyor. Kötüye kullanımı önlemek için günlük bir istek sınırı var, o kadar.
Aracı beğendiniz mi?
Bu aracı ve altındaki açıklamayı, işini kendi yürüten bir işletme sahibine yetecek açıklıkta yazmaya çalıştık.
Teşekkür ederiz. Bundan sonraki çalışmaları da aynı açıklıkta yazmayı sürdüreceğiz.
Teşekkür ederiz. Eksik bulduğunuz noktayı info (at) kobiseo (nokta) com adresine iletirseniz sayfayı gözden geçirir ve düzeltmeyi geçmişe işleriz.
Kaynaklar ve güncelleme geçmişi
Kaynaklar
- Google Search Central: Sayfanın yerelleştirilmiş sürümlerini bildirme, Google (developers.google.com)Resmî kaynak
- RFC 5646: Diller için etiketler, IETF (rfc-editor.org)Resmî kaynak