Ads Top

Blogger`da Open Graph Ayarları


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.

Kısaca Open Graph 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.

İ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.


4 yorum:

  1. Teşekkürler Eser. Uzun zamandır aklımda olan fakat araştırmaya vakit ayıramadığım bir konuydu. Siteme hemen uyguluyorum.

    YanıtlaSil
  2. Rica ederim Sezer, ben de uzun zamandır blogla ilgilenmiyordum, biraz düzenlemeye gittim, bu konuda da çok bilgi yoktu, yerli kaynaklada, yabancı kaynaklarda da 1. ve 2. versiyonu yaygındı, bu kodlar 3. versiyon olarak geçiyor, en güncelini buldum, uygulaması da çok kolay güle güle kullan.

    Aslında "Arama Açıklaması" girilmeyen yazının yazı başlığını değil de yazının ilk paragrafından bir kısmını aldırabilirmiyim diye uğraştım ama bloggerda mümkün olmadığını anladım.

    YanıtlaSil
  3. arama açıklaması nereye yazılıyor? etiketler nasıl düzenleniyor? hiçbiri açıklanmamış. kopyala yapıştır haberler yaparken en azından eksik yerleri de tamamlayın!

    YanıtlaSil
  4. Neyi kopyala yapıştır? Bilip bilmeden adını bile vermeden sallıyorsun.
    Bak yazının başında ne diyor? İyice oku ilk paragrafı. Arama açıklaması vs.. gibi basit konuları tonlarca kopyala yapıştır yaparak anlatan siteler var oralardan öğrenebilirsin.

    YanıtlaSil

Blogger tarafından desteklenmektedir.