Cara Memasang Snippet Twitter Cards Untuk Blogger

Cara Memasang Snippet Twitter Cards di Blogger - Fitur Twitter Cards sebenarnya sudah muncul sejak 2011, namun masih banyak para blogger atau pelaku bisnis online yang belum memanfaatkan fitur ini. Padahal apabila kita lihat dari pengaruhnya, fitur snippet ini sangat bisa mempengaruhi ketertarikan pengguna untuk mengunjungi postingan kita, ketika mereka melihat twit kita yang disertai fitur twitter cards sehingga sangat menarik. Pendek cerita, Twitter Cards ini dapat berfungsi sebagai schema opengraph milik Twitter untuk mengoptimasi tampilan twit melalui snippet dari sebuah halaman posting blog / website di Timeline.

Sebelum kita masuk ke pembahasan yang lebih dalam, sebaiknya pahami 7 jenis Twitter cards berikut ini dulu. Masing-masing cards memiliki fungsi dan tampilan yang berbeda, berikut ini diantaranya :

Summary Card, merupakan settingan bawaan atau default, meliputi 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]).
Summary Card With Large Image: Sama seperti diatas, tapi menggunakan gambar berukuran besar yang berada di atas snippet dibawahnya.
Photo Card: Hanya berisi gambar pilihan
Gallery Card: Snippet konten yang berisi kumpulan dari 4 gambar.
App Card: Snippet aplikasi mobile disertai link download nya
Player Card: Snippet untuk menampilkan konten video atau audio
Product Card: Snippet untuk menampilkan informasi produk.

Dari ke-7 jenis twitter cards, untuk konten biasa digunakan oleh blog hanya Summary card(dengan gambar thumbnail berada di samping) dan Summary card Large Image (gambar besar di atas snippet). Jadi kali ini saya hanya membahas kedua jenis snippet tersebut.

Cara Menambahkan Snippet Twitter Cards di Blogger

Kalau bagi para pemiliki website berplatform WordPress tentu hal mudah untuk menambahkan Twitter Cards sebab tersedia fitur Plugin. Kini sudah banyak blogger atau pebisnis online berplatform WP yang memanfaatkan dan mendapatkan keuntungan dari fitur ini. Tidak heran apabila hampir semua website / blog berbasis WordPress telah menggunakan Twitter Cards ini.

Namun bagaimana untuk blog berplatform blogger seperti saya? Tentu lebih kompleks untuk memasang twitter cards di blogger. Tapi jangan bingung, sebab beruntung pada kesempatan kali ini saya ingin berbagi kepada teman-teman mengenai cara memasang Twitter Cards guna mengoptimasi opengraph akun twitter blog kita :)

Summary Card

Snippet Summary ini akan menampilkan gambar thumbnail di samping kiri snippet postingan. Gambar thumbnail yang muncul adalah gambar pertama yang ada di halaman posting, sedangkan snippet akan berisi meta deskripsi dari tiap halaman posting. Berikut ini kode snippet Summary Card yang secara default sudah digunakan oleh semua akun twitter.

<meta content='summary' name='twitter:card'/>
<meta content='@ehpedia' name='twitter:site'/>
<meta content='@ehpedia' 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' />

Namun bagaimana jika postingan tidak memiliki meta deskripsi? Solusinya maka kita perlu menerapkan conditional tags. Saya sudah membuatnya dan silahkan terapkan pada template blog anda. Snippet ini akan menampilkan snippet khusus pada halaman posting. Apabila postingan tidak punya meta deskripsi, maka snippet akan menampilkan beberapa kata yang berasal dari paragraf awal postingan. Berikut ini kodenya :

<b:if cond='data:blog.pageType == "item"'>
<meta content='summary' name='twitter:card'/>
<meta content='@ehpedia' name='twitter:site'/>
<meta content='@ehpedia' 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>

Summary Card With Large Image

Namun lebih menarik lagi bila kita menerapkan snippet Summary Large Image. Dengan ukuran gambar thumbnail yang lebih besar dan berada diatas snippet akan membuat twit postingan kita menjadi lebih menarik dan asik dipandang ketika muncul di Timeline. Silahkan terapkan cara memasangnya berikut ini :

<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='@ehpedia' name='twitter:site'/>
<meta content='@ehpedia' 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>

Jika diterapkan maka hasilnya akan seperti ini :

Cara Memasang Snippet Twitter Cards Untuk Blogger

Silahkan pilih dan gunakan salah satu dari kedua jenis snippet diatas. Dan jangan lupa ubah beberapa poin berikut:

Ganti @ehpedia dengan akun twitter website / blog anda.
Ganti @ehpedia dengan akun pribadi penulis. Dalam hal ini boleh disamakan, seperti saya.
435 px adalah lebar gambar, biarkan saja jika menginginkan lebar gambar sesuai default.
375 px adalah tinggi gambar, boleh anda sesuaikan.

Cara Menambahkan Snippet Twitter Cards di Blogger

Untuk memasang Snippet Twitter Cards di Blogger caranya seperti berikut :

1. Masuk ke akun blogger anda > Template > Edit HTML

2. Cari (Ctrl+F) kode <head>, copy dan paste kode snippet pilihan anda tepat diatas kode </head>

3. Simpan template

Validasi Twitter Cards

Untuk mengecek apakah snippet sudah benar, silahkan gunakan fitur validasi Twitter. Fitur ini digunakan untuk melihat hasil tampilan snippet. Kunjungi halaman Card Validator : https://cards-dev.twitter.com/validator , lalu masukkan url salah satu postingan anda dan klik "Preview Card".

Demikian cara Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger. Semoga bisa membantu.