Menambahkan & Memperlihatkan Snippet Twitter Cards Untuk Blogger

cara memasang twitter cards blogger lengkap Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger

Twitter Cards diperkenalkan Twitter di Awal 2012 lalu. Sudah banyak yang menggunakan sehingga banyak pula yang mendapat laba dari Twitter Cards ini. Memahami Twitter Cards nyaris sama dengan mengetahui Schema yang selama ini kita pakai untuk mengoptimasi performa snippet konten di search engine (rich snippets). Sosial media lain menyerupai Facebook dan Google+ misalnya, sudah lama mengandalkan meta opengraph untuk memperlihatkan snippet halaman situs web atau konten situs web di dalam timelinenya. Twitter Cards sedikit bergantung pada opengraph walaupun memiliki instruksi snippet sendiri. Disusul kemudian oleh Pinterest dan beberapa platform social media lain yang juga mengandalkan opengraph.

Nah, alasannya platform lain menyerupai WordPress memiliki banyak sekali plugin untuk menyertakan opengraph dan Twitter Cards, maka memperlihatkan snippet Twitter Cards yakni hal gampang. Tidak heran jikalau banyak sekali situs web dan blog berbasis WordPress dapat dikatakan 90% sudah menggunakan fitur ini. Sedangkan untuk platform Blogger, alasannya mesti menjalankan hack tersendiri, belum banyak yang menerapkannya. Dalam peluang ini saya ingin menyerukan, cieee.. mengajak kawan semua untuk mengoptimasikan kontennya di Twitter dengan lebih baik, salah satunya dengan Twitter Cards ini.

Jenis Twitter Cards

Twitter memiliki 7 jenis cards, yang masing-masing mempunyai faedah dan ditampilkan dengan cara berbeda:

Summary Card: Sifatnya default atau ialah setting bawaan, dii dalamnya ada judul, deskripsi, gambar thumbnail, akun terkait (link akun twitter untuk situs dan penulis), dan link atribusi (link pada judul dan di bawah snippets [view on the web], meski seluruhnya dalam bentuk shortlinknya twitter).
Summary Card With Large Image: Sama menyerupai di atas, tetapi menggunakan gambar yang lebih besar, berada di atas, dibarengi snippet lain di bawahnya.
Photo Card: Isinya cuma gambar yang diunggulkan (featured image)
Gallery Card: Snippet untuk konten yang berisi galeri gambar, yang ditampilkan di snippet ada 4 gambar.
App Card: Snippet aplikasi mobile lengkap dengan link downloadnya
Player Card: Snippet untuk memperlihatkan konten audio/video
Product Card: Snippet yang dioptimasikan untuk memperlihatkan pemberitahuan produk.

Dari ke 7 di atas, Untuk konten yang biasa dijumpai pada blog Blogger cuma dua, yakni Summary (dengan gambar thumbnail berada di samping) dan Summary Large Image (gambar besar di atas snippet). Kaprikornus di sini saya cuma akan diskusikan dan berikan snippet untuk kedua jenis itu.

Menambahkan Kode Snippet Twitter Cards di Blogger

Meskipun tidak secara otomatis, untungnya Blogger memiliki banyak sekali instruksi otomatis (XML tags) tersendiri untuk print (mencetak) banyak sekali pemberitahuan konten, misalnya judul, deskripsi, gambar post, dan lain sebagainya (meta exp:content="xmlTags"). Selain itu Blogger juga memiliki Conditional Tags yang bisa dipakai dan dipraktekkan pada jenis hack ini.

Kode snippet dasar yang bisa dipakai yakni (default Summary Card):

<meta content='summary' name='twitter:card'/>
<meta content='@bukarahasiablog' name='twitter:site'/>
<meta content='@ahkhoazmi' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />

Snippet di atas sudah cukup untuk dapat memperlihatkan snippet post dengan jenis Summary Card, yakni dengan thumbnail di samping.

Tapi bagaimana dengan yang tidak punya meta deskripsi pada post? Bagaimana jikalau ingin mengkhususnya pada halaman post saja? Nah, kita butuh conditional tags di sini. Kaprikornus kita kembangkan. Perhatikan pada bab meta description juga.

<b:if cond='data:blog.pageType == "item"'>
<meta content='summary' name='twitter:card'/>
<meta content='@bukarahasiablog' name='twitter:site'/>
<meta content='@ahkhoazmi' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
</b:if>

Snippet di atas yakni untuk memperlihatkan snippet khusus halaman pos, dan jikalau tidak ada (else) meta deskripsi pada pos (ditambahkan lewat fitur meta deskripsi per post), akan ditampilkan beberapa kata dari paragraf permulaan pos. Gunakan snippet ini jikalau ingin memperlihatkan dalam bentuk snippet sederhana.

Untuk yang lebih kompleks, kita dapat menggunakan banyak sekali conditional tags milik Blogger. Gunakan snippet berikut untuk memperlihatkan snippet dalam bentuk Summary Large Image. Akan sungguh kompleks dan panjang untuk dijelaskan, jadi silahkan eksklusif dipakai atau dapat dipelajari sendiri. Hehe...

<b:if cond='data:blog.pageType == "item"'>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@bukarahasiablog' name='twitter:site'/>
<meta content='@ahkhoazmi' name='twitter:creator'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='435' name='twitter:image:width'/>
<meta content='375' name='twitter:image:height'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>

Contoh hasilnya:

Silahkan gunakan salah satu dari kedua jenis snippet di atas. Pastikan untuk merubah beberapa poin berikut:

Ganti @bukarahasiablog dengan akun blog/situs anda.
Ganti @ahkhoazmi dengan akun pribadi (penulis), jikalau sama, memiliki arti kedua akun dapat ditulis sama.
435 adalah nilai lebar gambar (dalam piksel), ini ukuran default sesuai lebar halaman konten twitter. Biarkan jikalau ingin lebarnya sesuai defaultnya.
375 adalah nilai tinggi gambar (dalam piksel), dapat anda ubah sesuka hati.

Cara Menambahkan Via Edit HTML Blogger

1. Masuk Dashboard > Template > Edit HTML

2. Cari / Ctrl+F <head>, letakkan (paste) snippet salah satu instruksi snippet yang anda pilih di bawah <head>, atau dapat di bawah meta tags lain yang sudah anda tambahkan,

3. Save.

Validasi Twitter Cards

Untuk menyaksikan apakah snippet yang anda tambahkan sudah sempurna dan benar, gunakan fitur validasi Twitter. Fitur ini dahulu juga dipakai untuk mendaftarkan situs yang sudah mengandung instruksi snippetnya, tetapi sekarang tidak perlu lagi. Setiap halaman web yang sudah mengandung snippet Twitter Cards otomatis tervalidasi. Fitur ini sekarang dipakai untuk menyaksikan hasil performa snippet. Silahkan datangi halaman Card Validator, masukkan url salah satu post dan klik "Preview Card".

Catatan:

1. Sebaiknya fitur meta deskripsi setiap pos diaktifkan dan diisi biar snippet deskripsi tidak terpotong (tidak mengambil dari teks permulaan pos).

2. Jika menggunakan summary large image, tetapkan ukuran resolusinya tidak terlampau kecil biar gambar tidak pecah.