
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?

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.

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.
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.106660612706164
(3 buah)
User ID dari akun Facebook atau Fanspage.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.
- Buka Facebook Sharing Degugger yang beralamat di:
https://developers.facebook.com/tools/debug/sharing
- Masukkan URL homepage blog atau artikel.
- Klik tombol Debug.
- Klik tombol Scrape Again (Kurangi Lagi) beberapa kali sampai gambar thumbnail keluar.

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.
Supaya dibawah gambar ada tulisan ''DIPUBLIKASIKAN OLEH'' itu bagaimana mba ?
BalasHapusIjin buat referensi yah min
BalasHapusMuncul peringatan seperti di bawah ini.
BalasHapusThe 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Solusinya bagaimana mana ya?
Tag og:image nya belum terbaca FB tuh. Debug lagi beberapa kali sampe peringatannya ilang.
HapusOh pantesan lupa di debug. Oiya, kenapa fitur "Nofity me" tidak bekerja ya?
HapusTolong bales komentar saya di artikel https://www.igniel.com/2018/12/background-highlight-komentar-admin.html
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 .
BalasHapusAlamat blognya apa?
Hapustetep ga work min, sudah saya coba scrape ulang hasilnya ga berubah
BalasHapusIjin nyoba ya..
BalasHapusBerhasil saat dipanggil tanpa www, gambar muncul, namun saat dipanggil lengkap https://www.domainsaya.com gambar gak muncul, mohon solusinya, terimakasih
BalasHapuscara buat blockquote sperti igniel gimana sih..?
BalasHapussupaya gak panjang kebawah gitu
Kira2 posisi buat naruh codingany di file apa ya?
BalasHapussaya 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 ?
BalasHapushalo teman saya meminta bantuan Anda pada gambar terakhir dari posting di sebelah url itu ditulis "oleh" bagaimana cara saya meletakkan ini?
BalasHapusHalo 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?
BalasHapusTerimakasih