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

Facebook ve Google+ da yazımızı paylaşırken, paylaştığımız içeriğin özeti otomatik olarak Facebook ve Google+ da gösteriliyor. Tabi Facebook için Open Graph ayarlarını yapmış olmamız gerekir. Google + için böyle bir ayar yapılması gerekmiyor.

Twitter'da yazımızı paylaşıldığında, içeriğin özeti paylaşılan twitte gözükmüyor, paylaşılan içerik sadece link olarak gözükür.
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 head kodunun hemen altına, 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 girin, sonra bloğumuzdan herhangi bir yazının linkini kopyalayıp Validator sayfasındaki URL girilecek alana yapıştırıp Preview Cards butonuna tıklayın.
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 bloğunuza 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.

8 yorum:

  1. Bu paylaşım attığımızda otomatik paylaşacak mı yoksa twitter'a girip bizim eklememiz mi gerekecek ?

    YanıtlaSil
    Yanıtlar
    1. Otomatik paylaşım olmuyor, sizin Twitter'da paylaşım yapmanız lazım

      Sil
  2. Merhaba; Web sitemde twitter card kullanamıyorum. Metaları doğru yapmama rağmen twitlerde resim ön bilgi vs. çıkmıyor. Konu hakkında yardımcı olabilir misiniz?

    site adresi fitnesscim.com

    YanıtlaSil
    Yanıtlar
    1. Merhaba,
      Web sitenizde bulunan,
      ile
      arasındaki kodları yazıdaki kodlarla değiştirmeniz gerekir

      Sil
  3. Teşekkr ederim sorunu sayenizde çözüm...

    YanıtlaSil
  4. Çok teşekkürler. Uzun zamandır arıyordum bunu, uyguladım hemen, oldu. Güzel anlatmışsınız.

    YanıtlaSil
  5. Çok teşekkürler, işime yaradı.

    YanıtlaSil

Yorum yaparak katkıda bulunabilir ve yazının daha fazla kişiye ulaşmasını sağlayabilirsin.

Blogger tarafından desteklenmektedir.