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://cards-dev.twitter.com/validator
dari halaman itu dijelaskan bahwa Twitter memiliki 7 jenis cards, yang masing-masing memiliki fungsi dan ditampilkan dengan cara berbeda:
- 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).
- Summary Card With Large Image: Sama seperti di atas, tapi menggunakan gambar yang lebih besar, berada di atas, diikuti snippet lain dibawahnya.
- Photo Card: Isinya hanya 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 menampilkan konten audio/video.
- 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:
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.