Open Graph Etiketleri Açıklandı: Sosyal Medya Bağlantı Önizlemeleri Nasıl Oluşturulur

Herhangi bir web bağlantısını bir Facebook gönderisine paylaştığınızda, bir makaleyi bir Telegram grubuna yapıştırdığınızda veya bir ürün sayfasını Twitter'da bir arkadaşa DM ile gönderdiğinizde, düzgün bir görsel önizleme kartı görmeyi beklersiniz. Bu kart—keskin bir afiş görseli, ilgi çekici bir başlık ve özlü bir özet içeren—tesadüfen oluşmaz. Open Graph protokolü adı verilen standartlaştırılmış bir web spesifikasyonu aracılığıyla oluşturulur. Ancak web sitenizin kodunda bu meta etiketler yoksa, sosyal platformlar çirkin, kırık gri bir kutu gösterecek veya sayfanızdan rastgele bir küçük resim seçecektir. Open graph etiketleri mekaniklerini öğrenmek, web geliştiricileri ve teknik pazarlamacılar için önemlidir.

Open Graph protokolü, Facebook tarafından 2010'da tanıtıldı ve dış web sayfalarını sosyal grafik ağlarına entegre etmek için tasarlandı. Open Graph öncesinde, sosyal ağlar bir makalenin ne hakkında olduğunu, ham paragraf metnini kazıyarak ve HTML resim etiketlerini tarayarak tahmin etmek zorunda kalıyordu; bu genellikle utanç verici görsel önizlemelerle sonuçlanıyordu. Günümüzde Open Graph, LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack ve WhatsApp tarafından desteklenen evrensel internet standardı haline gelmiştir. Bu teknik derinlemesine incelemede, temel OG etiketleri için doğru sözdizimini öğrenecek, resim boyutu gereksinimlerini anlayacak ve sosyal etkileşimi en üst düzeye çıkarmak için önizleme kartlarını nasıl hata ayıklayıp optimize edeceğinizi keşfedeceksiniz.

Open Graph meta verilerini ustalıkla kullanarak, alan adınızdan paylaşılan her bağlantının çekici, profesyonel ve sosyal paylaşım için optimize edilmiş görünmesini sağlarsınız.

Kamuya açık sosyal medya akışlarının ötesinde, Open Graph etiketleri aynı zamanda bağlantıların Slack, Microsoft Teams ve Discord gibi özel iş birliği yazılımları ve ekip mesajlaşma araçları içinde nasıl görüntüleneceğini de yönetir. Bir ekip üyesi URL’nizi şirket Slack kanalına veya geliştirici Discord sunucusuna yapıştırdığında, uygulamanın dahili botu Open Graph meta verilerinizi gerçek zamanlı olarak çözümler ve başlığınızı, küçük resminizi ve özet kısmınızı doğrudan sohbet akışında gösterir. Yüksek kaliteli meta veriler, iç paydaşların ve topluluk üyelerinin bağlantınızla hemen etkileşime geçmesini sağlar.

Open Graph protokolü nedir?

Open Graph protokolü, web geliştiricilerin bir HTML belgesinin <head> bölümüne yerleştirdiği yapılandırılmış meta etiketler kümesidir. Otomatik bir tarayıcı (örneğin facebookexternalhit veya TelegramBot) sayfanızı ziyaret ettiğinde, bu etiketleri analiz ederek etkileşimli bir zengin önizleme nesnesi oluşturur.

Open Graph etiketleri olmadan, paylaşılan bir bağlantı sadece düz metindir. Open Graph etiketleri ile bağlantınız, sosyal akışlar genelinde tıklama oranlarını önemli ölçüde artıran yüksek görünürlüklü interaktif bir görsel karta dönüşür.

Dahil etmeniz gereken temel Open Graph etiketleri

Her genel web sayfası, tüm büyük platformlarda tutarlı bir şekilde görüntülenmeyi sağlamak için dört temel Open Graph etiketi içermelidir:

Her zaman og:url etiketinin kanonik bağlantı etiketinizle eşleştiğinden emin olun, böylece sosyal etkileşim sayıları ve geri bağlantı sinyalleri URL varyasyonları arasında dağılmaz.

Modern ekranlar için Open Graph görsellerini optimize etme

Görsel, herhangi bir önizleme kartının kesinlikle en kritik unsurudur. Grafiklerinizin modern yüksek çözünürlüklü akıllı telefon ekranlarında kusursuz netlikle görüntülenmesini sağlamak için, bu teknik özellikleri takip edin:

• Standart Çözünürlük (1.91:1): 1200x630 piksel kullanın. Bu, Facebook, LinkedIn ve Twitter özet kartları için evrensel standarttır.
• Geniş Ekran Alternatifi (16:9): 1200x675 piksel, video içerikleri, YouTube paylaşımları ve modern duyarlı bloglar için yaygın olarak kullanılmaktadır.
• Boyutları Açıkça Belirtin: Her zaman <meta property="og:image:width" content="1200" /> ve <meta property="og:image:height" content="630" /> etiketlerini ekleyin. Bu, sosyal tarayıcıların kart düzenini ilk taramada anında render etmesini sağlar, böylece görüntü boyutlarını indirmek ve eşzamansız olarak hesaplamak zorunda kalmazlar.
• Dosya Boyutu Kısıtlamaları: Dosya boyutlarını 5MB'ın altında tutun. Çoğu sosyal tarayıcı, ağ bant genişliğini korumak için 5MB'ı aşan resim indirmelerini durdurur.
• Merkezi Kritik Metin: Sosyal platformlar, önizleme grafiklerini mobil akışlarda ve masaüstü kenar çubuklarında farklı şekilde kırpar. Tüm kritik logoları, metin başlıklarını ve yüzleri resmin ortasındaki "güvenli bölge" içinde ortalayın.

Twitter Kartları ve Open Graph: nasıl etkileşirler

Twitter (X), Twitter Kartları adı verilen kendi özel meta veri işaretlemesini sürdürmektedir, ancak aynı zamanda Open Graph yedeğini de yerel olarak desteklemektedir.

Linklerinizin küçük kare küçük resimler yerine Twitter'da büyük, dikkat çekici görsel kartlar olarak görüntülenmesini sağlamak için, Open Graph etiketlerinizin yanında bu özel Twitter etiketlerini ekleyin:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

twitter:card değerini summary_large_image olarak ayarlamak, tam genişlikte görsel önizlemeler istiyorsanız zorunludur. İhmal edilirse, Twitter varsayılan olarak çok daha az tıklama çeken, yalnızca metin tabanlı kompakt bir önizleme kullanır.

Gelişmiş yayıncılar ayrıca og:locale ve article:published_time gibi ek Open Graph özelliklerini de uygulamalıdır. og:locale'yi belirtmek, tarayıcılara içeriğin birincil dili ve bölgesel biçimlendirmesi hakkında bilgi verirken, yayın zaman damgaları Google Discover gibi içerik keşif motorlarının güncel editoryal haberleri tanımasına yardımcı olur.

Ayrıca, yapılandırılmış bir resim yedekleme hiyerarşisini sürdürmek de akıllıcadır. Bir yazar belirli bir blog yazısı için özel bir öne çıkan görsel yüklemeyi unutursa, içerik yönetim şablonunuz, tarayıcıların boş bir önizleme kartı oluşturmasına izin vermek yerine otomatik olarak temiz, yüksek çözünürlüklü varsayılan bir marka grafiği eklemelidir.

Ayrıca, Open Graph etiketlerinin markalı alt alan adlarıyla nasıl etkileşime girdiğini markalı alt alan adları rehberimizde keşfedebilirsiniz.

Önizleme etiketlerini test etme, doğrulama ve sorun gidermme

Bir pazarlama kampanyası başlatmadan veya bağlantıları halkla paylaşmadan önce, Open Graph etiketlerinizi her zaman resmi platform hata ayıklama araçlarıyla doğrulayın:

• Meta Paylaşım Hata Ayıklayıcı: Facebook kartlarını önizlemek, etiket uyarılarını kontrol etmek ve yönlendirme önbelleklerini zorla yenilemek için URL’nizi yapıştırın, yanlış önizleme resimlerini düzeltme rehberimizde tartışıldığı gibi.
• Telegram @WebpageBot: Mobil önizleme görüntülemesini doğrulamak ve eski önbelleğe alınmış grafikleri temizlemek için linkinizi Telegram içindeki bu doğrulanmış bota gönderin.
• LinkedIn Gönderi Denetleyicisi: LinkedIn’in yedi günlük bağlantı önizleme önbelleğini temizler ve eksik meta veri alanlarını raporlar.
• Otomatik Bağlantı Kontrolü: Yönlendirme zincirlerini, SSL sertifikalarını ve durum kodlarını ücretsiz bağlantı kontrol aracımızı kullanarak doğrulayın.

Tam Open Graph metadata'sını uygulayarak ve her büyük platformda önizleme görüntülemesini doğrulayarak, web bağlantılarınızın kalabalık akışlarda öne çıkmasını sağlar ve maksimum etkileşimi artırırsınız.

Sık sorulan sorular