Add Meta Tags Twitter Cards for Blogger

Jejaring web twitter merupakan salah satu website yang sudah menjadi acuan dalam mempopulerkan sebuah blog. Mungkin agak terlambat Koben berbagi cara memasang meta tag twitter ke dalam template blogger. Proses dan cara mirip dengan pemasangan rich snippet microdata! Seperti kita ketahui bersama, blogger platform blogspot mempunyai tag conditional and code tersendiri. Oleh karena itu agar tampilan link post blog kita terbaca baik oleh site twitter, sebagai blogger yg baik harus memasang twitter cards markup tag ke dalam template blog. Perhatikan perbedaan tampilan link post kita di twitter pada screenshot berikut

Before	After

Sebelum melakukan snippet ada navigasi link bertuliskan Expand, yg jika kita klik akan keluar tombol retweet, reply & etc. Setelah dilakukan snippet meta tag twitter cards, link navigasi berubah menjadi View summary yg bila kita klik akan muncul headlines postingan sesuai berdasarkan description.

Untuk melakukan implement coded twitter cards ke blogger, silahkan sobat searching saja di google sudah bejibun resources yg ada :d Nih search on google Blog gue sendiri cocok dengan markup format seperti berikut

<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@AUTHOR_TWITTER'/>
<meta name='twitter:creator' content="@WEBSITE_TWITTER'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name='twitter:url' expr:content='data:blog.url'/>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<b:else/>
<meta name='twitter:url' expr:content='data:blog.homepageUrl'/>
<meta name='twitter:title' expr:content='data:blog.title'/>
</b:if>

<meta name='twitter: description' expr:content='data:blog.metaDescription'/>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='SCREENSHOT_IMAGE_URL' name='twitter:image'/>
</b:if>

Gantikan:
@AUTHOR_TWITTER dengan ID account twitter masing-masing.
SCREENSHOT_IMAGE_URL dengan link gambar screenshot/favicon blog kalian masing²

Kemudian save perubahan template. Setelah itu pergilah ke halaman card validator (buka menggunakan browser chrome, pada mozilla fitur preview tidak berjalan mulus) Bila pertama melakukan ini semua kalian akan dihadapkan pada pemilihan Card Catalog. Pilihlah dengan kesukaan yg mendalam :)) Di bawah tulisan Card Validator pilih opsi Validate & Apply.

Lakukan test link blog di kotak yg tersedia. Jika ada tampilan bulatan kuning/merah, dipastikan kode snippet yg dilakukan tadi belum singkron dengan web twitter. Oleh sebab itu resources kode berjibun, pilihlah yg cocok dengan karakter template blog masing²Beberapa link resource berguna

• dev.twitter.com/docs/cards
• dev.twitter.com/docs/cards/markup-reference
• www.bloggerhow.com/2012/07/implement-twitter-cards-blogger-blogspot.html
• www.ajibanda.com/2013/01/adding-twitter-card-meta-tags-to-your-blogspot-blogs.html

Good luck :)
Happy snippet \m/