Twitter Card

Template default Blogger sudah friendly dengan media sosial Facebook dan Google+. Apabila kamu ngeshare postingan suatu blog Blogger ke Facebook atau Google+, akan nampak snippet atau rich object berupa gambar thumbnail, judul, dan deskripsi/ringkasan tulisan.



Sayangnya tidak demikian dengan Twitter.

Masih perlu memasang kode Twitter Card supaya Twitter bisa menampilkan snippet jikalau ada yang ngeshare artikel khususnya di blog Blogger.

The Open Graph protocol

Ini bukan salah satu judul film Mission Impossible yang dibintangi kakakku Tom Cruise, melainkan sebuah protokol yang memungkinkan halaman web menampilkan rich object (gambar, video, musik, dll) ketika dibagikan di media sosial.

Protokol inilah yang membuat postingan blog Blogger bisa menampilkan snippet ketika dibagikan di Facebook dan Google+.

Kalau kamu ngintip source blog Blogger, kamu bisa melihat Open Graph in action. Setidaknya ada empat properti yang disematkan Blogger. Ada og:url (link artikel), og:title (judul artikel), og:description (ringkasan artikel), dan og:image (gambar thumbnail yang terlihat di snippet).



Untuk og:image, Blogger mengambil gambar pertama di postingan.

Terus apa hubungannya Open Graph dengan Twitter Card?

Kalau kamu menyimak halaman ini, paling bawah, dijelaskan bahwa Twitter sudah support dengan Open Graph. Jadi bot Twitter bisa membaca properti og:title, og:description, dsb untuk ditampilkan sebagai snippet.

Hanya saja masih ada yang kurang, yaitu markup Twitter Card.

Twitter Card

Jadi begini lho cara paling simpel sedunia memasang Twitter Card di blog Blogger. Kamu hanya perlu menambahkan sebaris kode Twitter Card ini di bagian <head> Blogger.

<meta content="summary_large_image" name="twitter:card" />

Biar lebih afdol, nggak kependekan, tambahkan juga username Twitter pribadimu (sebagai penulis) plus username Twitter khusus blogmu.

<meta content="@ajiksip" name="twitter:creator" />
<meta content="@ajiksip" name="twitter:site" />

Di properti twitter:card, kamu bisa memilih antara summary_large_image atau summary saja. Kalau summary saja, Twitter akan menampilkan gambar thumbnail square kecil di sebelah kiri, sedangkan kalau large image, gambar previewnya besar di atas judul dan deskripsi.



Tampilan summary.



Tampilan summary large image.

Jangan lupa twitter:creator dan twitter:site diganti username personal dan khusus blogmu. Kalau blog ini sih nggak punya id Twitter sendiri, makanya kubuat sama.

Selanjutnya tinggal ngetes dan validasi di sini. Kalau sudah kelihatan dan valid, Twitter akan selalu menampilkan snippet kalau ada yang ngeshare tulisanmu di blog Blogger.

Selesai.

Cara ini hanya bekerja di template default atau turunannya, di template custom mungkin settingannya beda.

Tidak ada komentar:

Posting Komentar