Open Graph görselleri: ölçüler, ipuçları ve kod örnekleri
Open Graph görselleri, sayfanız Facebook, Twitter veya LinkedIn'de paylaşıldığında görünen içeriği kontrol eder. Yanlış veya eksik görsel, ziyaretçiler siteye ulaşmadan tıklama oranlarını düşürür.
Bu rehber, ideal boyutlar, tasarım prensipleri, HTML uygulaması ve test araçlarını kapsar — her platformda sosyal önizlemeleri doğru yapmanız için gereken her şey.
İçindekiler
Open Graph görselleri nedir ve neden önemlidir
Open Graph, Facebook tarafından geliştirilen ve web sayfalarınızın sosyal ağlarda nasıl görüneceğini kontrol etmenizi sağlayan bir protokoldür. og:image meta etiketi, platformlara önizleme küçük resmi olarak hangi görselin kullanılacağını bildirir.
Birisi Facebook, Twitter veya LinkedIn’de bağlantı paylaştığında, platform Open Graph meta verilerini alır ve bir önizleme kartı oluşturur. Bu kart — görseli, başlığı ve açıklamasıyla — genellikle tıklama kararı öncesinde görülen tek şeydir.
İyi hazırlanmış bir Open Graph görseli tıklama oranlarını anlamlı şekilde artırabilir. Eksik veya yanlış boyutlu görsel, bozuk önizleme, kırpılmış küçük resim veya profesyonel olmayan genel bir yer tutucu ile sonuçlanır.
Tıklama oranı
Doğru boyutlu ve yüksek kontrastlı OG görseli olan sayfalar, görseli olmayan veya düşük kaliteli yedek kullananlardan sürekli daha iyi performans gösterir.
Her paylaşımda daha fazla tıklama
Marka tanınırlığı
Her paylaşılan bağlantıda tutarlı görsel kimlik, sayfaya gelmeden önce izleyicinizde tanıdıklık ve güven oluşturur.
Ağlar arasında tutarlı
SEO sinyali
Etkileyici önizlemelerle sağlanan sosyal etkileşim, zamanla organik arama sıralamalarını güçlendiren geri bağlantılar ve trafik sinyalleri oluşturur.
Dolaylı sıralama faydası
Platforma özel görsel gereksinimleri
Her sosyal platformun önerilen boyutları, en boy oranları ve dosya boyutu sınırları vardır. Bunlara uymak kırpma, bozulma ve yedek yer tutucu sorunlarını önler.
| Platform | Önerilen boyut | En boy oranı | Maksimum dosya boyutu | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Evrensel güvenli boyut: 1200 × 630 piksel
1,91:1 oranında 1200 × 630 px görsel, Facebook, LinkedIn, WhatsApp, Slack ve çoğu platformda çalışır. Twitter için 16:9 kırpma kullanılır ancak 1200 × 630 görsel de iyi görünür — önemli içerikleri ortada tutun, kırpılmayı önleyin.
Etkili Open Graph görselleri için tasarım prensipleri
Görsel sosyal akışlarda küçük boyutta görünür. Öncelikle küçük resim için tasarlayın, tam boyut için değil.
En önemli görsel öğeyi — logonuz, güçlü bir başlık veya ana illüstrasyon — görselin ortadaki %80’lik alanında tutun. Platformlar kenarları sıkça kırpar. Kenara yakın öğeler bazı ekranlarda kesilebilir.
Yüksek kontrast
Metin, ön plan öğeleri ve arka plan arasında güçlü kontrast kullanın. Düşük kontrastlı görseller, canlı rakip paylaşımlarının yanında sosyal akışlarda kaybolur.
Her boyutta okunabilir
Tipografi netliği
Görselinizde metin varsa, en az 36px eşdeğeri büyük ve kalın fontlar kullanın, iki satırı geçmeyin. Daha küçük metinler küçük resimde okunmaz.
Küçükken okunabilir tutun
Marka tutarlılığı
Her OG görseline logonuzu veya marka renk paletinizi ekleyin. Her paylaşım, kişi tıklamasa bile marka izlenimi yaratır.
Her paylaşım = marka teması
Doğru görsel formatını seçmek
Fotoğraflar için JPEG, metin, logo veya şeffaflık içeren grafikler için PNG kullanın. WebP desteği artıyor ancak tüm sosyal tarayıcılarda henüz evrensel değil.
| Format | En uygun | Sosyal destek | Tipik dosya boyutu | Öneri |
|---|---|---|---|---|
| JPEG | Fotoğraflar, gradyanlar | Evrensel | 60 – 150 KB | Fotoğraflar için varsayılan |
| PNG | Metin, logolar, şeffaflık | Evrensel | 100 – 300 KB | Grafikler için varsayılan |
| WebP | Her ikisi, daha küçük dosyalar | Twitter, Slack (hepsi değil) | 40 – 120 KB | Yalnızca destekleyici |
OG görseliniz için 100–200 KB hedefleyin. Daha küçük her zaman iyidir, ancak sosyal akışta pikselleşme olmamalı. WhatsApp 300 KB sınırı uygular — WhatsApp paylaşımı önemliyse tüm OG görsellerini bu sınırın altında tutun.
Görsel format tercihlerine dair daha fazla bilgi için bkz: web sitesi görüntü optimizasyon rehberi Mevcut görselleri dönüştürmek için ise: JPG’den WebP’ye rehberi günlük iş akışını kapsar.
HTML uygulaması ve meta etiketler
Open Graph meta etiketlerini HTML’inizin <head> bölümüne yerleştirin. og:image etiketi mutlak URL kullanmalı — göreli yollar sosyal tarayıcılar tarafından desteklenmez.
Gerekli minimum etiketler og:title, og:description, og:image ve og:url’dir. twitter:card etiketi Twitter’ın büyük görsel kart formatını etkinleştirir.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Her zaman og:image:width ve og:image:height belirtin. Bunlar olmadan platformlar önizleme için görseli indirip incelemek zorunda kalır, bu da gösterimi yavaşlatır ve yedek yer tutucu riskini artırır.
Blazor kullanıyorsanız, Blazor SEO meta veri bileşeni tüm Open Graph etiketlerini kültüre duyarlı URL’lerle otomatik olarak yönetir.
Open Graph görsellerini test etme ve hata ayıklama
Sosyal platformlar Open Graph meta verilerini agresif şekilde önbelleğe alır. Etiket veya görsel güncelledikten sonra resmi hata ayıklama araçlarını kullanarak önbelleği temizleyin ve önizlemenin doğru göründüğünden emin olun.
Facebook Paylaşım Hata Ayıklayıcısı
developers.facebook.com/tools/debug adresine URL’nizi girerek güncel meta verileri alın, Facebook’un seçtiği görseli görün ve doğrulama uyarılarını ya da hatalarını giderin.
Önbelleği zorla yenile
Twitter Kart Doğrulayıcısı
cards-dev.twitter.com/validator adresini kullanarak Twitter kartınızın tam görünümünü önizleyin. 'Kartı önizle'ye tıklayarak küçük resim, başlık ve açıklamayı gerçek kart formatında görün.
Yayınlamadan önce önizle
LinkedIn Gönderi Denetleyicisi
linkedin.com/post-inspector adresindeki LinkedIn gönderi denetleyicisi, URL’niz için LinkedIn önbelleğini yeniler ve mevcut meta verilerle gönderi önizlemenizin nasıl görüneceğini gösterir.
LinkedIn önbelleğini yenile
Yaygın hatalar ve çözüm yolları
Çoğu Open Graph görsel sorunu, sık tekrar eden birkaç hataya dayanır. Nelere dikkat edeceğinizi bilmek hata ayıklama süresini kısaltır.
- Göreli URL’ler. Sosyal tarayıcılar göreli yolları çözümleyemez. og:image değeri protokol ve alan adı dahil tam mutlak URL olmalıdır (https://yourdomain.com/path/image.jpg).
- Genişlik ve yükseklik etiketleri eksik. og:image:width ve og:image:height olmadan, platformlar önizleme oluşturmak için görseli indirip incelemek zorunda kalır. Bu fazladan işlemi önlemek için her ikisini de ekleyin.
- Kimlik doğrulama gerektiren görseller. Tarayıcılar, giriş gerektiren veya robots.txt ile engellenen görsellere erişemez. OG görseli herkese açık ve kimlik doğrulama olmadan erişilebilir olmalıdır.
- Yanlış en boy oranı. 1,91:1 oranından önemli ölçüde sapma, görselin kırpılmasına veya dikkat dağıtan siyah bantlarla gösterilmesine yol açar. Yayınlamadan önce hedef oranı mutlaka test edin.
- Eski platform önbelleği. Görsel dosyası adı değiştirilmeden veya sorgu dizisi eklenmeden güncellenirse, platformlar eski önbelleğe alınmış sürümü sunar. Dosya adını değiştirin veya platform hata ayıklayıcısını kullanarak önbelleği zorla yenileyin.
Open Graph görsel oluşturmayı otomatikleştirme
Küçük web siteleri ve bloglar için sayfa başına tek statik OG görsel en basit ve güvenilir yöntemdir. Daha büyük yayınlar veya her sayfanın benzersiz sosyal önizlemeye ihtiyaç duyduğu uygulamalarda dinamik oluşturma pratik olur.
Dinamik OG görsel oluşturma, sayfa başlığı, açıklaması veya diğer içeriklere göre istek anında veya derleme zamanında benzersiz bir görsel yaratır. Sonuç, manuel görsel oluşturma olmadan her sayfa için benzersiz ve markaya uygun önizlemedir.
Ne zaman otomatikleştirmeli
Her sayfanın benzersiz görsele ihtiyaç duyduğu, içeriklerin sık değiştiği veya manuel görsel oluşturmanın yayın hacminize yetmediği durumlarda otomatikleştirin.
Yüksek hacimli veya dinamik içerik
Statik görseller ne zaman kullanılmalı
Çoğu sayfa için — açılış sayfaları, rehberler ve sürekli güncel makaleler — özenle hazırlanmış statik görsel, oluşturulandan daha kaliteli ve marka tutarlılığı sağlar.
Öncelik kalite
Dinamik oluşturma için popüler araçlar arasında Cloudinary (URL parametreleriyle dönüşümler), Vercel OG (React/HTML’i uçta görsele dönüştürür) ve Puppeteer veya Playwright tabanlı ekran görüntüsü iş akışları bulunur.