Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

Selain Facebook, Twitter merupakan media sosial yg paling poly digunakan bukan hanya oleh orang Indonesia, tapi pula oleh semua orang di global. Makanya mampu banget nih buat promosi blog melalui Twitter. Sekali share link, niscaya banyak yg lihat lantaran penggunanya nir sedikit.

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

Apa itu Twitter Card?

Memunculkan Gambar

			<!-- 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/AVvXsEjyG_4m_fXV_-4tQrk1Er8REBHguQTu396rJl3Uw0kJhBKM9BIvxCV_bZT76eSEA7NlVUR9CIOwz0qJZRzd-2odNp-n_ayAuLCOPW3xDLB3_3KZYEawFwQogKwfIftsqfXvySSsSBC2uZfo/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

1. @igniel (2 buah)

Adalah username Twitter. Pastikan dimulai dengan simbol at (@).

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

1. Buka Twitter Card Validator yang beralamat di:

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

Jika Gambar Belum Muncul

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.

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.

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.

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

Ganti beberapa value di bawah menggunakan milik kamu sendiri.

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

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.