Cara memasang Twitter Card di Blogger

29 September 2018


Cara paling simpel memasang Twitter Card di Blogger.

Kupikir paling sederhana yang pernah ada, soalnya aku lihat tutorial di blog-blog lain kodenya panjang-panjang banget. Padahal sebaris kode saja sebenarnya sudah cukup.


The Open Graph protocol


Sebelum membahas Twitter Card, aku ingin sedikit mengulas tentang protokol Open Graph.

Jadi Open Graph memungkinkan halaman website menampilkan rich object di media sosial. Aslinya diciptakan oleh Facebook, dengan tujuan supaya halaman website yang dibagikan di Facebook punya fungsionalitas yang sama dengan obyek lain di Facebook. Istilahnya biar bisa melebur dengan environment Facebook.

Untuk mengaktifkan, cukup dengan menambahkan metadata. Properti yang umumnya digunakan antara lain:

  • og:title, untuk menampilkan judul
  • og:type, untuk menampilkan tipe obyek, bisa galeri, musik, video, artikel, dan lain-lain
  • og:image, untuk menampilkan gambar thumbnail atau preview
  • og:url, untuk menampilkan url atau permalink
  • og:description, untuk menampilkan teks ringkasan

Blogger secara default sudah menyertakan meta tag Open Graph. Bisa kamu lihat di source code di halaman beranda atau postingan Blogger, setidaknya ada empat properti meta Open Graph yang otomatis diciptakan oleh Blogger, antara lain: og:title, og:image, og:url, dan og:description.

Blogger menyertakan Open Graph supaya ketika postingan di-share ke Facebook atau Google+, bisa menampilkan snippet atau kartu ringkasan postingan, dengan gambar, judul, ringkasan, dan permalinknya.

Lalu apa hubungannya dengan Twitter Card?

Beruntung, Twitter bisa membaca metadata Open Graph. Dijelaskan di halaman ini, Twitter awalnya akan mencari apakah meta Twitter Card tersedia. Kalau tidak ada, maka Twitter akan mengambil data title, image, url, dan description dari Open Graph.

Itulah kenapa tidak perlu meta Twitter Card panjang-panjang.


Cara memasang Twitter Card


Hanya butuh satu baris meta Twitter Card untuk bisa menampilkan Twitter Card di Blogger, lengkap dengan propertinya.

Cukup sebaris kode ini:

<meta content='summary' name='twitter:card'/>

Diletakkan di header, di antara <head>…</head>.

Properti bisa diganti antara summary atau summary_large_image saja. Bedanya hanya di ukuran gambar preview dan posisinya. Kalau summary gambarnya kecil di kiri, kalau large image gambarnya besar di atas. Kalau aku lebih suka yang large image.

Tampilan summary.

Tampilan summary_large_image.

Kamu bisa melakukan test dan validasi di sini untuk memastikan bahwa Twitter Card bisa ditampilkan dengan baik.

Foto oleh Nick Youngson dalam CC BY-SA 3.0.
Bagikan ke Facebook, Twitter, atau kirimkan via email.
Tidak ada komentar

Tulis komentarmu :