Open Graph Etiketleri Nedir, Neden Önemli?

Open Graph etiketleri, bir linkin sosyal medyada paylaşıldığında hangi başlık, açıklama ve görselle göründüğünü belirliyor; bu etiketler yoksa platform genelde sayfadan rastgele bir şey seçiyor, sonuç çoğu zaman düzgün görünmüyor.

Özet

Adım adım

Sayfaya en azından og:title, og:description ve og:image etiketlerini ekle.
Görsel için en az 1200x630 piksel boyutunda, metnin okunabilir kaldığı bir görsel seç.
Eklediğin etiketleri bir önizleme aracıyla test et, gerçek paylaşımdan önce nasıl göründüğünü gör.
Sayfa içeriği değiştiğinde etiketleri de güncelle, bazı platformlar eski önizlemeyi günlerce önbellekte tutabiliyor.

Neden önemli?

Bir bağlantı mesajlaşma uygulamasında, bir sosyal medya akışında ya da iş yazışma aracında paylaşıldığında, insanların çoğu sayfayı açmadan önce yalnızca o küçük önizleme kartını görür. Kartta anlamsız bir başlık, sayfanın menüsünden kopmuş bir metin ya da kesilmiş bir logo görünüyorsa, bağlantıya tıklama ihtimali düşer. Open Graph etiketleri bu kartın içeriğini senin belirlemeni sağlar, yani paylaşılan her bağlantının ilk izlenimini kontrol edersin.

Temel üçlünün ötesinde

og:url, sayfanın asıl adresini bildirir. Aynı içerik farklı parametrelerle paylaşıldığında platformun hepsini tek sayfa olarak tanımasına yardım eder.
og:type, içeriğin türünü belirtir. Çoğu sayfa için website, blog yazıları için article kullanılır.
og:site_name, kartın üzerinde sitenin adının görünmesini sağlar.
X (Twitter) gibi bazı platformlar kendi twitter:card etiketine bakar; bu etiket yoksa büyük görselli kart yerine küçük bir kart gösterebilir.
og:locale, çok dilli sitelerde sayfanın dilini bildirmek için kullanılır.

Sık yapılan hatalar

og:image değerine göreli bir yol yazmak. Görsel adresi alan adıyla birlikte tam URL olmalıdır.
Görseli giriş gerektiren ya da robots kurallarıyla engellenmiş bir klasörde tutmak; platformun tarayıcısı görsele ulaşamaz.
Her sayfaya aynı başlık ve görseli koymak. Paylaşılan tüm bağlantılar birbirinin aynısı görünür.
Görselin kenarlarına önemli metin yerleştirmek. Bazı platformlar görseli kare ya da daha dar bir oranda kırpar.
Açıklamayı çok uzun yazmak; platformlar genellikle birkaç satırdan sonrasını keser.

Örnek bir senaryo

Yeni yayımladığın bir blog yazısını bir mesajlaşma grubunda paylaştın ve önizlemede sitenin genel logosu ile ana sayfa açıklaması çıktı. Sayfanın kaynak kodunu açıp baktığında og:image etiketinin şablondan gelen sabit bir değerle kaldığını görüyorsun. Yazıya özel bir kapak görseli hazırlayıp tam adresini etikete yazıyor, başlık ve açıklamayı da yazının kendisine göre güncelliyorsun. Ardından önizleme aracında kontrol ediyorsun. Platform eski kartı hâlâ gösteriyorsa, o platformun paylaşım hata ayıklama aracından sayfayı yeniden taratman gerekebilir.

Ne zaman bir geliştiriciye danışmalı?

Siten JavaScript ile sonradan içerik yükleyen bir yapıdaysa, etiketler tarayıcıda görünse bile paylaşım platformlarının tarayıcıları onları okuyamayabilir. Önizleme araçları etiketleri boş gösteriyorsa, etiketlerin sunucu tarafında ya da derleme aşamasında HTML'e yazılması gerekir. Bu tür bir değişiklik için sitenin altyapısını bilen biriyle çalışmak en hızlı çözümdür.