Open Graph Etiketleri: Link Önizlemelerinizi Nasıl Kontrol Edersiniz?

Kısaca: Open Graph etiketleri, linkiniz paylaşıldığında sosyal ağların ve mesajlaşma uygulamalarının ne göstereceğini belirler. Her sayfada og:title, og:description, og:image ve og:url etiketleri, X için de twitter:card bulunmalıdır. Görsel için mutllak bir HTTPS URL kullanın; boyutu yaklaşık 1200 × 630 px, dosya boyutu 5 MB altında olsun ve önemli kısım ortada yer alsın. Etiketleri sunucunuzun gönderdiği HTML'de oluşturun; etiketleri değiştirdikten sonra her platformun önbellekteki önizlemesini yenileyin, çünkü eski kartlar kolay kolay gitmez.

Link önizlemesi çoğu zaman sitenizin ilk izlenimidir. Bir iş arkadaşınız fiyat sayfanızı Slack'e yapıştırır, bir müşteri ürününüzü WhatsApp'ta paylaşır, bir iş ortağı makalenizi LinkedIn'de yayınlar. Sayfada Open Graph etiketleri yoksa her uygulama kendi tahminini yürütür: çerez bannerının metni açıklama olur, görsel küçük bir logo olur ya da hiç çıkmaz, başlık da sayfanın <title> değeri neyse o olur.

Bu rehber, her etiketin ne işe yaradığını, hangi platformun neyi okuduğunu, her yerde sorunsuz görünen görsel boyutlarını, önizlemelerin neden güncellenmediğini ve ücretsiz Open Graph checker aracımızın eksik etiketleri nasıl bulduğunu, her biri için çözümle birlikte anlatıyor.

Open Graph nedir?

ogp.me sitesine göre "Open Graph protokolü aslen Facebook'ta oluşturuldu." Bu protokol, bir web sayfasını başlık, tür, görsel ve URL içeren, diğer servislerin gösterebileceği bir "zengin nesneye" dönüştürür. Protokolü Facebook geliştirdi, ancak LinkedIn, Slack ve çoğu mesajlaşma uygulaması aynı etiketleri okur; X ise kendi etiketlerinin yedeği olarak bunları kullanır.

Etiketler, <head> içinde property özniteliğiyle yazılan sıradan meta öğeleridir:

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Önemli olan etiketler

Protokol dört zorunlu özellik tanımlar: başlık, tür, görsel ve kanonik URL. Pratikte birkaç isteğe bağlı etiket de önem taşır.

Spesifikasyondan bilmeye değer iki ayrıntı var. Bir etiket iki kez geçerse "çakışmalarda yukarıdan aşağıya ilk etiket tercih edilir"; yani temanızın etiketi eklentinizin etiketinin üstündeyse o kazanır. Ayrıca og:image:width gibi yapılandırılmış özellikler, hemen üstlerindeki og:image etiketine aittir.

Kim neyi okuyor?

Her platform kendi kurallarını belgelendirir. Özetle:

• Facebook ve Meta uygulamaları. Meta'nın webmaster rehberi og:url, og:title, og:description, og:image ve og:type etiketlerini sıralar. Görseller URL'ye göre önbelleğe alınır. Sharing Debugger, tarayıcının neyi çektiğini gösterir ve yeniden tarama başlatır.
• LinkedIn. Yardım sayfası, "bulunması gereken" dört etiketi sayar: og:title, og:image, og:description ve og:url. Görseller en az 1200 × 627 px, 1,91:1 oranında ve en fazla 5 MB olmalıdır. Post Inspector, LinkedIn'in bir URL'yi nasıl gördüğünü gösterir ve kopyasını yeniler.
• X. X, twitter: etiketlerini kullanır; eksik olduklarında Open Graph karşılıklarına döner, bu yüzden og:title, og:description ve og:image genellikle yeterlidir. twitter:card düzeni belirler; summary_large_image geniş bir görsel gösterir. X, bu kart için 2:1 oran, en az 300 × 157 px, 5 MB altı dosya ve JPG, PNG, WebP veya GIF (SVG değil) belirtir.
• Slack. Bir alan adını hiçbir uygulama yönetmiyorsa Slack "URL'yi tarar, yaygın OpenGraph ve X (eski adıyla Twitter) Card meta verilerini arar" (Slack dokümanları).
• Google. Sosyal ağ değildir, ancak Google og:title etiketini başlık linkleri için kaynaklar arasında sayar ve sonuçlarınızın üstünde görünen site adını seçerken og:site_name değerini dikkate alır.

og:image seçimi

Önizlemenin özenli mi yoksa bozuk mu göründüğünü görsel belirler. Platform gereksinimleri biraz farklıdır; bu yüzden hepsini karşılayan bir görsel hedefleyin:

Önemli sayfaların her biri için özel bir görsel (ürün fotoğrafı, makale illüstrasyonu), geri kalanı için de iyi tasarlanmış bir varsayılan görsel kullanın. Beyaz kare üzerinde logo en zayıf seçenektir: çoğu uygulama onu küçük gösterir veya kötü kırpar.

Önizlemeler neden güncellenmez?

Platformlar, bir URL ilk paylaşıldığında oluşturdukları önizlemeyi saklar. Meta, "Görseller URL'ye göre önbelleğe alınır ve URL değişmedikçe güncellenmez" der; bu yüzden share.jpg dosyasını aynı adla yeni bir dosyayla değiştirmek hiçbir şeyi değiştirmeyebilir. Güvenilir sıra şöyledir:

1. Yeni görseli yeni bir dosya adıyla yükleyin (veya URL'sine bir sürüm parametresi ekleyin).
2. Sayfadaki etiketleri güncelleyin ve yayına alın.
3. URL'yi Meta'nın Sharing Debugger'ından ve LinkedIn'in Post Inspector'ından geçirerek yeniden çekilmesini sağlayın.
4. Linki yeniden paylaşın. Önceden yayınlanmış gönderiler genellikle eski kartı korur.

Farklı sayfa türleri için etiketler

Temel etiketler her yerde aynıdır, ancak bazı sayfa türleri daha fazlasından fayda görür:

• Makaleler ve blog yazıları. og:type olarak article kullanın. Protokol bu tür için article:published_time, article:modified_time, article:author ve article:section gibi ek özellikler tanımlar.
• Ürün sayfaları. Ana ürün fotoğrafını og:image olarak kullanın ve og:title içine mağaza adını değil ürün adını yazın. Fiyat ve stok durumu, schema markup rehberimizde anlattığımız Product yapılandırılmış verisine aittir.
• Ana sayfa ve kategori sayfaları. Daha az paylaşılır ama daha çok görülür. Adınızı ve ne yaptığınızı anlatan kısa bir satır içeren tasarlanmış bir varsayılan görsel, rastgele bir fotoğraftan daha iyi çalışır.
• Paylaşılmaması gereken sayfalar, örneğin ödeme veya hesap sayfaları. Özel etiketlere gerek yok; sadece varsayılan görselin özel bir şeye işaret etmediğinden emin olun.

Tarayıcının gördüğünü nasıl görürsünüz?

Platformu suçlamadan önce aldığı HTML'e bakın. Sayfayı "Sayfa kaynağını görüntüle" ile açın (betikler çalıştıktan sonraki sayfayı gösteren DevTools öğe denetçisiyle değil) ve og: arayın. Meta'nın rehberi tarayıcısının user agent değerini de verir, facebookexternalhit/1.1; böylece sayfayı Facebook gibi terminalden çekebilirsiniz:

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

Etiketler tarayıcınızda görünüyor ama bu çıktıda yoksa, JavaScript ile ekleniyorlardır ya da sunucunuz veya güvenlik duvarınız botlara farklı yanıt veriyordur.

Searvia Open Graph checker nasıl çalışır?

Ücretsiz Open Graph checker, web sitesi SEO checker aracımızla aynı motoru kullanır ve üç kontrolü öne alır: sosyal paylaşım etiketleri, title etiketi ve meta description. Bir alan adı veya sayfa adresi girdiğinizde şunları yapar:

1. O sayfayı yönlendirmeleri takip ederek çeker. Yalnızca alan adı girerseniz ana sayfa kontrol edilir; bu yüzden önizlemesini görmek istediğiniz makale veya ürün sayfasının adresini yapıştırın.
2. Çoğu link önizleme tarayıcısının gördüğü gibi, JavaScript çalıştırmadan sunucunuzun döndürdüğü HTML'i okur.
3. Dört etiketi arar ve her birinin ilk dolu değerini kaydeder: og:title, og:description, og:image ve twitter:card.

Sonuç, her etiket için bir onay veya çarpı işareti ve tam değeri gösteren bir tablodur:

Kontrol hiçbir zaman başarısızlık göstermez ve genel skorda düşük öncelikli tutulur, çünkü eksik sosyal etiketler sayfanın bulunmasını engellemez. Ancak her paylaşımı daha kötü gösterir; bu aracın onları ilk sırada göstermesinin nedeni de budur.

Title ve description kontrolleri (sırasıyla 30–60 ve 70–160 karakterde geçer) hemen altında yer alır, çünkü Open Graph etiketleri eksik olduğunda birçok uygulama bunlara döner. Rapor ayrıca, siz belirlediyseniz site adı için og:site_name kullanan bir Google sonuç önizlemesi içerir.

Aracın yapmadıkları: görseli ölçmek için indirmez, og:url, og:type veya og:image:alt değerlerini kontrol etmez ve sayfayı her platformun tarayıcısı gibi çekmez. Son kontrol için platform debugger'larını kullanın.

Sonuçlar nasıl okunur?

• Dördü de işaretli: temeller yerinde. Değerlere tıklayıp mantıklı olup olmadıklarına bakın: gerçek bir başlık, çerez bildirimi olmayan bir açıklama, https:// ile başlayan bir görsel URL'si.
• og:image eksik: önce bunu düzeltin. İnsanların önizlemede fark ettiği kısım budur.
• Yalnızca twitter:card eksik: X yine Open Graph etiketlerinizi okur ama küçük bir özet kartı gösterebilir. Büyük görsel için etiketi ekleyin.
• Aşağıdaki title ve description uyarıları: bunlar Google'ı ve onlara başvuran uygulamaları etkiler.

Eksik etiketler nasıl düzeltilir?

og:title eksik

Arama motoru için değil, akışta gezinen insanlar için yazılmış bir başlık ekleyin. Marka eki olmadan <title> ile aynı olabilir:

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:description eksik

Somut bir ayrıntı içeren bir veya iki cümle yazın. Meta description'ınızı yeniden kullanmak sorun değildir:

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:image eksik

1. Ana konusu ortada olan 1200 × 630 px bir görsel (JPG, PNG veya WebP) hazırlayın.
2. Herkese açık bir yere yükleyin ve tam HTTPS URL'sini kopyalayın.
3. Görsel etiketini boyutlar ve alt metinle birlikte ekleyin:

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Görsel URL'sini gizli pencerede açarak giriş gerektirmeden yüklendiğini doğrulayın.

twitter:card eksik

<meta name="twitter:card" content="summary_large_image">

name özniteliğine dikkat edin: Twitter etiketleri geleneksel olarak name, Open Graph etiketleri property kullanır.

Platform ayarları

Her değişiklikten sonra checker'ı yeniden çalıştırın, ardından platform debugger'larını kullanın.

Sık yapılan hatalar

• Göreli görsel URL'leri. /images/share.jpg tarayıcıda çalışır ama tam URL bekleyen tarayıcılarda çalışmaz. Her zaman https://… kullanın.
• JavaScript ile eklenen etiketler. Etiketleri tarayıcıda ayarlayan tek sayfalı uygulamalar çoğu zaman boş önizleme gösterir. Etiketleri sunucuda veya derleme sırasında oluşturun. Google da meta etiketlerini değiştiren JavaScript'ten kaçınmayı önerir.
• Görsel engellenmiş. Giriş duvarı, bot koruma kuralı veya robots.txt satırı tarayıcının görseli çekmesini engelleyebilir. LinkedIn, sitenin "görseli çekmemizi engelliyor olabileceğini" belirtir.
• Tüm sayfalar için tek görsel. İş görür, ancak kendi görseliyle paylaşılan bir ürün veya makale daha çok ilgi görür.
• Yinelenen etiketler. Bir tema ve bir eklentinin ikisi de og:image yazdırıyor: ilk gelen kazanır ve bu yanlış olabilir. Kaynağı görüntüleyip og:image arayın.
• Görseli aynı URL'de değiştirmek. Önbellekler eskisini tutar. Yeni bir dosya adı kullanın.
• SVG veya devasa dosyalar. X desteklemez ve herkes için yavaştır.

Örnek senaryo (varsayımsal)

Aşağıdaki örnek varsayımsaldır, gerçek veri değildir. Uydurma bir proje yönetim uygulaması olan Fernway, sitesine giden linklerin Slack'te yalnızca gri bir kutu ve "We use cookies to improve your experience." metniyle göründüğünü fark eder.

Open Graph checker, og:title ve og:description etiketlerinin var, og:image ve twitter:card etiketlerinin eksik olduğunu gösterir. Açıklama değerinin çerez banner metni olduğu ortaya çıkar: bir eklenti og:description değerini HTML'deki ilk paragraftan üretiyor ve banner en başta geliyor.

Çözümler: sayfa şablonunda elle yazılmış bir og:description, ürünün pano görünümünü ortalanmış şekilde gösteren 1200 × 630 px bir görsel, og:image:width, og:image:height ve og:image:alt etiketleri ve summary_large_image olarak ayarlanmış twitter:card. Checker'ın ikinci çalıştırması geçer. Ekip ardından URL'yi Sharing Debugger ve Post Inspector'dan geçirir ve linki Slack'te yeniden paylaşır; yeni kart orada görünür.

15 dakikalık kontrol listesi

1. Alan adınızda Open Graph checker aracını çalıştırın.
2. og:title, og:description, og:image ve twitter:card içinden eksik olanları ekleyin.
3. Şablondayken og:url, og:image:width, og:image:height ve og:image:alt etiketlerini de ekleyin.
4. Görselin 1200 × 630 px, 5 MB altı, herkese açık ve HTTPS üzerinden sunulduğundan emin olun.
5. Etiketleri istemci tarafı JavaScript'te değil, sunucu HTML'inde oluşturun.
6. Platform debugger'larında önbellekteki önizlemeleri yenileyin, sonra yeniden paylaşın.

Searvia önizlemelerinizi ve listelemelerinizi nasıl formda tutar?

Ücretsiz Open Graph checker, tek bir sayfayı (ana sayfanızı veya girdiğiniz herhangi bir adresi) kayıt gerektirmeden yaklaşık 20 saniyede kontrol eder; aynı rapor, web sitesi denetimimizin diğer 37 kontrolünü de kapsar. Önizlemeler sayfalarınızın görünümünün yalnızca bir parçasıdır; title, description ve canonical konuları meta etiketleri rehberimizde anlatılıyor, meta tag checker ise Google önizlemenizi gösterir.

Tüm site için ücretsiz bir Searvia hesabı, her sayfayı tarayan ve eksik veya yinelenen title ile description'ları işaretleyen haftalık bir site audit ekler; böylece uygulamaların başvurduğu metin doğru kalır. Zayıf bir title veya description için audit içindeki Write with AI hazır seçenekler önerir (1 kredi) ve audit her hafta yeniden çalışır; böylece title veya description'larınızı bozan bir tema ya da eklenti güncellemesi bir sonraki raporda ortaya çıkar.