Open Graph Görsel Boyutu: Her Platform İçin Tek Bir Dosya

PNG veya JPEG formatında, yaklaşık 1 MB'ın altında, önemli içeriğin ortadaki 1080x600 alanın içinde durduğu 1200x630 piksellik tek bir görsel. Bu dosya Facebook, LinkedIn, X, Slack, Discord, WhatsApp ve iMessage üzerinde doğru şekilde görüntülenir; bu da neredeyse her site için Open Graph görsel boyutu sorusunun tüm cevabıdır.

Boyutlar kolay kısımdır. Genelde bozulan da onlar değildir. Bozulan şey; bir platformun kırptığı bir kenara fazla yakın duran metin, bir tarayıcının aylar önce eskisini önbelleğe alması yüzünden hiç güncellenmeyen bir görsel, ya da dosyanın yavaş bir kaynakta 4 MB olması yüzünden hiç görselsiz görüntülenen bir karttır. OG görsel boyutu sorusu aslında üç sorudur, ve bunlardan sadece biri piksellerle ilgilidir. Bu rehber teknik özellikleri, güvenli alanı, insanların etiketlerinin yanlış olduğunu düşünmesine neden olan önbellekleme davranışını ve paylaşılan şeyin bir kısa bağlantı olduğu durumda önizlemelerin nasıl çözümlendiğini kapsar. Önizlemeniz kötü kırpılmak yerine tamamen eksikse, bağlantı önizlemesi görünmüyor teşhis rehberidir.

Boyut ve Bu Boyutun Nedeni

1.91:1 oranı Facebook'un bağlantı kartından gelir ve kalıcı hale geldi çünkü herkes kendi düzenini icat etmek yerine uyumlu bir düzeni benimsedi. Open Graph protokolünün kendisi pikseller hakkında hiçbir şey söylemez; og:image'ı bir URL olarak tanımlar ve görüntülemeyi tüketiciye bırakır, bu yüzden tam olarak bu nedenle tek bir uygun boyut etrafında fiili bir standart oluşmuştur.

Facebook'un görsel paylaşımıyla ilgili kendi kılavuzu minimumu 200x200 olarak belirler ve yüksek çözünürlüklü ekranlar için daha büyük dosyayı önerir; X ise kart biçimlendirmesini ayrı olarak belgeler, ki platforma özgü bir dosya yerine platforma özgü bir etikete ihtiyaç duyduğunuz tek yer burasıdır.

Kimsenin Bahsetmediği Güvenli Alan

Bir kart nadiren tasarladığınız oranda gösterilir. Sohbet uygulamaları küçük resim için kareye doğru kırpar, bazı akışlar dar görünüm alanlarında kenarları keser ve yuvarlatılmış bir köşe, köşedeki bir logonun son birkaç pikselini yer.

Hayatta kalması gereken her şeyi ortadaki 1080x600 alanın içinde, ortalanmış olarak tutun ve dış bandı kaybetmeyi göze alabileceğiniz bir süsleme olarak ele alın. Pratikte bu, başlığın kenara dayanmak yerine ortaya sola yakın oturması, logonun köşede değil kenar boşluğunun içinde yaşaması ve ince bir kenarlığın olmaması anlamına gelir; çünkü kenarlık, kırpıldığı anda bozuk görünen tek tasarım öğesidir.

Kontrast da göründüğünden daha fazla önemlidir. Kartlar bir istemcide beyaz üzerinde, diğerinde neredeyse siyah üzerinde görüntülenir; bu yüzden ayrışmak için çevresindeki arka plana güvenen bir görsel, bunların yarısında kenarlarını kaybeder.

Görselin Etrafındaki Etiketler

İşi dört etiket yapar. İkisi insanların atladığı etiketlerdir.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

URL, protokol ve ana bilgisayar dahil mutlak olmalıdır; çünkü tarayıcı etiketi, göreli bir yolu çözecek hiçbir sayfa bağlamı olmadan okur. Genişlik ve yükseklik, dosya gelmeden önce platformun doğru alanı ayırmasını sağlar; bu da anında beliren bir kart ile yeniden akan bir kart arasındaki farktır. Ve og:image:alt, hiçbir maliyeti olmayan ve neredeyse her yerde eksik olan erişilebilirlik etiketidir.

Yeni Görseliniz Neden Görünmüyor

Destek talebi yaratan konu budur. Görseli düzelttiniz, yeni dosyayı kendi URL'sinde görebiliyorsunuz, ama kart hala geçen çeyreğin tasarımını gösteriyor.

Sosyal tarayıcılar agresif bir şekilde önbelleğe alır ve bu konuda hiç incelikli değildirler. Bir URL bir kez tarandıktan sonra, sonraki paylaşımlarda görüntülenen şey saklanan sürümdür, bazen haftalarca; ve HTML'inizi düzenlemenizin hiçbir yanı onlara tekrar bakmalarını söylemez. Deneyeceğim sırayla üç çıkış yolu var:

• Platformun kendi aracıyla yeniden taramayı zorlayın: Facebook'un Sharing Debugger'ı ve LinkedIn'in Post Inspector'ı ikisi de talep üzerine yeniden getirir.
• Görseli yeni bir dosya adıyla yayınlayın; bu farklı bir URL'dir ve bu yüzden hiç önbellek kaydı yoktur. Güvenilir olan budur.
• Paylaşılan URL'nin kendisini değiştirin; bu, paylaştığınız şey kalıcı bir sayfa adresi değil de kontrol ettiğiniz bir kısa bağlantı olduğunda son derece kolaydır.

Herhangi bir şey yayınlamadan önce, Open Graph denetleyicisi kartı tam olarak bir tarayıcının oluşturacağı şekilde gösterir; bu on saniye sürer ve garip bir yeniden paylaşımdan kurtarır.

Bir Kısa Bağlantı Paylaştığınızda Önizlemeler

Bir kısa bağlantının kendine ait Open Graph etiketleri yoktur ve hiçbirine ihtiyacı da yoktur. Tarayıcı yönlendirmeyi takip eder, hedefe iner ve kartı oradaki etiketlerden oluşturur; bu da kısaltılmış bir URL'nin hedef sayfanın önizlemesini her ne ise devraldığı anlamına gelir. Kart yanlışsa, hedefteki etiketler yanlıştır.

İki şey gerçekten bağlantı katmanına bağlıdır. Yönlendirmenin bir tarayıcı tarafından takip edilebilir olması gerekir; bu, sunucu tarafı bir sıçrama için normal durumdur ama bir JavaScript yönlendirmesi için değildir, zinciri kısa ve sunucu tarafında tutmak için bir neden daha. Ve önizleme hedefe ait olduğu için, bir kısa bağlantıyı yeniden yönlendirmek onun önizlemesini de değiştirir; bu da bağlantı zaten paylaşıldıktan sonra bir kampanya sayfası değiştirildiğinde sessizce işe yarayan bir özelliktir.

Bağlantıyı, kartı ve tıklama verisini tek bir yerde istiyorsanız, kendi alan adınızda bir çalışma alanı başlatın ve kartı gönderimden sonra değil önce araçla kontrol edin.

Saklamaya Değer Bir Kontrol Listesi

• 1200x630, PNG veya JPEG, 1 MB'ın altında, mutlak bir HTTPS URL'si. OG görsel boyutu kararının tamamı bu.
• Ortadaki 1080x600 alanının dışında önem taşıyan hiçbir şey yok, ince kenarlık yok.
• og:image:width, og:image:height ve og:image:alt mevcut.
• X'te büyük kartı istiyorsanız twitter:card, summary_large_image olarak ayarlanmış.
• Yeni görsel, yeni dosya adı, ardından herhangi bir şeyi duyurmadan önce yeniden tarama.

Bu beşini bir kez doğru yapın, sayfanızın head'ine şablon haline getirin, ve Open Graph görselleri üzerinde düşündüğünüz bir şey olmaktan çıkar. Ki bunlara verilecek doğru ilgi miktarı da budur.

Temel Taşı Serisini Okuyun

Bu yazı eğitimler kümesinde yer alır. Kötü kırpılmak yerine tamamen başarısız olan önizlemeler için, bağlantı önizlemesi görünmüyor platform bazında düzeltmedir ve tıklanabilir bir bağlantı nasıl yapılır altındaki katmanı kapsar.

Blogda İlgili Yazılar

• Bağlantı önizlemesi görünmüyor mu? Nedenleri ve nasıl düzeltilir
• X (Twitter) için bir bağlantı nasıl kısaltılır: t.co ona ne yapar
• Sosyal medya bağlantıları nasıl izlenir: kanal bazında tıklamalar
• Markalı bağlantı nedir ve neden daha iyi dönüşüm sağlar
• Bir URL nasıl yönlendirilir: altı yol ve her birinin ne zaman doğru olduğu
• Özel alan adlı kısa bağlantılar: DNS, TLS ve uç ağ