Cara Agar Link Blogger Tampil Gambar Thumbnail dan Judul Tulisan di Twitter


Alih-alih ingin mempromosikan tulisan yang telah selesai kita buat dengan cara membagikan ke sosial media Twitter malah hanya berupa teks judul dan teks link-nya saja alias tidak seperti Blog pada umumnya yang ketika di bagikan ke sosial media Twitter terlihat gambar Thumbnail dan judul tulisan. Seperti yang terlihat pada twit saya dibawah ini:


Jangankan orang lain, saya sendiri pun enggan untuk klik link yang demikian itu walaupun rasa penasaran ingin membaca itu ada. Alhasil, untuk mengundang pembaca ke Blog kita akan sia-sia.

Beda halnya dengan sebuah link yang sama di bagikan ke sosial media Twitter terlihat gambar Thumbnail dan judul tulisan, hal ini sepertinya menambah daya tarik bagi user Twitter yang kebetulan melihat twit link yang kita bagikan. Seperti twit saya di bawah ini yang telah di tambahkan kode HTML Twitter Cards ke dalam Template/Tema Blog:

Silakan anda bandingkan sendiri, twit link mana yang lebih menarik dari kedua twit saya di atas? Pastinya twit link yang terlihat gambar thumbnail dan judul tulisannya bukan?! Entahlah.., mungkin hanya link Blog platform Blogger yang mengalami hal demikian. Soalnya dahulu saat saya masih ngeblog di platform wordpress 'masalah' yang seperti ini tak pernah ada.

Yups.., bagi sebagian orang dengan membagikan sebuah link Blog ke sosial media Twitter hanya terlihat tampilan 'ala kadarnya' tanpa terlihat gambar thumbnail dan judul tulisan adalah sebuah masalah. Entah bagi sebagian orang lainnya dengan fenomena ini menganggap 'masalah' atau tidak, hal itu terlepas dari individu sesorang.

Yang jelas, ada tidaknya tampilan gambar thumbnail dan judul tulisan pada link tetap dapat di klik dan berfungsi dengan baik yang dapat menghantarkan calon pembaca ke halaman blog tulisan kita. Hanya saja perlu di pertimbangkan kembali faktor daya tarik demi mengundang para calon pembaca dari sosial media Twitter. Dengan tampilan 'ala kadarnya' tersebut, rasanya mereka enggan klik link tanpa terlihat gambar thumbnail dan judul tulisan.

Cara untuk dapat menampilkan gambar thumbnail dan judul tulisan pada link Blog yang kita bagikan ke sosial media twitter adalah dengan menambahkan kode HTML Twitter Cards kedalam Template/Tema Blog yang mana harus diletakan di bawah kode <head> dan inilah kodenya:


 <!-- [ Twitter card meta tag ] -->



<meta expr:content='data:blog.title' name='twitter:site'/>



<b:if cond='data:blog.url == data:blog.homepageUrl'>



<meta expr:content='data:blog.title' name='twitter:title'/>



<b:if cond='data:blog.metaDescription'>



<meta expr:content='data:blog.metaDescription' property='og:description'/>



<b:else/>



<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot;untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>



</b:if>



</b:if>



<b:if cond='data:blog.pageType == &quot;item&quot;'>



<meta expr:content='data:blog.pageName' name='twitter:title'/>



<b:if cond='data:blog.metaDescription'>



<meta expr:content='data:blog.metaDescription' name='twitter:description'/>



<b:else/>



<meta expr:content='&quot;Silakan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>



</b:if>



</b:if>



<b:if cond='data:blog.postImageUrl'>



<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>



<b:else/>



<b:if cond='data:blog.postImageThumbnailUrl'>



<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>



<b:else/>



<meta content='https://1.bp.blogspot.com/-wAjL-GHiQtc/Xhh3CIgPxmI/AAAAAAAACqU/rFUk4d4SpmIqNeA0eliQLHdsgrlrxMxkQCPcBGAYYCw/s1600/20200110_200411_0000.png' name='twitter:image:src'/>



</b:if>



</b:if>



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



<meta content='@ferry_update' name='twitter:creator'/>


Keterangan:
  • Merah: Link gambar yang bisa anda ubah dengan link gambar lainnya seperti gambar logo Blog anda atau gambar lainnya sesuai selera. Fungsinya sebagai tampilan gambar cadangan yang akan tampil sebagai gambar thumbnail ketika anda membagikan tulisan ke sosial media Twitter yang mana tulisan tersebut tanpa disisipkan gambar.
  • Biru: Ganti dengan username akun Twitter anda lengkap dengan tanda "@".
Setelah anda merubah link gambar dan username akun twitter, tahap selanjutnya paste/masukan kode HTML Twitter Cards tersebut ke dalam Template Blog di bawah kode <head> caranya:

Masuk ke Dasbor Blog >> Tema >> Edit HTML >> Masukan kode HTML Twitter Cards >> Setelah selesai klik simpan

Cari kode <head> cara mudahnya dengan klik pada kotak HTML-nya lalu tekan CTRL + F dan masukkan kode <head> lalu tekan Enter

Bagi pengguna hape bilamana menemukan kesulitan dalam mengedit template, anda bisa menggunakan aplikasi Turbo Editor yang dapat anda instal di Google Playstore. Sebelumnya, anda download terlebih dahulu Template/Tema Blog dengan meng-klik tombol yang berada di pojok kanan atas halaman dasbor tema, seperti yang terlihat pada gambar di bawah ini:


Untuk cara penggunaan aplikasi Turbo Editor silakan anda baca tulisan:
Jika telah selesai memasang kode HTML Twitter Cards, untuk menguji validasi dari fungsi kode tersebut maka silakan masuk ke situs https://cards-dev.twitter.com/validator menggunakan browser yang sebelumnya masuk terlebih dahulu ke akun Twitter anda.

Setelah berada di halaman card validator, masukan link Blog tulisan anda di kolom yang telah disediakan lalu klik preview cards. Jika kode HTML Twitter Cards terpasang dengan benar maka di sisi kanan akan muncul tampilan twit link tulisan anda dengan tampilan gambar thumbnail dan judul tulisan.

Selamat mencoba, semoga berhasil!
Ferry Alamsyah Setelah selesai membaca, maka menulislah! Karena aku membutuhkan teman untuk merubah dunia melalui tulisan.

Belum ada Komentar untuk "Cara Agar Link Blogger Tampil Gambar Thumbnail dan Judul Tulisan di Twitter"

Posting Komentar

Iklan Atas Artikel

Iklan1

Iklan Tengah Artikel 2

Iklan Bawah Artikel