Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

#StaySafe HNFISLMN Januari 30, 2019

Selain Facebook, Twitter adalah media sosial yang paling banyak digunakan bukan hanya oleh orang Indonesia, tapi juga oleh seluruh orang di dunia. Makanya bisa banget nih untuk promosi blog melalui Twitter. Sekali share link, pasti banyak yang lihat karena penggunanya tidak sedikit.

Namanya juga promosi, pasti tampilannya harus dikemas semenarik mungkin dong. Dalam hal ini kita sedang membahas artikel blog, maka yang harus dibuat menarik adalah tampilan dari preview blog ketika link dibagikan ke Twitter. Coba lihat deh, menurut kamu manakah yang lebih memancing rasa ketertarikan?

Solusi Mengatasi Gambar Tidak Muncul Ketika Share Link Blog di Twitter

Tentu yang kiri, bukan?! Gimana sih caranya agar gambar thumbnail dan deskripsi blog bisa tampil ketika URL dibagikan ke Twitter seperti gambar di atas? Gampang banget kok. Kamu tinggal pasang kode tambahan yang bernama Twitter Card. Dulu banget saya pernah kok membahas ini di artikel yang berjudul Cara Memasang Kode Meta Tag Twitter Card yang Benar dengan lengkap dan rinci. Sekarang akan dibahas ulang menggunakan judul yang lebih tepat sasaran agar lebih mudah dicari di Google.

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 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 Twitter.

Memunculkan Gambar dan Deskripsi Artikel di Share Twitter

Sekarang kita menuju ke kode utama. Masuk ke dashboard Blogger dan akses menu untuk mengedit HTML. Simpan 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/AVvXsEjMCCqO8_F6r5a9qk_oL7r5Q7thTyaXiTnfMrL5su0PQF16D5U8LDQFVn_QqQ5fAgXjPTafNbHC3WAhiCBUZbGiQLa4egNE9sox2aJW5Xdyd-QMxutED5MLHZHe6T64lQZFLzoqewT83-Nl/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 kamu sendiri.

@igniel (2 buah)
Adalah username Twitter. Pastikan dimulai dengan simbol at (@).
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMCCqO8_F6r5a9qk_oL7r5Q7thTyaXiTnfMrL5su0PQF16D5U8LDQFVn_QqQ5fAgXjPTafNbHC3WAhiCBUZbGiQLa4egNE9sox2aJW5Xdyd-QMxutED5MLHZHe6T64lQZFLzoqewT83-Nl/s1600/ignielcom.png
Gambar yang muncul ketika membagikan URL homepage blog. Maksudnya begini, ketika 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. Makanya ganti dengan URL banner atau logo blog masing-masing ya.

Lakukan Validasi. Cek Apakah Kodenya Sudah Benar

Setelah melakukan langkah di atas, ada baiknya kamu cek dulu apakah pemasangan kodenya benar dan bisa bekerja dengan baik. Caranya adalah sebagai berikut.

Buka Twitter Card Validator yang beralamat di:
```
https://cards-dev.twitter.com/validator
```
Masukkan alamat homepage atau artikel blog di kotak yang tersedia.
Klik tombol Preview Card dan lihat hasilnya. Jika sudah benar maka preview gambar, judul, dan lainnya akan muncul sesuai dengan struktur blog aslinya.

Cara Pasang Kode Meta Tag Twitter Card di Blogger

Jika Gambar Belum Muncul

Yang diambil oleh Twitter adalah gambar pertama alias 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. Tidak mendukung gambar dengan ekstensi SVG.

Apakah gambar di artikel blog kamu sudah masuk ketentuan di atas? Kalau ada yang tidak sesuai maka gambar tidak akan muncul. Pastikan sudah memenuhi syarat ya.

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 masing-masing. Have a good day, everyone.

Selamat membaca artikel Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link. Jangan lupa untuk support web kami dengan like, comment dan share. Kunjungi terus HNFISLMN untuk artikel bermanfaat lainnya. Thanks ~