Open Graph Nedir?

Open Graph Nedir?

Daha geniş kitlelere ulaşmak için sosyal medya harika bir platform. İçerik paylaşımlarında veya e-ticaret siteleri için ürün paylaşımlarında iyi bir etkileşim almanın en önemli noktalarından bir tanesi paylaşılan gönderinin güzel görünmesi ve ilgi çekici olmasıdır. Sosyal medyadaki bu paylaşımlar aslında içeriğinizin ön izlemesi gibidir. Zengin ön izlemeler bir şeyleri pazarlamak için oldukça önemlidir.

Open graph, Facebook, Linkedin, Twitter vb. sosyal platformlarda kullanıcı verileri ve bir web sitesi arasında entegrasyon sağlar. Open graph meta etiketlerini sayfanızın içeriğine ekleyerek, sayfanız sosyal mecralarda paylaşıldığında sayfanızın hangi öğelerini göstermek istediğinizi belirleyebilirsiniz. Kullanılan open graph etiketleri, dönüşümleri ve tıklama oranlarını büyük ölçüde etkileyebilir.

Facebook için eklenen open graph etiket kodları Linkedin için de geçerli olacaktır. Ancak Twitter’da paylaşılan gönderilerde güzel bir görünüm elde etmek için Twitter Card kodlarını eklemek gerekir.

Facebook Open Graph Etiketleri

Open graph kodlarının web sayfalarının <head> bölümüne yerleştirilmesi gerekir. Facebook open graph görsel boyutlarının yaklaşık 1.91: 1 en boy oranıda 1200 x 630 piksel olması öneriliyor. Open graph meta etiketleri için gerekli başlıklar aşağıdaki gibidir.

  • og: title – İçeriğin başlığı. Koddaki geleneksel meta title etiketi ile benzer bir amaca hizmet eder. Bu bölümde genellikle web sitesinde kullanılan title etiketinin aynısı kullanılır.
  • og: type – Blog paylaşımını, videoyu, resmi vb. paylaşılan linkin türünü belirtmek için kullanılır.
  • og: description – İçeriğin tanımlandığı yer. Koddaki meta description etiketi ile benzer bir amaca hizmet eder. Bu bölümde genellikle web sitesinde kullanılan description etiketinin aynısı kullanılır.
  • og: url – Paylaşılan sayfanın url’ini belirtmek için kullanılır.
  • og:image – Sayfa paylaşıldığında belirli bir küçük resmin gösterileceğini yer. Kullanılan görselin her zaman içeriğin öne çıkmasına yardımcı olacağını unutulmamak gerekir. 

Genel Örnek:

<meta property=”og:title” content=”Başlık” />

<meta property=”og:type” content=”Website” />

<meta property=”og:url” content= ” https://www.domain.com/ (paylaşılan sayfa url’i)”>

<meta property=”og:description” content= “Meta açıklama”/>

<meta property=”og:image” content=”Uygun boyutlu ürün görseli linki ” />

Facebook Open Graph Debugger / Facebook Debugging

Bütün kodları doğru eklediniz ancak, Facebook’ta linki paylaştığınız zaman istediğiniz gibi gözükmüyor mu? Bu durumun sebeplerinden bir tanesi Facebook’un cache tutmasından kaynaklı olabilir. Open Graph etiketi sayfalara eklendikten sonra düzgün çalışması için önce Facebook’taki open graph debugger kullanılarak cache’lerin silinmesi gerekiyor. “Facebook Debugger”, Facebook’un sitenizdeki her sayfadan hangi bilgileri aldığını kontrol etmenizi sağlayan bir servis.

Facebook cache’leri silmek için Facebook debugger https://developers.facebook.com/tools/debug/ sayfasında kontrol etmek istediğiniz sayfanın URL’sini yapıştırın.

Ardından Debug butonuna tıklayın, Facebook’un sayfa içeriğinden hangi bölümler

aldığını göreceksiniz. Paylaşım mesajında ​​Facebook’un seçtiği Open Graph elementlerinin yer aldığı bir liste olacaktır. 

Eğer bütün etiketlerin önünde veri yoksa iki olası neden vardır:

  1. Facebook siteden hiçbir şey almamış olabilir.

Bu yeni siteler için tipik bir durumdur. Bu durumda bir kez daha Debug düğmesine basmanız yeterlidir ve Facebook önbelleği yenilenecektir. Bu, Facebook’un sitenizde açık grafik etiketleriyle belirlediğiniz verileri alacağı anlamına gelir.

  1. Sitenizde Open Graph yok veya doğru ayarlanmamış olabilir.

Facebook önbelleğini yenilemek işe yaramazsa, sitenizdeki etiketlerde muhtemelen bir sorun vardır. Etiketler doğru ayarlanmamış ya da hiç etiket olmayabilir.

Not: Og etiketlerini Facebook için ayarladığında, çoğu sosyal ağ için geçerli olur. 

Twitter Kartı

Facebook’un open graph etiketleri gibi, Twitter Kartları da tweet kalabalıklarından sıyrılmaya ve 140 karakterlik tweet için bazı ek içerikler oluşturmanızı sağlar. Twitter Card kodlarının web sayfalarının <head> bölümüne yerleştirilmesi gerekir. Twitter’da linki yapıştırdığınızda Facebook veya Linkedin’daki gibi bir ön izleme göremezsiniz. Doğru çalışıp çalışmadığını anlamanız için linki paylaşmanız gerekir. Kartlı yayınlar otomatik olarak görünmez, ancak tweetin altına küçük bir “Özet görüntüle” düğmesi ekler. Düğme tıklandığında ise paylaşılan sayfanın kullanışlı bir özeti (Twitter Kartı) gösterilir.

  • Twitter:card – Bu etiket, og: type ile benzer şekilde çalışır. Paylaştığınız içeriğin türünü açıklar. Seçebileceğiniz 7 seçenek vardır. Bunlar; özet, fotoğraf, video, ürün, uygulama, galeri ve “büyük versiyon” özeti.
  • Twitter:title – Yazınız için koyu olarak gösterilecek başlığı belirtir. Tweet’inizdeki aynı metni tekrar etmekten kaçınmak akıllıcadır. Twitter bu bölümü 70 karakterle sınırlandırıyor bu yüzden yazılacak metnin dikkatli seçilmesi gerekir.
  • Twitter:description – İçeriğin tanımlandığı yer. Og etiketlerinde olduğu gibi, anahtar kelimelerinize odaklanmayın, çünkü bunlar SEO’nuz için önemli değildir. Twitter bu bölümü 200 karakterle sınırlandırıyor.
  • Twitter:url – Paylaşılan içeriğin URL’sini gösterir. 
  • Twitter:image – Tweet paylaşıldığında belirli bir küçük resmin gösterileceğini yer. Twitter kartında küçük veya daha büyük resme sahip iki kart seçeneği vardır. Büyük seçenek için resmin, en az 280×150 piksel çözünürlüğe sahip olduğundan ve dosya boyutunun 1 MB’dan fazla olmadığından emin olun. Facebook küçük resmiyle aynı numara kullanılabilir. Mesajı anlatmak için resme bir metin eklenebilir.

Genel Örnek:

<meta name=”twitter:card” content=”Summary” />

<meta name=”twitter:title” content=”Başlık” />

<meta name=”twitter:description” content=”Meta açıklama” />

<meta name=”twitter:url” content=”https://www.domain.com” />

<meta name=”twitter:image” content=”https://www.domain.com/image-name.jpg” />

Twitter Card Onayı

Twitter Kartlarından tam olarak yararlanmadan önce, sayfanız için Twitter’dan onay istemeniz gerekiyor. Twitter Kart Validator’ü kullanarak bu durumu kolayca çözebilirsiniz. Twitter Card Validator, Facebook Debugger ile tamamen aynı mantıkta hareket eder. Twitter Card Validator https://cards-dev.twitter.com/validator aracılığı ile Twitter kartınızın ön izlemesini veya kodunuzda hata varsa görebilirsiniz.

Yorum Yap

E-posta adresiniz yayımlanmayacak. * ile işaretli alanlar zorunludur.