Menampilkan Gambar Thumbnail dan Deskripsi Blog di Facebook Saat Membagikan Link

Menampilkan Gambar Thumbnail Blog di Facebook Saat Membagikan Link

Saya sering sekali menemukan postingan di grup Blogger tentang mereka yang kebingungan kenapa gambar thumbnail dan deskripsi blognya tidak muncul ketika membagikan URL ke Facebook. Saya sudah pernah membahas hal ini duluuuu sekali, di artikel yang berjudul Cara Memasang Meta Tag Open Graph Facebook.

Mungkin karena judulnya kurang pas dengan permasalahan yang mereka hadapi makanya tidak sadar kalau dalam postingan itu mengandung solusi. Itulah sebabnya saya akan menulis ulang tentang hal ini agar orang lain bisa dengan mudah menemukan cara mengatasi gambar thumbnail dan deskripsi artikel yang tidak muncul di Facebook.

Jika gambar blog dan deskripsi tidak keluar saat link blog dibagikan ke Facebook, ada kemungkinan karena kamu belum memasang kode Open Graph dalam template.


Apa Itu Open Graph?

Open Graph sendiri adalah kode meta tag khusus yang dibuat oleh Facebook untuk keperluan perayapan webmaster mereka. Kode ini akan membuat Facebook sanggup membaca struktur blog dan menampilkan ulang isinya ke dalam postingan ketika kamu membagikan link ke Facebook. Struktur yang dibaca antara lain adalah judul, deskripsi, gambar, dan alamat blog.



Pentingkah memasang kode Open Graph?

Ya jelas penting. Facebook adalah salah satu sumber traffic yang banyak digunakan oleh blogger. Pengguna Facebook sangat banyak, maka ketika mempromosikan link blog di sana, kemungkinan dilihat oleh orang lain pun sangat tinggi. Tapi kalau tampilan linknya seperti ini apa akan menarik perhatian?

Cara Memunculkan Gambar Artikel Saat Posting Link di Facebook

Jelas kurang menarik ya. Makanya kamu perlu memasang kode meta tag Open Graph Facebook agar tampilannya bisa berubah menjadi seperti ini. Contoh ketika saya membagikan URL dari artikel Cara Memunculkan Gambar Thumbnail Blog di WhatsApp Saat Membagikan Link.

Solusi Gambar Postingan Blog Tidak Tampil di Facebook


Memunculkan Gambar dan Deskripsi Artikel di Share Facebook

Solusinya sangat mudah. Simpan semua kode meta tag Open Graph Facebook ini DI ATAS </head>.

<!-- Facebook Meta Tag Open Graph by igniel.com -->
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='1804789006468790' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>


Penjelasan

Ganti beberapa value di bawah menggunakan milik kamu sendiri.

  1. https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png
    Adalah URL dari gambar banner atau logo blog.
    Ketika membagikan URL artikel, maka yang akan tampil adalah gambar pertama dari artikel tersebut. Tapi jika membagikan URL homepage blog, maka gambar yang disetting melalui URL inilah yang akan muncul.
  2. 106660612706164 (3 buah)
    User ID dari akun Facebook atau Fanspage.
  3. 1804789006468790
    ID aplikasi Facebook. Jika belum punya baca dulu artikel tentang Cara Membuat Aplikasi Facebook Sendiri. Tidak pakai pun tidak apa-apa, hapus saja semua baris <meta content='1804789006468790' property='fb:app_id'/>.


Jika Gambar Masih Belum Muncul

Resolusi gambar minimal yang diharuskan adalah 200 x 200 px. Jika kurang dari itu maka gambar tidak akan muncul. Kamu edit lagi ya gambar di dalam artikel agar semuanya memiliki resolusi minimal yang ditentukan.


Semua Sudah Sesuai Tutorial. Kenapa Gambar Masih Belum Muncul?

Layaknya mesin pencari, Facebook pun memerlukan waktu untuk merayapi ulang blog kamu. Kalau mau hasil yang cepat pun bisa kok, ikuti langkah berikut.

  1. Buka Facebook Sharing Degugger yang beralamat di:
    https://developers.facebook.com/tools/debug/sharing
  2. Masukkan URL homepage blog atau artikel.
  3. Klik tombol Debug.
  4. Klik tombol Scrape Again (Kurangi Lagi) beberapa kali sampai gambar thumbnail keluar.
Memunculkan Gambar dan Deskripsi Share Posting ke Facebook

Silakan langsung praktekan cara untuk memunculkan gambar dan deskripsi ketika share posting ke Facebook di atas. Dijamin triknya jitu dan langsung bekerja dengan baik. Jika belum berhasil mungkin ada langkah yang terlewatkan. Coba terus sampai berhasil ya.

Artikel Terkait

16 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>
  • Unknown
    15/1/22
    Profil: https://www.blogger.com/profile/15732186086879681604
    Kak buat tutorial dong cara share link blog ke sosmed tapi beda judul dan gambar maksudnya dicustom title dan imagenya jadi berbeda dengan judul dan gambar artikel aslinya
  • I Gede Suta Kastawan
    1/10/20
    Profil: https://www.blogger.com/profile/02338868576659401974
    Halo mba Igniel, bagaimana caranya supaya saat update gambar artikel dan ketika share kembali ke facebook, gambar yang dibaca bukan gambar lama teratas artikel blog melainkan gambar teratas yang baru?

    Terimakasih
  • Afonso Muchanga
    12/6/20
    Profil: https://www.blogger.com/profile/08157719174756120565
    halo teman saya meminta bantuan Anda pada gambar terakhir dari posting di sebelah url itu ditulis "oleh" bagaimana cara saya meletakkan ini?
  • Handy Rusandi
    5/4/20
    Profil: https://www.blogger.com/profile/09411952026515715905
    saya sudah coba cara di atas, dan saat di coba dengan debug developer tampil gambar, judul dan deskripsi. Tetapi pada tampilan mobile hanya gambar dan judul saja. Dimanakah letak kesalahannya ?
  • Unknown
    4/3/20
    Profil: https://www.blogger.com/profile/04241214986920658917
    Kira2 posisi buat naruh codingany di file apa ya?
  • Admin
    3/1/20
    Profil: https://www.blogger.com/profile/05492526593974916716
    cara buat blockquote sperti igniel gimana sih..?
    supaya gak panjang kebawah gitu
  • Unknown
    19/11/19
    Profil: https://www.blogger.com/profile/01739467497090256457
    Berhasil saat dipanggil tanpa www, gambar muncul, namun saat dipanggil lengkap https://www.domainsaya.com gambar gak muncul, mohon solusinya, terimakasih
  • takam
    28/10/19
    Profil: https://www.blogger.com/profile/11582516630876228730
    Ijin nyoba ya..
  • Misa
    16/6/19
    Profil: https://www.blogger.com/profile/14340217526686888794
    tetep ga work min, sudah saya coba scrape ulang hasilnya ga berubah
  • Admin
    8/5/19
    Profil: https://www.blogger.com/profile/07046268239489408223
    Supaya deskripsi blog muncul saat share homepage gimana mba, sedangkan kode di atas saat saya share url homepage saya yang muncul bukan deskripsi blognya melainkan tulisan yang ada di homepage contohnya deskripsi blog asli "Blog Dengan Ragam Tutorial" tapi yang muncul malah "Blogger Adsense Cara membuat blog dengan mudah bla bla bla" Mohon solusinya .
    • Igniel
      10/5/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
  • Sandy Senjaya
    10/2/19
    Profil: https://www.blogger.com/profile/11429922247310206942
    Muncul peringatan seperti di bawah ini.

    The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

    Solusinya bagaimana mana ya?
    • Igniel
      10/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tag og:image nya belum terbaca FB tuh. Debug lagi beberapa kali sampe peringatannya ilang.
    • Sandy Senjaya
      13/2/19
      Profil: https://www.blogger.com/profile/11429922247310206942
      Oh pantesan lupa di debug. Oiya, kenapa fitur "Nofity me" tidak bekerja ya?

      Tolong bales komentar saya di artikel https://www.igniel.com/2018/12/background-highlight-komentar-admin.html
  • Syaiful bahri
    12/1/19
    Profil: https://www.blogger.com/profile/10418050987299538966
    Ijin buat referensi yah min
  • Mas uki
    8/1/19
    Profil: https://www.blogger.com/profile/17216426145973668268
    Supaya dibawah gambar ada tulisan ''DIPUBLIKASIKAN OLEH'' itu bagaimana mba ?