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.

Artikel Terkait

20 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Alex Sierra
    11/1/22
    Profil: https://www.blogger.com/profile/09708439615826238902
    Sukses, Thanks Mba igniel atas ilmunya.
  • Arif Rudiantoro
    18/1/21
    Profil: https://www.blogger.com/profile/08153473975321332891
    Wah mantep Mbak sudah bisa,
    Terimakasih
  • Soden
    13/8/20
    Profil: https://www.blogger.com/profile/02819593187249424790
    saya coba dulu ya gan, semoga work. btw ini kodenya memperlambat loading blog tidak ya gan?
  • surakartan
    7/7/20
    Profil: https://www.blogger.com/profile/14954570925258545005
    Worked. thx!!
  • Sang_ARomadhoni
    1/6/20
    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
      1/6/20
      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/4/20
    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
  • Pegiat Literasi.com
    27/3/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    oyah,,,gimana cara dapat tema blog keren seperti ini gan? premium atau free gan?
    • Igniel
      27/3/20
      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
  • Pegiat Literasi.com
    27/3/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    say sangat rekomendasikan blog mu gan. tutorialnya sangat bagus. saya baru belajar blog: pegiatliterasi.com
  • Lisa Deslina
    4/3/20
    Profil: https://www.blogger.com/profile/03657952241714696111
    Thank you bro, tipsnya membantu!
  • Ade Irawan
    3/1/20
    Profil: https://www.blogger.com/profile/13756811104103961639
    thanks
  • Riandi Permana
    18/12/19
    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...
  • TIMES
    15/12/19
    Profil: https://www.blogger.com/profile/07620032853369948277
    Thanks berat gan...
  • Kang Arif
    4/12/19
    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/3/19
    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/4/19
      Profil: https://www.blogger.com/profile/12206594237772174893
      sama saya juga, mas pake wp, blog, atau yglainnya?
  • Yuuki
    9/3/19
    Profil: https://www.blogger.com/profile/04391405424964474862
    ini udah digabung dengan facebook dan whatsapp?
    • Igniel
      9/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sesuai judul. Cuma Twitter.
      Kalo FB dan WA ada di postingan sebelumnya.
  • Rara
    11/1/19
    Profil: https://www.blogger.com/profile/17418478107641486667
    Mantul