Open Graph Önizleme

Open Graph etiketleri, bir sayfa sosyal ağlarda ya da mesajlaşma uygulamalarında paylaşıldığında hangi başlık, açıklama ve görselin kartta gösterileceğini belirler. Etiket yoksa platform sayfadan kendi seçtiği içeriği alır; sonuç çoğu zaman istediğiniz gibi olmaz.

Etiketler sayfanın HTML kodundaki head bölümünde yer alır ve og: öneki taşır. Protokolü başlangıçta Facebook ortaya koymuştur; bugün birçok platform ve uygulama bu etiketleri okur.

Bir bağlantı paylaşıldığında kartın oluşmasını sağlayan şey, platformun sayfayı ziyaret edip bu etiketleri okumasıdır. Etiketler doğru ve eksiksizse paylaşımın görünümü sizin elinizde olur; değilse platform sayfadaki ilk başlığı, ilk görseli ya da rastgele bir metni seçebilir. Bu, özellikle markalı ya da kampanya sayfalarında istenmeyen bir görünüme yol açar.

Önizle seçeneğinde yazdığınız sayfa, AdPix’in sayfa getirme servisi üzerinden okunur; tarayıcılar başka bir sitenin içeriğini doğrudan okuyamadığı için sorgu bu servisle yapılır. Sayfadaki og:* ve twitter:* etiketleri alanlara yazılır. Görsel adresi göreli ise sayfa adresine göre tam adrese çevrilir. Aracın okuduğu sayfada bulunmayan etiketler ayrıca listelenir.

Alanları elle de doldurabilirsiniz. Görsel yalnızca yazdığınız adresten bir img öğesiyle tarayıcınızda yüklenir; adres yanlışsa ya da görsel herkese açık değilse önizlemede yüklenemediği belirtilir. Etiketlerdeki tırnak ve özel karakterler otomatik kaçışlanır.

Önizleme yalnızca sayfanın kaynağını okur; sayfayı sizin adınıza paylaşmaz ve platformlarda hiçbir şey yayımlamaz. Okunan değerler alanlara yazıldıktan sonra istediğiniz gibi düzenleyebilir, ardından çıktıdaki etiketleri kopyalayabilirsiniz.

Open Graph görseli, og:image etiketiyle belirtilen ve paylaşım kartının üst kısmında gösterilen görseldir. Kartın en dikkat çeken parçasıdır; çoğu zaman bağlantıya tıklanıp tıklanmayacağını görsel belirler. Görsel adresi tam olmalı (https:// ile başlamalı), herkese açık olmalı ve giriş ya da robot engeli arkasında kalmamalıdır.

Platformlar görseli farklı oranlarda kırpabilir ve bu kuralları zamanla değiştirir; bu yüzden ölçüler için ilgili platformun güncel yönergelerine bakın. Önemli metin ve nesneleri görselin ortasında tutmak, kırpmada kaybolma riskini azaltır. Görselin içine çok küçük metin koymaktan kaçının; kart küçük ekranlarda ufak görünür.

Görsel bulunamazsa ya da çok küçükse bazı platformlar kartı görselsiz ya da küçük bir görselle çizer. Görseli yayına aldığınız sitede kalıcı bir adreste tutun; adres değişirse eski paylaşımlardaki kartlar da bozulabilir. Sayfaya özgü bir görsel yoksa tüm site için ortak bir görsel kullanmak, hiç görsel olmamasından daha iyi bir sonuç verir.

Araç şu altı etiketi denetler:

• og:title: kartın başlığı.
• og:description: kısa açıklama.
• og:image: kart görseli.
• og:url: sayfanın asıl adresi.
• og:type: içerik türü; çoğu sayfa için website, yazılar için article.
• twitter:card: X kartının türü.

İsteğe bağlı olarak og:site_name sitenizin adını gösterir. Eksik olan etiketlerin yerine platformlar sayfadan kendi seçtikleri içeriği alabilir; bu yüzden altı etiketin tamamını yazmak önerilir.

Etiketin içeriği sayfanın gerçek içeriğiyle uyumlu olmalıdır. Başlık sayfanın konusunu, açıklama bir iki cümlelik özetini anlatmalı; og:url ise sayfanın tercih ettiğiniz (canonical) adresini göstermelidir. Aynı sayfanın birden çok adresle açılması durumunda tek bir adres belirtmek, paylaşım sayılarının dağılmasını önler.

Her platform aynı etiketleri farklı bir düzenle çizer. Araç dört kartı ayrı gösterir:

• Facebook: görsel üstte, altında alan adı, başlık ve kısa açıklama yer alır.
• LinkedIn: görselin altında başlık ve alan adı görünür; açıklama çoğu zaman gösterilmez.
• X: kart türü twitter:card değerine göre büyük ya da küçük görselli olur.
• WhatsApp: sohbet balonunda küçük bir görsel, başlık, açıklama ve alan adı gösterilir.

Bu çizimler tipik düzenlerdir; platformlar tasarımlarını değiştirebilir. Piksel ölçüleri için sabit bir değer kullanmayın, güncel platform belgelerine bakın.

Başlık ve açıklamayı tüm platformlar için tek bir kalıba sığacak biçimde yazmak en güvenli yoldur: başlığı kısa tutun, açıklamayı en önemli bilgiyle başlatın. Bir platformda kesilen metin, diğerinde tam görünebilir; araç bu farkı aynı anda görmenizi sağlar.

Twitter Card etiketleri, X’te (eski adıyla Twitter) bir bağlantı paylaşıldığında kartın nasıl görüneceğini belirler. En önemli etiket twitter:card’dır: summary_large_image büyük görselli, summary küçük görselli kart ister. X önce kendi etiketlerine bakar; twitter:title, twitter:description ve twitter:image bulunamazsa Open Graph etiketlerini kullanabilir. Araç, seçtiğiniz kart türüne göre hem etiketi üretir hem de X önizlemesini değiştirir.

Küçük görselli kartta görsel kareye yakın biçimde kırpılır, büyük görselli kartta ise geniş bir görsel kullanılır. Hangisini seçeceğiniz görselin yapısına bağlıdır: ürün fotoğrafı gibi kare görseller küçük kartta, geniş kapak görselleri büyük kartta daha iyi durur.

Her platform kartı kendi ölçü, kırpma ve yazı tipi kurallarıyla çizer ve sonucu önbelleğe alabilir. Bu araç tipik bir düzeni gösterir; kesin görünüm için sayfayı yayına aldıktan sonra platformların kendi paylaşım denetleyicileriyle test edin.

Araçtaki kartlar, etiketlerinizin tipik bir düzende nasıl duracağını gösterir; platformların sunucularında çizilen gerçek kartın birebir kopyası değildir. Kartlar ayrıca kullanıcının uygulama sürümüne ve cihazına göre de farklılaşabilir. Önizleme, yayın öncesi bariz sorunları (eksik görsel, kesilen başlık, boş açıklama) yakalamak için kullanılır.

Platformlar bir bağlantının kartını ilk paylaşımda okuyup bir süre saklayabilir. Etiketleri değiştirdikten sonra eski kartı görüyorsanız sayfa yanlış olmayabilir; önbellek eskimiş olabilir. Birçok platform, bir adresin kartını yeniden okutabileceğiniz bir paylaşım denetleyicisi sunar. Değişikliği yayına aldıktan sonra bu denetleyicilerde adresi yeniden okutun ve sonucu doğrulayın. Bunun ne kadar sürede yansıyacağı platforma göre değişir.

Önbellek yenileme için kesin bir bekleme süresi yoktur. Hızlı sonuç gerekiyorsa bağlantıya geçici olarak farklı bir parametre eklemek (örneğin ?v=2) bazı platformlarda yeni bir kart okutabilir; ancak bu, sayfanın kendi adresini ve paylaşım sayılarını etkileyebileceğinden kalıcı çözüm olarak önerilmez.

• Görsel adresini göreli yazmak; tam adres (https:// ile) gerekir.
• Giriş gerektiren ya da robotlara kapalı bir adresteki görseli kullanmak.
• Her sayfada aynı başlık ve görseli kullanmak.
• og:url alanına sayfanın gerçek adresinden farklı bir adres yazmak.
• Etiketi değiştirdikten sonra platformun önbelleği nedeniyle eski kartı görüp hata sanmak.

Etiketleri ekledikten sonra paylaşım denetleyicisinde sayfayı yeniden okutmak ve kartı gerçek bir paylaşımla karşılaştırmak, sorunların çoğunu yayına almadan yakalamanızı sağlar.

Blog yazılarında og:type değeri olarak article kullanılabilir; başlık yazının başlığı, görsel ise yazıya özgü kapak görseli olmalıdır. Ürün sayfalarında ürün adı, kısa bir açıklama ve temiz bir ürün görseli, paylaşımın güvenilir görünmesine yardımcı olur. Kategori ve liste sayfalarında ise sayfayı en iyi anlatan ortak bir görsel seçin. Her sayfa türü için bir şablon belirleyip içerik yönetim sisteminizde otomatik üretmek, binlerce sayfada tutarlılığı korumanın en pratik yoludur.