Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link

Cara memunculkan gambar thumbnail dan deskripsi artikel blog ketika share postingan ke Twitter menggunakan kode meta tag Twitter Card yang baik dan benar. Solusi mengatasi gambar dan deskripsi blog tidak muncul saat membagikan URL di Twitter.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/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.

22
Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link
Menampilkan Gambar Thumbnail dan Deskripsi Blog di Twitter Saat Membagikan Link
Cara memunculkan gambar thumbnail dan deskripsi artikel blog ketika share postingan ke Twitter menggunakan kode meta tag Twitter Card yang baik dan benar. Solusi mengatasi gambar dan deskripsi blog tidak muncul saat membagikan URL di Twitter.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

22 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Siber Pertanian
    02 Agustus, 2023
    Profil: https://www.blogger.com/profile/01312331720984092687
    Komentar ini telah dihapus oleh Siber Pertanian selaku penulis.
    • Siber Pertanian
      02 Agustus, 2023
      Profil: https://www.blogger.com/profile/01312331720984092687
      Komentar ini telah dihapus oleh Siber Pertanian selaku penulis.
  • Alex Sierra
    11 Januari, 2022
    Profil: https://www.blogger.com/profile/09708439615826238902
    Sukses, Thanks Mba igniel atas ilmunya.
  • Arif Rudiantoro
    18 Januari, 2021
    Profil: https://www.blogger.com/profile/08153473975321332891
    Wah mantep Mbak sudah bisa,
    Terimakasih
  • Syarif Soden
    13 Agustus, 2020
    Profil: https://www.blogger.com/profile/02819593187249424790
    saya coba dulu ya gan, semoga work. btw ini kodenya memperlambat loading blog tidak ya gan?
  • surakartan
    07 Juli, 2020
    Profil: https://www.blogger.com/profile/14954570925258545005
    Worked. thx!!
  • Sang_ARomadhoni
    01 Juni, 2020
    Profil: https://www.blogger.com/profile/08937442147884564579
    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
    • Igniel
      01 Juni, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya kurang paham apa yang dimaksud "media tujuan seterusnya".
      Tapi angka di depan tidak menentukan apapun. Itu cuma lokasi hosting gambar di blogger.
  • mas'ud
    16 April, 2020
    Profil: https://www.blogger.com/profile/01223475152463039936
    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
  • Ely Goro Leba
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/05275401473347868294
    oyah,,,gimana cara dapat tema blog keren seperti ini gan? premium atau free gan?
    • Igniel
      27 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Premium. Template yang saya jual namanya IGNIPLEX.
      https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html
  • Ely Goro Leba
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/05275401473347868294
    say sangat rekomendasikan blog mu gan. tutorialnya sangat bagus. saya baru belajar blog: pegiatliterasi.com
  • Lisa Deslina
    04 Maret, 2020
    Profil: https://www.blogger.com/profile/03657952241714696111
    Thank you bro, tipsnya membantu!
  • Ade Irawan
    03 Januari, 2020
    Profil: https://www.blogger.com/profile/13756811104103961639
    thanks
  • Riandi Permana
    18 Desember, 2019
    Profil: https://www.blogger.com/profile/03843653051657522753
    Makasih banyak tutorialnya, ini yang lagi dicari-cari dari kmaren, akhirnya bisa juga tampilin gambar saat share link artikel...
  • Muhammad
    15 Desember, 2019
    Profil: https://www.blogger.com/profile/07620032853369948277
    Thanks berat gan...
  • Kang Arif
    04 Desember, 2019
    Profil: https://www.blogger.com/profile/18431733903166556884
    Ini yg lagi saya cari, soalnya pas share di twitter ga muncul gambar. Makasih infonya...
  • Plugins Mafia
    21 Maret, 2019
    Profil: https://www.blogger.com/profile/06752312094409570244
    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)
    • Anggi Prayoga
      27 April, 2019
      Profil: https://www.blogger.com/profile/12206594237772174893
      sama saya juga, mas pake wp, blog, atau yglainnya?
  • Yuuki
    09 Maret, 2019
    Profil: https://www.blogger.com/profile/04391405424964474862
    ini udah digabung dengan facebook dan whatsapp?
    • Igniel
      09 Maret, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sesuai judul. Cuma Twitter.
      Kalo FB dan WA ada di postingan sebelumnya.
  • Rara
    11 Januari, 2019
    Profil: https://www.blogger.com/profile/17418478107641486667
    Mantul