Ads Top

Blogger`da Open Graph Ayarları

Open Graph Nedir; web sitenizdeki yazı başlığı, fotoğraf, url vs.. gibi parçaları Facebook, twitter, google+ gibi sosyal medya paylaşımlarında, bu sosyal medya sitelerinin dilinden konuşarak, yazınızdaki resmi, yazı başlığını, yazarı vs.. tanımasını sağlamak.

Blogger alt yapısı kullanan sayfalarınızda Open Graph ayarlarını en kısa, basit ve anlaşılır şekliyle kestirmeden anlatmaya çalışacağım. Zaten böyle bir konuyu arayıp buraya kadar geldiyseniz bazı kodların ne işe yaradığını nasıl düzenleyeceğinizi biliyorsunuzdur diye tahmin ediyorum.
Uzun zamandır kodlarla ilgili değişiklik yapıp yazı yayınlamamamıştım.

İlk önce şablon düzenleyiciden şu kodu aratıp buluyorsunuz. En üstte olur genelde.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'    >


ve bununla değiştiiriyoruz.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>


Bu işlemi yaptıktan sonra <head> tagından hemen sonra aşşağıdaki kodları ekliyoruz.
<!-- facebook open graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  <meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  <b:elseif cond='data:blog.postImageThumbnailUrl'/>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>

Open Grap Protokolünde kullanılan terimlerin anlamları
og:url - Yazınızın bulunduğu bağlantı yolu.
og:title - Yazınıza ait başlık.
og:description - Yazınıza ait kısa açıklama. (Eğer Arama Açıklaması girilmişse bunu çeker)
og:type - Yazınızın tipini belirtir.
og:image - Yazınıza ait görselin yolunu belirler

Yazılarınızı eklerken "Arama Açıklaması" kısmına ne yazarsanız, ilgili yazınız sosyal medyalarda paylaşılırken, bu kısmı çekip yazıdan bir paragraf olarak gösterir.
Aşşağıda örnek olarak verdiğim yazı şu konuya ait, konunun içeriğinin başlangıç paragrafı farklı olsa da "Arama Açıklaması" kısmına girdiğim metni alıyor.

open graph blogger

Eğer arama açıklaması girmediyseniz, yazı başlığını yazı içeriği olarak tekrar edecektir.
Örneğin şu yazımda "Arama Açıklaması" girmediğim için yazı başlığını tekrar ediyor.

Hiç yorum yok:

Blogger tarafından desteklenmektedir.