Bir bağlantıyı bir mesaja, bir tweet'e, bir LinkedIn gönderisine veya bir Slack kanalına yapıştırdığınızda, platform bir önizleme kartı çeker — büyük bir görsel, bir başlık, bir alıntı. O görsel Open Graph (OG) görselidir ve başlığınızdan daha fazla iş yapar. Hızla kayan bir akışta parmağı durduran şey resimdir. Boş veya bozuk bir önizleme özensiz görünür ve atlanır.
İşte tıklamayı hak eden bir tanesini, doğru boyutta ve gerçekten okunabilir bir metinle nasıl yapacağınız.
Boyut: 1200×630
Standart OG görseli 1200×630 pikseltir, 1,91:1 oranında. Facebook, LinkedIn, Slack, Discord ve çoğu bağlantı önizleme sistemi bunun etrafında kuruludur. Bunu doğru yaparsanız neredeyse her yerde işiniz görülür.
Bağlantının nereye düştüğüne göre birkaç ilgili boyut daha karşınıza çıkar:
| Platform / kullanım | Boyut | Oran |
|---|---|---|
| Open Graph (varsayılan) | 1200×630 | 1.91:1 |
| Twitter/X büyük kart | 1200×628 | ~1.91:1 |
| YouTube küçük resmi | 1280×720 | 16:9 |
| Kare (akışlar/IG) | 1080×1080 | 1:1 |
| Story / dikey | 1080×1920 | 9:16 |
Bir blog yazısı için hepsine ihtiyacınız yok — 1200×630 asıl iş gören boyuttur. Ama aynı zamanda bir video küçük resmi ya da kare bir sosyal gönderi de yapıyorsanız, tek bir görseli sığdırmak için kötü bir şekilde kırpmaktansa doğru şekli üretmek işinize yarar.
Metin kuralları: küçük resim boyutunda okunabilir
OG görsellerini öldüren hata, onları tam ekran izleyeceğiniz bir poster gibi ele almaktır. İzlemeyeceksiniz. Çoğu insan kartı, telefonda, kaydırma esnasında, gerçek boyutunun belki üçte biri kadar görür. Ona göre tasarlayın.
- Büyük metin, az kelime. Kart küçültüldüğünde okunabilen kısa bir başlık — beş ila sekiz kelime. Tam boyutta gözünüzü kısmanız gerekiyorsa, akışta hiç okunmaz.
- Güçlü kontrast. Koyu ya da doygun bir arka plan üzerinde açık renk metin, ya da tersi. Arkasında bir zemin olmadan yoğun bir fotoğrafın üzerine oturan metin kaybolur.
- Önemli şeyleri ortada tutun. Farklı platformlar kenarları biraz farklı kırpar. Hiçbir şey kesilmesin diye metni ve logoları dış marjlardan uzak tutun.
- Görsel başına tek fikir. OG görseli bir yem, bir özet değil. Başlık, belki bir alt başlık, bitti.
Metni öne çıkaran arka planlar
Düz bir degrade güvenilir seçimdir. Metne oturacağı temiz bir zemin verir, modern görünür ve yoğun bir fotoğrafın yaptığı gibi kelimelerle asla çekişmez. Açık renk metinli, koyudan biraz daha koyuya bir degrade neredeyse kusursuzdur.
OG Görseli aracı tam olarak bunun etrafında kurulmuştur: bir boyut hazır ayarı seçin (OG 1200×630, Twitter, YouTube, kare veya story), bir degrade arka plan seçin ve başlığınızla alt başlığınızı ekleyin. Tam bir tasarım uygulaması açmadan, her boyutta net okunan bir paylaşım kartı elde edersiniz.
Görünmesini sağlayan HTML
Görseli yapmak işin yarısı. Platformun onu nerede bulacağını bilmesi gerekir. Bu etiketleri sayfanızın <head> bölümüne ekleyin:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
summary_large_image olarak ayarlanan twitter:card satırı, X'te küçücük bir küçük resim yerine büyük kartı size veren şeydir. Mutlak URL'ler (https:// ile) önemlidir — bir tarayıcı sayfanızı çektiğinde göreli yollar çoğu zaman çözümlenemez.
Yayına aldıktan sonra test edin. URL'nizi bir platformun bağlantı önizleme hata ayıklayıcısına (Facebook'un Sharing Debugger'ı, LinkedIn'in Post Inspector'ı) yapıştırarak görselin yüklendiğini doğrulayın ve önbelleğe alınmış eski sürümü temizleyin. Platformlar önizlemeleri agresif şekilde önbelleğe alır, yani görseli güncellediniz ama hâlâ eskisini görüyorsanız, hata ayıklayıcının yeniden tarama düğmesi çözümdür.
Yapın, yüklemeyin
Her şey tarayıcınızda çalışır — görsel yerel olarak Canvas ile oluşturulur ve asla bir sunucuya yüklenmez. Ücretsizdir, kayıt yok, paylaşım kartınıza vurulmuş filigran yok ve ilk ziyaretten sonra çevrimdışı çalışır. 1200×630'u üretin, meta etiketleri bağlayın, bir kez bir hata ayıklayıcıdan geçirin ve bağlantılarınız hakkını vermeye başlasın.