Open Graph & Twitter Card Önizleme

Sosyal önizlemeler, Facebook, X, LinkedIn, Slack, Discord, WhatsApp veya URL'leri zengin gömülerelere dönüştüren herhangi bir platforma bir bağlantı yapıştırdığınızda görünen kartlardır. İyi yapıldığında, kart kullanıcı tıklamadan önce konuyu, markayı ve görsel kaliteyi iletti diği için düz bir bağlantıya kıyasla tıklama oranını yaklaşık iki katına çıkarır. Kötü yapıldığında — veya daha kötüsü, tamamen eksik olduğunda — platformu çıplak bir URL dizesi gösterirken bırakırlar ve TO cezası gerçek ve ölçülebilirdir. Kartlar, sayfanın HTML'sindeki Open Graph ve Twitter Cards meta etiketleri tarafından yönetilir; bu, birkaç <meta> etiketinin nasıl yazıldığındaki küçük bir değişikliğin temiz bir kart ile bozuk bir geri dönüş arasındaki fark olabileceği anlamına gelir.

Open Graph kendisi 2010'dan başlar; Facebook bu protokolü dış sayfaların kendilerini sosyal grafiğe nasıl tanımladığını standartlaştırmak için yayınladı. Protokol kasıtlı olarak küçüktü: og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale. Link unfurl yapan hemen hemen her diğer platform aynı sözlüğü benimsedi: LinkedIn, Slack, Discord, Pinterest, WhatsApp, Telegram, Microsoft Teams ve hatta Apple Messages tüm OG etiketlerini önce okur. Twitter Cards 2012'de biraz farklı bir sözlükle ayrı olarak tanıtıldı (twitter:card, twitter:title, twitter:description, twitter:image) ve o zamandan beri konvansiyon her ikisini göndermek olmuştur, twitter:* Twitter'da öncelik alır ve og:* başka her yerde öncelik alır. Bugün çoğu yazar tek bir doğruluk kaynağı tutar ve her iki etiket ailesini aynı içerikle yayar.

Twitter Cards birinci sınıf bir kavram olarak kart tipleri ekledi. summary_large_image, içerik sayfaları için varsayılandır — üstte görsel ve altta başlık olan yatay bir kart üretir, ki TO uplift'in çoğunu sağlayan düzendir. summary, büyük bir hero görseliniz olmadığında kullanışlı olan kare küçük resimli daha küçük bir karttır. app ve player, mobil uygulamalar ve gömülü medya için özel tiplerdir; spesifik gereksinimleri ve doğrulama yolları vardır. Buradaki önizleme aracı, sayfanın bildirdiklerine göre hem summary_large_image hem summary'yi render eder, böylece kart tipinin amaçladığınız şey olduğunu doğrulayabilirsiniz. Çoğu yazar 1200×630 görsel ile summary_large_image varsayılan kullanmalıdır; bu kombinasyon her platformda çalışır.

LinkedIn'in bilinmeye değer kendi tuhaflıkları vardır. og:* etiketlerini onurlandırır ama önbelleğe alma konusunda ünlü saldırgandır: LinkedIn zaten taradıktan sonra bir sayfanın OG görselini değiştirirseniz, yeni görsel, LinkedIn'in Post Inspector'ına gidip manuel olarak bir yeniden getirme tetiklemediğiniz sürece paylaşımlarda saatler veya günler boyunca görünmez. Bu, yazarları bir makaleyi güncellediklerinde, kapak görselini değiştirdiklerinde ve LinkedIn'in hâlâ eskisini gösterdiğini bulduklarında şaşırtır. Buradaki önizleme aracı her zaman meta etiketlerinin mevcut durumunu gösterir, LinkedIn'in önbelleğe alınmış durumunu değil; bu nedenle bir içerik güncellemesinden sonra LinkedIn'de bir şey yanlış göründüğünde, iş akışı yeni etiketlerin yerinde olduğunu burada onaylamak ve sonra LinkedIn önbelleğini yenilemek için Post Inspector'a gitmektir.

Slack link unfurl'i diğerlerinden farklı yapar. Sabit bir kart düzeni yerine, Slack link önizlemesini renkli sol kenarlıklı bir yan çubuk alıntı, favicon, başlık, açıklama ve satır içi görsel olarak ele alır. Kenarlık rengi sayfanın <meta>'sındaki theme-color'dan gelir, bu da sitenizde tutarlı bir theme-color ayarlayarak Slack önizlemelerinizi ince bir şekilde markalaştırabileceğiniz anlamına gelir. Slack ayrıca link önizlemelerini takım başına önbelleğe alır, herkese açık bir yenileme API'si yoktur, dolayısıyla yanlış olan önizlemeler önbellek TTL'si (yaklaşık bir gün) sona erene kadar yanlış kalır. Buradaki önizleme aracı sayfanın mevcut durumunu gösterir; Slack hâlâ eski bir önizleme gösteriyorsa, beklersiniz.

Discord gömüleri en fazla esneklikle render eder. og:* etiketlerini, twitter:image'i geri dönüş olarak onurlandırır ve gömülemenin sol kenar çubuğu için (unfurl'un sol tarafındaki görünür bant) sayfanın theme-color'ını kullanır. Discord ayrıca oEmbed'i destekler; bu da yazar etiketini ve başlığın üzerindeki marka satırını özelleştirmenize olanak tanır — çoğu sayfa zahmet etmez, ama içerik yayıncıları için bu, yazarın adını gömülemenin içine koyma yoludur. Discord önizlemeleri anında görünür ve genellikle meta etiketlerinin söylediklerinin en doğru canlı render'ıdır, bu da kitleniz Discord'da olmasa bile Discord'u kullanışlı bir hata ayıklama yüzeyi yapar. Dağıtımdan sonra OG'nin doğru göründüğünü onaylamak için özel bir kanala bir bağlantı yapıştırın; Discord'da doğru görünüyorsa, neredeyse kesinlikle başka yerlerde de doğru görünür.

Önizleme sorunlarının çoğunun kaynağı görseldir. Önerilen boyutlar og:image için 1200×630 (yaklaşık 1.91:1 en boy oranı), 8 MB altında, JPEG veya PNG formatındadır. Daha küçük görseller (200×200'den az), Twitter tarafından küçük bir küçük resme indirgenir ve Facebook tarafından tamamen düşürülebilir. Kimlik doğrulama veya hot-link koruması arkasında sunulan görseller her platform tarafından engellenir. og:image'deki göreli URL'ler sık bir hatadır — protokol dahil mutlak olmaları gerekir — ve buradaki araç, getirme sırasında göreli URL'leri sayfanın kanonik URL'sine karşı çözmeye çalışarak bunları işaretler. Hareketli GIF'ler hareketsiz kare olarak render edilir; gerçek hareket için farklı protokol gereksinimleri olan bir video unfurl'a (og:video artı og:video:type artı og:video:width/height) ihtiyaç duyarsınız.

Her platformdaki önbellekleme stratejileri bir paragraf değecek kadar farklıdır. Facebook OG verilerini birkaç gün önbelleğe alır; Facebook Sharing Debugger (developers.facebook.com/tools/debug/) aracılığıyla yenilemeye zorlayabilirsiniz. Twitter benzer bir süre boyunca önbelleğe alır; Twitter Card Validator devre dışı bırakıldı, dolayısıyla yenilemenin tek yolu beklemek veya farklı bir önbellek anahtarı yapmak için URL'ye anlamsız bir sorgu parametresi eklemektir. LinkedIn'in Post Inspector'ı tek yenileme aracıdır; o olmadan düzenlemeler yayılmaz. Slack ve Discord kanal başına önbelleğe alır ve yenileme aracı yoktur. Pragmatik anlamı: bağlantıyı ilk paylaştığınızda OG'yi doğru elde edin. Buradaki önizleme aracı platform debugger'larından daha hızlıdır ve geliştirici hesabı gerektirmez, dolayısıyla yayınlamadan önce doğrulamak için doğru yerdir.

Teknik tarafta, bu araç sayfayı istemci yerine sunucu tarafında getirir. Bunun bir nedeni var: çoğu üretim CMS-render edilmiş sayfa, keyfi kaynaklardan getirmeyi engelleyen bir Content-Security-Policy belirler ve birçok site, tarayıcıda istemci tarafı getirmeyi bozan X-Frame-Options veya X-Content-Type-Options belirler. Sunucu tarafı getirme ayrıca og:* etiketleri genellikle herhangi bir JavaScript render etmeden önce ilk HTML'de yaşadığı için gereklidir; bu da JS-yoğun sitelerde tarayıcı tabanlı bir getirmenin bunları bazen kaçırdığı anlamına gelir. Burada kullanılan sunucu tarafı getirici SSRF korumasını uygular (dahili IP'leri, link-local adresleri ve HTTP olmayan portları getirmeyi reddeder) ve 1.5 MB body sınırı (çoğu sayfa rahatlıkla altında) belirler, dolayısıyla araç dahili ağ keşif aracına dönüştürülemez.

Gizlilik ve hız sınırları belirtilmeye değer. Burada önizlediğiniz sayfa, tarayıcınız tarafından değil, Omnvert sunucusu tarafından getirilir; bu da önizleme başına bir dışarı giden istek gördüğümüz anlamına gelir. Günlükler URL'yi içerir ama sayfa içeriklerini içermez — suistimal algılaması için kısa bir süre tutulur ve sonra rotasyona alınırlar. IP tabanlı hız sınırlayıcı her istemciyi dakikada otuz önizleme ile sınırlar, ki normal etkileşimli kullanım için yeterince yüksek ve betikli suistimali caydıracak kadar düşüktür. Yüzlerce sayfa için toplu önizlemeye ihtiyaç duyarsanız (örneğin, bir site haritasının SEO denetimi), doğru araç bu önizleme UI değil, kendi sunucunuz olan betikli bir scraper'dır.

Diğer sosyal önizleme araçlarına karşı farklılaştırıcı, beş büyük platformu — Facebook, X, LinkedIn, Slack, Discord — tek ekranda tek bir getirme ile görebilmenizdir. metatags.io, opengraph.xyz ve diğerleri gibi bağımsız önizleyiciler her biri bir veya iki platform için mükemmel iş çıkarır, ama açtığınız her araç için ayrı bir getirmenin gecikme maliyetini ödersiniz. Gerçek bir yayın iş akışı için — bir yazı yazın, OG'yi ayarlayın, yayınlamadan önce doğrulayın — tüm platformları tek bir sayfada kontrol etmek bunu her seferinde yapacak kadar ucuz hale getirir ve bu, sürekli doğru önizlemeler ile bir CMS şablon değişikliği OG görselini kimsenin fark etmediği şekilde bozduğunda zaman zaman utanç verici geri dönüş arasındaki farktır.

Birkaç pratik kalıp. İlk olarak, bir sayfa için tek bir OG görseli doğruluk kaynağı olarak ayarlayın ve hem og:image hem twitter:image için yeniden kullanın; sürüklenebilecek iki ayrı görsel sürdürmeyin. İkinci olarak, og:title'ı yaklaşık 60 karakterin altında tutun — Twitter 70 civarında kesilir, Facebook 88 civarında, ama LinkedIn ve küçük Slack örneklerindeki en sert düzenler 60'ta kesilmeye başlar. Üçüncü olarak, og:description'ı başlık olmadan anlam taşıyan bağımsız bir cümle olarak yazın — başlık kesildiğinde, açıklama anlamı taşımak zorundadır. Dördüncü olarak, sitenizde <meta name="theme-color">'da tutarlı bir marka rengi ayarlayın — Slack ve Discord ikisi de görünür vurgular için kullanır ve her sayfa başına iş yapmadan önizlemelerinizi daha cilalı gösterir.

Bir başka ince konu: dinamik OG görseli üretimi. Pek çok modern site, ürün veya yazı başlığını üzerine basan görseller için OG görsellerini bir runtime endpoint'inden — Vercel'in @vercel/og kütüphanesi veya Cloudflare Workers ile özel bir uygulama — sunucu tarafında render eder. Bu yaklaşım gerçek bir UX kazanımıdır çünkü her sayfa için doğru başlık ve hatta kullanıcı bilgisi içeren bir görsel elde edersiniz, ama önbellek sorunları yaratır: dinamik endpoint her seferinde yeni içerik dönerse, Cloudflare gibi CDN'lerin önbelleğini ve Facebook gibi platformların önbelleğini geçersiz kılmak zor olur. Pratikte, OG görsel rotanızın yanıtında uzun bir Cache-Control belirleyin (1 yıl gibi) ve içerik değişikliklerini görsel URL'sine bir hash veya sürüm parametresi ekleyerek yansıtın — örneğin /og?v=abc123 veya /og?title=...&hash=xyz. Bu, Facebook, X ve LinkedIn'in görseli yeni bir kaynak olarak ele almasını sağlar, eski bir çekimi yenilemeye çalışmak yerine. Buradaki önizleme aracı, dinamik OG endpoint'inizin farklı parametreler için doğru görseli döndürdüğünü ve generic geri dönüş görselini değil, beklenen başlık ile özelleşmiş varyantı sunduğunu hızlıca doğrulamak için ideal bir yerdir. Aynı zamanda render hızını ölçmek için de kullanışlıdır: dinamik OG endpoint'i çok yavaş yanıt veriyorsa, Facebook ve X gibi bazı tarayıcılar zaman aşımına uğrar ve görseli atlar — sayfa için OG önizlemesinin tamamen kaybolmasına neden olur. Önizleme yüklenirken hızlı geliyorsa, gerçek tarayıcılar da hızlı görür.

Bu araç diğer Omnvert SEO ve geliştirici yardımcı programlarıyla doğal olarak eşleşir. Schema.org JSON-LD Oluşturucu, arama motorları için yapılandırılmış verinin ilgili ama farklı sorununu kapsar — JSON-LD Google ve dostlarını hedefler, OG ve Twitter kartları sosyalı hedefler. Çoğu üretim sayfası ikisini de doğru yapmaya ihtiyaç duyar. User Agent Ayrıştırıcı, bir platformun gönderdiği gezgin sürümünü doğrulamak istediğinizde kullanışlıdır: FacebookExternalHit, Twitterbot, LinkedInBot, Slackbot, Discordbot kendilerini açıkça tanımlar. JSON Viewer, ham meta-etiket dökümünü ağaç olarak incelemek istediğinizde yardımcı olur. Ve Hash Generator, kesinlikle bir yenilemeyi zorlamak zorunda kaldığınızda kararlı önbellek-kırıcı sorgu parametreleri üretmenin bitişik ihtiyacını kapsar.