Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

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://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/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.

  1. @igniel (2 buah)
    Adalah username Twitter. Pastikan dimulai dengan simbol at (@).
  2. https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/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.

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

SHARE Pin Share
Artikel Terkait
18 komentar
  1. ini udah digabung dengan facebook dan whatsapp?

    BalasHapus
    Balasan
    1. Sesuai judul. Cuma Twitter.
      Kalo FB dan WA ada di postingan sebelumnya.

      Hapus
  2. punya saya begini gan, knp ya?

    ERROR: Possibly invalid value (if specified) (og:title)
    ERROR: Possibly invalid value (if specified) (twitter:text:title)
    ERROR: Possibly invalid value (if specified) (twitter:title)

    BalasHapus
    Balasan
    1. sama saya juga, mas pake wp, blog, atau yglainnya?

      Hapus
  3. Ini yg lagi saya cari, soalnya pas share di twitter ga muncul gambar. Makasih infonya...

    BalasHapus
  4. Makasih banyak tutorialnya, ini yang lagi dicari-cari dari kmaren, akhirnya bisa juga tampilin gambar saat share link artikel...

    BalasHapus
  5. Thank you bro, tipsnya membantu!

    BalasHapus
  6. say sangat rekomendasikan blog mu gan. tutorialnya sangat bagus. saya baru belajar blog: pegiatliterasi.com

    BalasHapus
  7. oyah,,,gimana cara dapat tema blog keren seperti ini gan? premium atau free gan?

    BalasHapus
    Balasan
    1. Premium. Template yang saya jual namanya IGNIPLEX.
      https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html

      Hapus
  8. maaf gan nanya nich, pemasangan twetter card sudah berhasil. saya cek di validator juga sudah berhasil. tapi nyoba twet ko g muncul gambarnya ya gan? Tks

    BalasHapus
  9. apakah kode angka 1 atau 4 menentukan gambar mana yang akan muncul di media tujuan seterusnya ?
    misal : http://1.bp.zzzzzzzzzzzz atau http://4.bp.zzzzzzzz

    terima kasih tanggapannya

    BalasHapus
    Balasan
    1. Saya kurang paham apa yang dimaksud "media tujuan seterusnya".
      Tapi angka di depan tidak menentukan apapun. Itu cuma lokasi hosting gambar di blogger.

      Hapus
  10. saya coba dulu ya gan, semoga work. btw ini kodenya memperlambat loading blog tidak ya gan?

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!