Bir bağlantıyı WhatsApp, Facebook, LinkedIn, X veya Telegram’da paylaştığınızda, platform sayfayı ziyaret eder ve bir önizleme kartı oluşturur: görsel, başlık, kısa açıklama ve alan adı. Bu kartın neye benzeyeceğini, sayfanın <head> bölümündeki Open Graph (OG) etiketleri belirler. Etiketler yoksa platform sayfadan rastgele bir görsel seçer veya hiç görsel göstermez; bu da tıklanma oranını ciddi biçimde düşürür.
Temel Open Graph etiketleri
Open Graph protokolü Facebook tarafından geliştirildi ve bugün neredeyse tüm platformlar tarafından okunuyor. Her sayfada bulunması gereken etiketler:
<meta property="og:title" content="Kombi Bakımı İstanbul – Aynı Gün Servis">
<meta property="og:description" content="Tüm ilçelerde yetkili teknisyen, 1 yıl işçilik garantisi.">
<meta property="og:image" content="https://www.ornek.com/img/og/kombi-bakimi.jpg">
<meta property="og:url" content="https://www.ornek.com/kombi-bakimi">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Usta Isı">
<meta property="og:locale" content="tr_TR">| Etiket | Açıklama |
|---|---|
og:title |
Kartın başlığı. Title etiketinden farklı, daha sosyal bir dil kullanılabilir |
og:description |
Kısa açıklama; birçok platformda 1–2 satır görünür |
og:image |
Önizleme görseli. Tam (mutlak) adres olmalı, https:// ile başlamalı |
og:url |
Sayfanın kanonik adresi |
og:type |
Genelde website; blog yazıları için article |
og:site_name |
Site veya marka adı |
og:locale |
Dil ve bölge, Türkçe için tr_TR |
Görsel için ek bilgi vermek, platformların görseli daha hızlı ve doğru işlemesine yardım eder:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Kombi bakımı yapan teknisyen">Bu etiketleri elle yazmak yerine meta etiket oluşturucumuzla hem SEO hem de Open Graph etiketlerini birlikte üretebilirsiniz.
X (Twitter) kartları
X, twitter: önekli kendi etiketlerini kullanır, ama eksik olanlar için Open Graph etiketlerine geri döner. Büyük görselli kart için en azından şunu ekleyin:
<meta name="twitter:card" content="summary_large_image">twitter:card değeri summary ise küçük kare görsel, summary_large_image ise geniş görsel gösterilir. Başlık, açıklama ve görsel X’te ayrıca tanımlanmazsa og: etiketlerinden alınır.
Görsel ölçüsü ve tasarımı
| Özellik | Öneri |
|---|---|
| Ölçü | 1200 × 630 piksel (≈ 1,91:1) |
| Format | JPEG veya PNG (WebP desteği platformdan platforma değişebilir; en güvenlisi JPEG/PNG) |
| Dosya boyutu | Mümkün olduğunca küçük, tercihen birkaç yüz KB’ın altında |
| Güvenli alan | Logo ve metni ortada tutun; bazı platformlar kenarları kırpar veya kare gösterir |
| Metin | Telefonda okunacak kadar büyük, en fazla birkaç kelime |
WhatsApp, sohbet içinde görseli küçük ya da kareye yakın kırpılmış gösterebilir. Bu yüzden önemli öğeleri merkezde, kenarlardan uzakta tutmak önemlidir. Görselinizi sıkıştırmak ve doğru ölçüye getirmek için görsel optimizasyonu rehberimize göz atabilirsiniz.
Her sayfa için özel görsel hazırlamak zorunda değilsiniz: önemli sayfalara (ana sayfa, hizmetler, ürünler, blog yazıları) özel görsel, geri kalanlara marka logolu varsayılan bir görsel yeterlidir.
Platform platform önizleme sorunları ve çözümleri
WhatsApp, bağlantıyı gönderen kişinin telefonu üzerinden sayfayı okuyarak önizleme oluşturur. Önizleme çıkmıyorsa:
og:imageadresinin mutlak olduğundan (https://www.ornek.com/...) ve tarayıcıda doğrudan açıldığından emin olun.- Görselin çok büyük olmadığını kontrol edin; birkaç MB’lık görseller önizlemede gösterilmeyebilir.
- Sayfanın yönlendirme zinciri veya giriş zorunluluğu olmadan 200 koduyla açıldığını doğrulayın.
- Güvenlik duvarı, bot koruması veya Cloudflare kuralının bot isteklerini engellemediğinden emin olun.
- WhatsApp önizlemeleri önbellekte tutar. Değişiklikten sonra test için adresin sonuna
?v=2gibi bir parametre ekleyerek paylaşmayı deneyin.
Facebook ve Instagram
Sharing Debugger (developers.facebook.com/tools/debug) aracına adresi girin. Araç, Facebook’un gördüğü etiketleri, uyarıları ve önizlemeyi gösterir. Etiketleri güncelledikten sonra Scrape Again butonuyla önbelleği yenileyin.
Post Inspector (linkedin.com/post-inspector) aracı, LinkedIn’in sayfanızı nasıl gördüğünü gösterir ve önbelleği yeniler. LinkedIn önizlemeleri uzun süre önbellekte tutabilir.
X
X’in eski “Card Validator” aracındaki önizleme özelliği kaldırıldı. Test için bağlantıyı gönderi oluşturma ekranına yapıştırıp önizlemeye bakabilirsiniz (göndermeden).
Tüm platformlar için tek ekranda kontrol etmek isterseniz Open Graph önizleme aracımız sayfanızdaki etiketleri okur, eksikleri listeler ve kartın yaklaşık görünümünü gösterir.
Paylaşım görseli hazırlama adımları
- 1200×630 piksellik bir şablon oluşturun; kenarlardan en az 60–80 piksel içeride güvenli bir alan belirleyin.
- Marka renginizi ve logonuzu ekleyin, sayfanın konusunu birkaç büyük kelimeyle yazın.
- Görseli JPEG olarak dışa aktarın ve sıkıştırın; birkaç yüz KB’ın altına inmesi çoğu zaman mümkündür.
- Dosyayı sabit ve herkese açık bir adrese yükleyin (giriş gerektiren veya geçici bir adres değil).
og:imageetiketine bu tam adresi yazın, ardından önizleme araçlarıyla test edin.
Çok sayıda sayfanız varsa (ör. yüzlerce blog yazısı), başlığı otomatik olarak görsele yazan dinamik OG görseli üretimi de bir seçenektir; birçok modern site altyapısı bunu destekler.
WordPress, Shopify ve diğer altyapılar
- WordPress: Yoast SEO veya Rank Math, her sayfa için “Sosyal” sekmesinde OG başlık, açıklama ve görsel tanımlamanızı sağlar. İki SEO eklentisi aynı anda kuruluysa etiketler iki kez basılır; tek eklenti kullanın.
- Shopify ve İkas gibi e-ticaret altyapıları: Ürün görseli ve SEO başlığı genellikle otomatik olarak OG etiketine dönüştürülür. Ana sayfa için tema ayarlarından paylaşım görseli seçin.
- Tek sayfa uygulamaları (React, Vue): Sosyal ağ tarayıcıları çoğu zaman JavaScript çalıştırmaz. Etiketlerin sunucu tarafında (SSR) veya statik HTML’de üretilmesi gerekir; yalnızca istemci tarafında eklenen etiketler görülmez.
Sık yapılan hatalar
og:imageiçin göreli adres (/img/kapak.jpg) kullanmak.- Tüm sayfalarda aynı başlık ve açıklamayı kullanmak.
- Görseli çok küçük (ör. 200×200) veya çok ağır yüklemek.
http://görsel adresi kullanmak (HTTPS sayfada sorun çıkarabilir).- Etiketleri JavaScript ile sonradan eklemek.
- Değişiklikten sonra önbelleği yenilememek.
Kontrol listesi
- Her önemli sayfada
og:title,og:description,og:image,og:urlvar -
og:imagemutlak HTTPS adresi, 1200×630, hafif dosya -
twitter:card=summary_large_image - Etiketler sayfa kaynağında (HTML) görünüyor
- Facebook Sharing Debugger ve LinkedIn Post Inspector’da test edildi
- WhatsApp’ta gerçek paylaşımla kontrol edildi
Arama sonuçlarındaki başlık ve açıklama için title ve meta description rehberimizi okuyabilirsiniz.