Open Graph ve Sosyal Paylaşım Önizleme Aracı
Open Graph etiketleri nedir? Open Graph etiketleri, bir bağlantı WhatsApp, Facebook, LinkedIn ya da X'te paylaşıldığında görünen kartın başlığını, açıklamasını ve görselini belirleyen sayfa etiketleridir. Etiket yoksa platform sayfanın başlığını ve ilk görselini kullanır; sonuç çoğu zaman yanlış görsel ve kesik başlıktır. Temel set og:title, og:description, 1200×630 og:image, og:url, og:type, og:site_name ve twitter:card etiketleridir.
Open Graph etiketleri nasıl çalışır?
Bir bağlantı WhatsApp, Facebook, LinkedIn veya X'te paylaşıldığında platform sayfayı çeker ve kartı<head> içindeki Open Graph etiketlerinden kurar. Etiket yoksa sayfanın <title>ve ilk görseli kullanılır; sonuç çoğu zaman yanlış görsel ve kesik başlıktır.
og:title · og:description · og:image (1200×630) · og:url · og:type · og:site_name · twitter:card
Örnek etiket seti (ürün sayfası)
<meta property="og:type" content="product"> <meta property="og:title" content="Pamuklu Oversize Tişört, Siyah – Marka"> <meta property="og:description" content="%100 pamuk, 3 renk. 500 TL üzeri ücretsiz kargo."> <meta property="og:image" content="https://magazam.com/img/tisort-og.jpg"> <meta property="og:url" content="https://magazam.com/urun/pamuklu-oversize-tisort"> <meta property="og:site_name" content="Marka"> <meta name="twitter:card" content="summary_large_image">
Platform farkları
| Platform | Görsel | Not |
|---|---|---|
| 1200×630, en az 600×315 | og:site_name üstte büyük harfle alan adı; önbellek için Sharing Debugger | |
| X (Twitter) | summary_large_image: 1200×628; summary: kare | twitter:* yoksa og:* etiketlerine düşer |
| 1200×627 | Açıklamayı göstermez; başlık ve alan adı | |
| Küçük kart: kare önizleme; büyük kart: 300 KB altı görsel | Görsel büyükse kart görselsiz çıkabilir; önbellek uzun |
Sık yapılan hatalar
- Göreli görsel adresi. og:image mutlak (https://…) olmalı; araç göreli adresi çözer ama platformların hepsi çözmez.
- Her sayfada aynı og:image. Ürün sayfasında ürün görseli, kategori sayfasında kategori görseli kullanın; tek logo kartı tıklatmaz.
- Kampanya sonrası eski kart. Görsel adresi değişmeden içerik değişirse platform eski görseli gösterir; dosya adını değiştirin ya da önbelleği temizleyin.
- noindex ile karışıklık. noindex sayfayı aramadan çıkarır ama paylaşımı engellemez; paylaşım kartı yine üretilir.
Sık sorulan sorular
og:image için ideal boyut nedir?
1200×630 piksel (1,91:1 oran) tüm büyük platformlarda tam kart olarak görünür; en az 600×315 olmalı, dosya 5 MB'ı geçmemeli ve https ile sunulmalıdır. Kare görseller kırpılır; WhatsApp küçük kart için 300×300 civarı kare de kabul eder ama tek bir 1200×630 görsel her yerde iş görür.
Etiketler doğru ama Facebook/WhatsApp eski görseli gösteriyor, neden?
Platformlar bağlantıyı önbelleğe alır. Facebook için Paylaşım Hata Ayıklayıcı (Sharing Debugger) ile 'yeniden kazı' yapın; LinkedIn için Post Inspector, X için Card Validator kullanılır. WhatsApp'ta önbellek zamanla dolar; görsel adresini değiştirmek (yeni dosya adı) en hızlı çözümdür.
twitter:card ne olmalı?
Büyük görselli kart için summary_large_image, küçük kare görsel için summary. X, twitter:title ve twitter:image yoksa og: etiketlerine düşer; bu yüzden yalnız twitter:card eklemek çoğu site için yeterlidir.
E-ticaret ürün sayfası için hangi etiketler?
og:type olarak product (ya da website), og:title ürün adı, og:description kısa fayda ve fiyat, og:image ürünün beyaz fonlu 1200×630 görseli, og:url canonical adres. Ürün fiyatı için product:price:amount ve product:price:currency etiketleri Facebook kataloglarında kullanılır.
Araç sayfamı nasıl çekiyor, güvenli mi?
Sunucumuz adresi tek bir GET isteğiyle, tarayıcı gibi çeker; yalnız HTML'in ilk 1,5 MB'ını okur, özel ağ adreslerini reddeder ve sonucu 10 dakika önbelleğe alır. Sayfanız giriş gerektiriyorsa ya da botları engelliyorsa etiketler okunamaz.
Kartta site adı görünmüyor?
og:site_name etiketi eksiktir. Facebook ve LinkedIn kartın üstünde alan adını, varsa site adını gösterir; markanızın görünmesi için og:site_name ekleyin.
Kaynaklar
- The Open Graph protocol (ogp.me): og:title, og:type, og:image ve og:url zorunlu özellikler ( tarihinde kontrol edildi)
- Meta for Developers — Web yöneticileri için paylaşım: og:url, og:title, og:description, og:image ( tarihinde kontrol edildi)
- Meta for Developers — Paylaşım için en iyi uygulamalar: görsel en az 1080 piksel genişlik ( tarihinde kontrol edildi)