Meta Etiket Önizleme

Meta etiketler neden önemlidir?

Birisi sosyal medyada veya mesajlaşma uygulamalarında URL'ini paylaştığında, bu platformlar sayfayı çeker ve zengin bağlantı önizlemesi (rich snippet preview) oluşturmak için Open Graph ve Twitter meta etiketlerini okur. Görünen görsel, başlık ve açıklama bu etiketlerden gelir.

Eksik veya yanlış yapılandırılmış bir og:image, bağlantının görsel bağlam olmadan yalnızca URL olarak görünmesine neden olur.

Bu araç hangi etiketleri kapsar?

Oluşturulan kod şunları içerir:

• <title>
• meta name="description"
• link rel="canonical"
• Open Graph: og:title, og:description, og:image, og:url, og:type
• Twitter Card: twitter:card, twitter:title, twitter:description, twitter:image

Bunlar Google, Twitter/X, Facebook, LinkedIn, iMessage, Slack, Discord ve bağlantı önizlemesi oluşturan diğer platformları kapsar.

Görsel boyut kılavuzu

Platform başına önerilen boyutlar:

• Twitter/X: 1200 x 675 px
• Facebook: 1200 x 630 px
• LinkedIn: 1200 x 627 px

Tek bir 1200 x 630 px (1.91:1) görsel, kırpma sorunları olmadan tüm platformları kapsar. Dosyayı 5 MB altında tut ve PNG veya JPEG tercih et. WebP tüm büyük sosyal platformlar tarafından desteklenir ancak besleme okuyucuları (feed readers), not alma uygulamaları veya OG verilerini kullanan diğer araçlarda düzgün görüntülenmeyebilir.

Başlık ve açıklama uzunluğu

Google başlıkları karakter sayısına değil piksel genişliğine göre keser. Kesim noktası masaüstünde yaklaşık 600 px'dir; bu da ortalama karma büyük-küçük (mixed-case) Latin alfabesi kullanan metinler için yaklaşık 50-60 karaktere denk gelir. Geniş karakterler (W, M, büyük harf dizileri) limiti daha çok etkilerken, dar karakterler (i, l, t, 1) daha az etkiler. Bu araçtaki sayaçlar pratik bir kural (heuristic) olarak 60 karakteri kullanır, ancak gerçek limit aslında belirsizdir. Mobilde piksel bütçesi daha dardır, bu nedenle masaüstü görünümde kesilmeyen bir başlık mobilde kesilebilir.

Google ayrıca anahtar kelime dolu (keyword-stuffed), yanıltıcı veya sayfa içeriğini temsil etmediğini düşündüğü başlıkları uzunluğundan bağımsız olarak yeniden yazar. 60 karakterin altında kalmak başlığının yazıldığı gibi görüneceğini garanti etmez.

Eğer Başlık | Marka biçimi kullanıyorsan, genellikle sol kısım Google tarafından daha çok dikkate alınır. "Marka" kısmı kesilebilir veya tamamen atılabilir. Marka ismine ne kadar önem verdiğine bağlı olarak, "Marka" kısmını karakter sayına dahil edebilir veya etmeyebilirsin. Ben genellikle marka adını karakter sayımına dahil ediyorum, fakat uzun başlıklı sayfalarda, duruma göre marka adını karakter sayımından çıkarıyorum.

Açıklamalar da başlıklarla aynı piksel genişliği mantığını izler. Google'ın kesim noktası masaüstünde yaklaşık 920 px, yani yaklaşık 155-160 karakter; mobilde ise yaklaşık 120 karaktere kadar düşer.

Bu önizlemeler her platformla tam olarak eşleşiyor mu?

Bu sayfada sunulan önizlemeler yaklaşık örnekler olarak alınmalıdır. Her platform kendi yazı tiplerini, renklerini, kırpma mantığını ve yedek davranışını (fallback behaviour) uygular. Bu davranışlar platformlar tarafından haber verilmeden değişebilir. Yayımladıktan sonra doğrulama için aşağıdaki araçları kullanabilirsin:

• Twitter/X: Twitter Card Validator artık mevcut değil. Kartları test etmenin tek yolu URL içeren bir tweet paylaşmak.
• Facebook: Facebook Post Debugger Facebook girişi gerektirir.
• LinkedIn: LinkedIn Post Inspector giriş gerektirmeden çalışır.