Ads Top

Blogger İçin Twitter Cards Ayarları Nasıl Yapılır

blogger twitter cards

Facebook ve Google+ da yazımızı paylaşırken, paylaştığımız içeriğin özeti otomatik olarak Facebook ve Google+ da gösteriliyordu. Tabi Facebook için Open Graph ayarlarını yapmış olmamız gerekiyor. Google + için böyle bir ayar yapmanıza gerek yok.

Twitterda yazımızı paylaşmak istediğimizde içeriğimizin özeti twitte gözükmüyordu, paylaştığımız içerik sadece link olarak gözüküyordu.
Aslında bir kaç senedir var olan bu özelliğin bloggerda da kullanılabilir olduğunu ben yeni keşfettim, araştırdığımda da blogger kullananlar arasında pek bilinir ve yaygın olmadığını fark ettim ve bunu yazıyı yazmaya karar verdim.

Peki tam olarak nedir Bu Twitter Cards?
Twitter Cards özellikle blog/site sahipleri için Twitter tarafından geliştirilen bir özelliktir.
Paylaşılan bağlantının/yazının/linkin; yazı başlığını, yazının içeriğinden bir kısmını ve yazıya ait görseli otomatik olarak Twitter'da aşağıdaki twitte gördüğünüz gibi özet şeklinde gösterilmesidir.


Bloğunuza Twitter Cards özelliğini eklemek oldukça basit bunun için aşağıdaki işlemleri yapmanız yeterli olacak.


  1. İlk adım olarak, Blogger yönetim panelinizde, Şablon > HTML'yi Düzenle diyoruz.

  2. Daha sonra açılan sayfada ctrl+f ile arama yapıp <head> kelimesini aratıyoruz ve aşağıdaki kodu resimde gördüğünüz gibi yapıştırıyoruz

  3.     <!-- twitter meta card -->
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
        <meta expr:content='data:blog.pageName' name='twitter:title'/>
        <b:if cond='data:blog.postImageUrl'>
          <meta content='summary_large_image' name='twitter:card'/>
          <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
          <b:else/>
          <meta content='summary' name='twitter:card'/>
          <b:if cond='data:blog.postImageThumbnailUrl'>
            <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
        </b:if>
    


  4. Yukarıdaki kodun hemen altına da aşağıdaki kodu ekleyeceksiniz, ancak @kullanıcıadınız yazan yere twitter kullanıcı adınızı yazınız.

  5.   <!-- twitter card username meta -->
        <meta content='@kullanıcıadınız' name='twitter:site'/>
        <meta content='@kullanıcıadınız' name='twitter:creator'/>


  6. Her iki kodu da eklediğinizde aşağıdaki gibi olması gerekiyor, burada ben kendi kullanıcı adım olan @hayalmeyal yazdım , siz de kendi kullanıcı adınızı yazmayı unutmayın.



  7. Daha sonra <data:post.body/> kodunu aratıyoruz, muhtemelen birden fazla bulacaksınız, bu durum temanıza göre değişkenlik gösterebilir ve yine muhtemelen en sonuncusunun hemen üstüne aşağıdaki kodu eklemeniz gerekiyor.

  8. <meta expr:content='data:post.snippet' name='twitter:description'/>
    


  9. Benim kullandığım temada aşşağıdaki gibi bir görüntü oluştu, sizde de benzeri olacaktır.



Tüm işlemlerimiz bu kadar, şimdi sıra geldi kontrol etmeye.

İlk önce Twitter Validator adresine giriyoruz, sonra bloğumuzdan herhangi bir yazının linkini kopyalıyoruz ve Validator sayfasındaki URL girilecek kısıma giriyoruz ve Preview cards butonuna tıklıyoruz.
Kodları hatasız sitenize eklediyseniz aşağıdaki ekran görüntüsünde olduğu gibi bir görüntüyle karşılaşmanız gerekir.


Umarım işinize yarar ve sorunsuzca blogger blogunuza ekleyebilirsiniz, yaşayacağınız herhangi bir problem için yorum kısmından sorununuzu iletebilirsiniz, en hızlısından size geri dönüş yapıyor olacağım.

Hiç yorum yok:

Blogger tarafından desteklenmektedir.