Memasang Twitter Card untuk blogspot atau blogger custom domain

Seorang teman bertanya mengenai bagaimana menampilkan snippet artikel blog saat berbagi melalui Facebook. Jawaban tentu akan berbeda tergantung apa CMS (Content Management System) yang digunakannya, Wordpress, Blogger, Joomla atau lainnya.

Untuk Wordpress, Joomla, Drupal, Mambo dan lain sebagainya kemungkinan besar dengan menginstal plugin SEO yang tepat akan menjawab problem pada Open Graph tags baik untuk penggunaan di Google+, Pinterest, Facebook dan lainnya. Lalu bagaimana dengan pengguna Blogspot atau blogger custom domain seperti blog saya?

Secara default Blogspot/Blogger tidak memiliki masalah dengan open graph, namun jika kita menggunakan template atau theme custom yang banyak tersedia secara online dan bagus-bagus, masalah dapat saja terjadi karena template tersebut ternyata tidak memiliki fitur SEO.

Jika masalah tersebut terjadi kepada pengguna blogspot/blogger custom domain, kita bisa coba dengan cara menambahkan script secara manual melalui menu "edit HTML". Tambahkan script html ini:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.snippet'>
<meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if>
tepat di atas kode
<data:post.body/>
Atau masih banyak cara lainnya tergantung tema yang kita gunakan. Sertakan keyword "Meta Tag Open Graph" untuk mencari solusi serupa jika solusi di atas tidak berlaku untuk blog/website Anda. :)

Lalu bagaimana jika pengguna blogspot atau blogger custom domain ingin hal serupa terjadi saat berbagi link artikel postingan blog di timeline twitter?. Untuk twitter istilah "Open Graph" yang digunakan oleh Google+ dan Facebook dikenal dengan istilah "Twitter Card".

Soal twitter card bisa dibaca di https://dev.twitter.com/cards/overview
dari halaman itu dijelaskan bahwa Twitter memiliki 7 jenis cards, yang masing-masing memiliki fungsi dan ditampilkan dengan cara berbeda:
  1. Summary Card: Sifatnya default atau merupakan setting bawaan, didalamnya 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 semuanya dalam bentuk shortlinknya twitter).
  2. Summary Card With Large Image: Sama seperti di atas, tapi menggunakan gambar yang lebih besar, berada di atas, diikuti snippet lain dibawahnya.
  3. Photo Card: Isinya hanya gambar yang diunggulkan (featured image)
  4. Gallery Card: Snippet untuk konten yang berisi galeri gambar, yang ditampilkan di snippet ada 4 gambar.
  5. App Card: Snippet aplikasi mobile lengkap dengan link downloadnya.
  6. Player Card: Snippet untuk menampilkan konten audio/video.
  7. Product Card: Snippet yang dioptimasikan untuk menampilkan informasi produk.
Dari ke 7 jenis di atas, yang umum digunakan pada blog hanya dua, yaitu Summary (dengan gambar thumbnail berada di samping) dan Summary Large Image (gambar besar di atas snippet). Intinya Twitter Card memiliki fungsi yang sama dengan Open Graph, yaitu memberikan sedikit informasi tentang sebuah halaman  web di linimasa Twitter saat alamat link web atau artikel tersebut dibagikan di timeline. Dengan begitu, URL atau halaman yang di-tweet memiliki content yang lebih kaya dibanding dengan tweet yang membagikan halaman url web tanpa menggunakan Twitter Card.

Contoh penggunaan Twitter Card:
Memasang Twitter Card untuk blogspot atau blogger custom domain

Beberapa blog memberikan tips/tutorial untuk memasang Twitter card, salah satunya di SINI atau di SINI untuk yang berbahasa Inggris. Saya malas posting ulang, jadi sila klik saja untuk melihat tutorialnya :) atau silahkan mencari tutorial di blog lain, lalu ikuti caranya. Setelah memasang script twitter card sebagaimana dijelaskan pada postingan tutorial tadi, tidak ada salahnya untuk menguji sebuah link blog Anda melalui card Validator di https://cards-dev.twitter.com/validator

Cara mengujinya: login ke Akun twitter Anda lalu masukan salah satu url postingan blog Anda lalu klik tombol Preview Card. Kemudian silahkan lakukan Twitter Card approval (biasanya akan muncul tombol putih) untuk memberikan informasi hubungan akun Twitter Anda dengan website. Silahkan isikan data-data yang diminta kemudian klik Submit jika diminta.

Bagaimana jika cara tersebut tidak berhasil menampilkan twitter card di timeline twitter kita?

Pertama, jangan terburu-buru, jika Anda baru saja melakukan validasi maka Twitter memerlukan waktu untuk menampilkan semua summary pada Tweet postingan-postingan blog Anda, jadi silahkan nikmati kopi Anda sambil menunggu Twitter bekerja.

Kedua, periksa URL rel canonical di script template blogspot Anda, silahkan tambahkan script ini jika belum ada: <link expr:href='data:blog.url' rel='canonical'/> di bagian awal script template.

Ketiga, Jika Anda meletakkan script Twitter Card di atas kode </head> (sebagaimana pada tutorial pada blog Kurnia Septa dan Bloggerhow tadi) maka pindahkan script tersebut tepat di bawah kode: <b:includable id="post" var="post"> tanpa menghapus bagian apapun sesudahnya, lalu save dan periksa kembali.

Dengan 3 tips di atas semoga blogspot/blogger custom domain Anda sudah dapat menampilkan Twitter Card di timeline twitter.

Salam.

16 komentar

avatar

Mantap sekali Mas Bisot hahaha, nice share

avatar

Halooo, Kak! Mau jadi bagian tim jelajah Kalimantan GRATIS dan dapetin MacBook Pro? Ikuti lomba blog "Terios 7 Wonders, Borneo Wild Adventure" di sini http://bit.ly/terios7wonders2015 #Terios7Wonders

Jangan sampai ketinggalan, ya!

avatar

@Salman: Sila dicoba mas :)
@Fisrt Name: thx infonya.

avatar

Artikel yang bermanfaat
Saya sudah coba gan, tap error di twitter deskripsinya dan tidak ada tulisan Twitter Card approval ( di bawah tombol Preview Card ). Kira2 dimana kesalahannya ya gan?
sebelum dan sesudahnya thanks gan!
salam kenal

avatar

Deskripsi akan mengikuti deskripsi di blog, approval gak penting2 banget, intinya Validator hanya untuk melihat akan seperti apa yamng akan ditampilkan oleh twitter. Saya sudah mengikuti tutorial macam-macam tapi yang berhasil di blog saya tutorial dari link ini . Silahkan dicoba2 mana yg berhasil gan :)

avatar

punya ane kok gak muncul ya,,, berapa lama kira-kira diapprove mas?

avatar

Ikuti tutorial yang di sini pak, Saya juga pake yang ini baru bisa.

avatar

ternyata sekarang sudah muncul pak,,,makasih atas kesediaannya memberikan tips dan saran buat ane mas...sukses selalu buat mas...

avatar

thank's gan artikelnya sangat bermanfaat

avatar

Sama-sama gan, sukses terus yah :)

avatar

gampang ternya ya pasang custom domain

avatar

Siiip, lanjut gan :)

avatar

Satu lagi ilmu dri blog agan nih siap di praktekkan lah buat di blog saya hehehe thanks gan

Klik untuk komentar