Cara Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter

 

Selain facebook, twitter adalah media sosial yang paling banyak digunakan saat ini. Dikarenakan penggunanya yang simple dan bergengsi. Misalnya kalangan artis dan penyanyi. Hampir semua dari mereka lebih menggunakan twitter. Bukan hanya orang indonesia saja yang menggunakan sosial media ini, tapi sudah mencakup seluruh dunia dan hampir seluruh artis papan atas dunia menggunakan sosial media ini. 

Maka dari itu, kita bisa memanfaatkan sosial media ini untuk promosi blog melalui twitter. Dengan membuat tampilannya harus dikemas semenarik mungkin. Dan sekeren munkin.

Baku amat bahasanya kak, terbawa perasaan yah hahaha.

Iyeh bener. Kok lu orang tau hahaha. Btw, kita balik lagi. Dalam hal ini kita sedang membahas artikel blog, maka yang harus dibuat semenarik mungkin adalah tampilan dari preview blog kita, ketika link dibagikan ke twitter. 

Coba deh lihat, menurut sobat manakah yang lebih memancing rasa ketertarikan?

Jika dipandang dengan sekilas, tentu fokus mata kita langsung ke arah kiri. Alasannya, karena ada gambarnya.

Gimana sih caranya kak agar gambar thumbnail dan deskripsi blog bisa tampil ketika URL dibagikan ke twitter seperti gambar di atas?. 

Jawabannya gampang banget kok. Sobat tinggal pasang kode tambahan yang bernama twitter card di blog sobat. Tapi sebelum membuatnya, coba deh baca dulu penjelasannya dibawah ini. Biar sobat dapat ilmunya juga.

1. Apa itu Twitter Card?

Twitter card adalah kode meta tag khusus yang dibuat oleh twitter untuk keperluan perayapan webmaster mereka. Kode ini akan membuat twitter sanggup membaca struktur blog dan menyajikan ulang isinya dalam bentuk yang lebih menarik ketika membagikan sharing URL. Struktur yang dibaca dan disajikan ulang antara lain adalah judul, alamat blog, deskripsi, dan gambar. Fungsinya kurang lebih sama dengan kode open graph facebook tapi ini versi twitternya.

2. Coddingnya

#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Copy dan pastekan semua meta tag twitter card ini DI ATAS </head>.

<!-- Twitter Card by igniel.com -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@igniel' name='twitter:site'/>
<meta content='@igniel' name='twitter:creator'/>
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
</b:if></b:if></b:if></b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7FyVd9UHvopCfKY5jt2k82dyNkxGXv4JPBISQ2Q9RCy2fjXrY_ywuAOX4Ny5D9IrP-IHiSWOtvGfqRx8y_AioBOf2MNzOrszsCIArkqjWLwFLWcsaVYYxuX9ebk3nfxY_qUUNd7vEyRb/s1600/ignielcom.png' name='twitter:image'/>
</b:if></b:if>
<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>

Penjelasan

Ganti beberapa value di bawah menggunakan milik sobat sendiri.

1. @igniel (2 buah)
   Adalah username twitter. Pastikan dimulai dengan simbol at (@).
2. URL Link
   Adalah link gambar yang muncul ketika membagikan URL blog ke twitter. Maksudnya gini, ketika kita membagikan URL artikel, maka gambar yang muncul adalah gambar yang diambil dari dalam artikel itu sendiri. Namun ketika membagikan URL homepage, maka gambar yang diatur dari sinilah yang akan muncul. Jadi, ganti URL link ini dengan URL gambar atau logo blog sobat.

3. Cek pemasangan kodenya

Setelah melakukan langkah di atas, ada baiknya sobat cek dulu apakah pemasangan kodenya sudah benar atau belum. Caranya adalah sebagai berikut.

1. Buka twitter card validator yang beralamat di:

   https://cards-dev.twitter.com/validator

2. Masukkan alamat homepage atau artikel blog di kotak yang tersedia.
3. Klik tombol Preview Card dan lihat hasilnya. Jika sudah benar maka preview gambar, judul, dan lainnya akan muncul sesuai dengan struktur blog aslinya.

 

4. Jika Gambar Belum Muncul

Yang diambil oleh twitter adalah gambar pertama atau bisa dibilang paling awal dari dalam artikel. Dimensi gambar minimum yang diharuskan Twitter adalah 144 x 144 px, dan maksimum 4096 x 4096 px. Ukuran gambar harus kurang dari 5MB, dan tidak mendukung gambar dengan ekstensi SVG.

Baca juga : solusi baru mencairkan uang dari google adsense 2019. gak pakai lama dan gak pakai nunggu. caranya baca disini.

Itu dia penjelasan lengkap mengenai tutorial memasang twitter card untuk memunculkan gambar dan deskripsi blog ketika share URL. Semoga mudah dipahami dan bisa dengan cepat diaplikasikan ke blog. Agar blog sobat tambah menarik dan keren. Itu aja sih menurut aku. Terima kasih.