Cara Menampilkan Gambar dan Deskripsi Blog di Facebook. Banyak orang mengeluhkan blog mereka ketika dibagikan pada beranda sosial media seperti facebook tampulan yang mereka dapat hanyalah judul dari artikel mereka saja.

Sedangkan thumbnail yang mereka pasang pada artikel tidak tertampil sebagai cover dari link artikel yang mereka bagikan.

Hal ini tentu sangat disayangkan, apalagi jika Anda sudah mempersiapkan desain thumbnail artikel sebagus mungkin tetapi desain tersebut tidak bisa ditampilkan.

Untuk mengatasi masalah tersebut, maka saya akan mebagikan tutorial kepada Anda bagaimana cara menampilkan thumbnail artikel ketika kita share link ke facebook.

Anda bisa memunculkan gambar pada artikel ketika share di facebook dengan cara memasang kode open graph di blog Anda.

Apabila gambar dan deskripsi blog Anda tidak muncul ketika dibagikan pada facebook, kemungkinan hal itu bisa terjadi karena template blog yang Anda gunakan belum ada kode open graph.

Pada umumnya, seorang desainer template blog memang akan memasang kode OG ini di blog secara otomatis. Namun ada beberapa orang yang dalam proses pengembangan template di blog tidak memasang open graph.

Hal tersebut berakibat tidak munculnya gambar saat dibagikan pada facebook. Buat Anda yang belum terlalu paham apa itu open graph, ada baiknya Anda membaca pengertiannya dibawah ini dulu.

Pengertian Open Graph (OG)

Open Graph merupakan sebuah kode meta tag yang khusus dibuat oleh tim facebook untuk kebutuhan perayapan webmaster milik mereka.

Dengan adanya kode ini, maka akan membuat facebook bisa membaca struktur yang ada pada blog dan menampilkan isinya kedalam postingan yang akan Anda buat.

Struktur dari open graph yang akan dibaca antara lain, judul, deskripsi, gambar, dan url (alamat blog).

Cara Membuat Gambar di Artikel Muncul Saat Share Link di Facebook

Oke, jika sudah tahu apa itu open graph. Langkah selanjutnya adalah memasang kode open graph ini di template Anda. Berikut langkah-langkahnya.

Pertama buka laman blogger Anda.

Kemudia klik pada menu Tema. Klik icon drop-down dan pilih "Edit HTML."

Copy kode dibawah ini, dan paste diatas kode </head>.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR41xiFmHhKH5s2rbN6eCd7A11g8TGb4tDQvxhAzDMz7L5BP9pJgp4-4ighCaREL72Gm2rXkELWxVBZbLhsCXx0EUF-S3DuL5s0-HRMaOH5z2QZ83r67AodwuAYP-NpkmzOWNCPFtcid0i/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='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Keterangan tambahan:

Anda perlu mengganti beberapa value dibawah ini dengan milik Anda sendiri.

106660612706164 (3buah). Kode tersebut merupakan user ID akun facebook atau fanspage Anda. Untuk melihat user ID facebook bisa Anda lihat pada url profil akun Anda.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR41xiFmHhKH5s2rbN6eCd7A11g8TGb4tDQvxhAzDMz7L5BP9pJgp4-4ighCaREL72Gm2rXkELWxVBZbLhsCXx0EUF-S3DuL5s0-HRMaOH5z2QZ83r67AodwuAYP-NpkmzOWNCPFtcid0i/s1600/ignielcom.png. Merupakan gambar logo atau banner blog. Saat Anda membagikan URL artikel maka yang akan tertampil adalah gambar pertama dalam artikel. Tetapi, jika yang Anda bagikan adalah URL homepage, maka gambar yang akan muncul adalah gambar yang disetting dengan url tersebut.

Selesai, dengan memasang kode tersebut maka gambar dan deskripsi blog Anda akan tertampil ketika dibagikan pada media sosial facebook.

Bagaimana jika gambar masih belum tertampil?

Jika sudah menggunakan cara diatas tetapi gambar masih belum tertampil saat dibagikan di facebook, maka ada kemungkinan dua hal dibawah ini.

1. Resolusi gambar

Jika ingin gambar artikel muncul ketika dibagikan pada facebook maka resolusi minimalnya adalah 200 x 200 px. Ada kemungkinan gambar Anda masih terlalu kecil resolusinya sehingga ketika Artikel dibagikan pada facebook gambarnya tidak muncul.

2. Facebook belum merayapi ulang

Layaknya mesin pencari, facebook perlu merayapi ulang blog Anda agar gambar yang Anda bagikan di facebook bisa tertampil. Proses perayapan ini bisa Anda percepat dengan membuka facebook sharing debug.

a. Pertama buka alamat https://developers.facebook.com/tools/debug/sharing

b. Kemudian masukkan URL homepage blog atau Artikel yang Anda buat.

c. Selanjutnya, klik tombol debug, lalu klik Scrape Again beberapa kali sampai gambar thumbnail keluar.

Apabila cara diatas sudah dilakukan, pasti gambar Anda sudah bisa tampil ketika dibagikan pada sosial media.

Penutup

Begitulah tutorial dari saya, semoga cara diatas dapat membatu Anda dalam memberikan penjelasan bagaimana cara menampilkan gambar dan deskripsi blog ketika dibagikan atau dishare pada facebook. Apabila ada penjelasan yang kurang jelas atau dirasa tidak benar, Anda bisa berkomentar dibawah. Sekian dari saya, terimakasih.