Cara Menampilkan Gambar Thumbnail Facebook di Blog

Kita tau bahwa facebook merupakan sosial media yang tidak ada matinya. Artinya ialah facebook adalah sosial media yang penggunanya tidak pernah berkurang sampai saat ini. Setiap jam dan setiap hari, banyak orang yang mendaftar di sosial media ini. Bukan karena tampilannya yang menarik dan fiturnya lengkap, tapi facebook dikenali orang, dikarenakan penggunaannya yang simple.

Tahukah sobat, bahwa blog dengan facebook dapat bekerja sama?, Bahkan facebook bisa menyediakan iklan di blog?. Dan kita bisa menghasilkan uang dari facebook. Percaya gak percaya, tapi itu nyata. Sobat bisa membaca dan mencarinya di google.

Tapi akhir-akhir ini, aku sering sekali menemukan postingan di grup blogger tentang mereka yang kebingungan kenapa gambar thumbnail dan deskripsi blognya tidak muncul ketika membagikan URL ke sosial media mereka seperti facebook. Padahal mungkin karena judulnya kurang pas dengan permasalahan yang mereka hadapi, makanya tidak sadar kalau dalam postingan itu mengandung solusi. Itulah sebabnya aku menulis artikel ini, agar orang lain dapat dengan mudah menemukan solusi memperbaikinya. Jika gambar blog dan deskripsi blog tidak keluar saat link blog dibagikan ke facebook, ada kemungkinan karena sobat belum memasang kode open graph dalam template blog sobat.

1. Apa Itu Open Graph?

Open graph 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 blog kita, ketika sobat membagikan link ke facebook. Struktur yang dibaca antara lain adalah judul, deskripsi, gambar, dan alamat blog.

2. Pentingkah memasang kode Open Graph?

Ya jelas penting. Facebook adalah salah satu sumber traffic yang paling banyak digunakan oleh blogger. Maka dari itu ketika mempromosikan link blog di facebook, kemungkinan pengunjung blog kita akan naik. Tapi kalau tampilan linknya seperti ini, apakah akan menarik perhatian pengunjung?

Tentu tidak dan jelas kurang menarik untuk dilihat. Makanya sobat perlu memasang kode meta tag open graph facebook agar tampilannya bisa berubah menjadi seperti ini. Contohnya, ketika aku membagikan URL link dari artikel cara menampilkan gambar thumbnail whatsapp di blog. Maka tampilan thumbnailnya akan tampak seperti gambar dibawah ini.

3. Cara Menampilkan Gambar Thumbnail Facebook di Blog

#1. Masuk ke bloggger.
#2. Pilih menu tema.
#3. Pilih edit html.

#4. Copy dan pastekan semua kode meta tag open graph facebook ini DI ATAS </head>.
#5. Selesai. 

<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXRlYAU-7NHRvRsxWPMtvn6rbOFty2QyFVfHbDTVhyYfFP8IMyCvDrSBIgLIiGx_0hx8Yd4TjVqma7mlZ2Zz0GklCnETDNZdbAPppnuI2zAeMH6GIkDywBDCNOHvQbsUehLYAnWsXseTg/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 sobat sendiri.

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXRlYAU-7NHRvRsxWPMtvn6rbOFty2QyFVfHbDTVhyYfFP8IMyCvDrSBIgLIiGx_0hx8Yd4TjVqma7mlZ2Zz0GklCnETDNZdbAPppnuI2zAeMH6GIkDywBDCNOHvQbsUehLYAnWsXseTg/s1600/ignielcom.png
   Adalah URL dari gambar banner atau logo blog. Yang maksudnya adalah 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 akun facebook atau fanspage facebook.
3. 1804789006468790
   ID aplikasi facebook.

 

 4. Jika Gambar Masih Belum Muncul

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

5. Semua Sudah Sesuai Tutorial. Kenapa Gambar Masih Belum Muncul?

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

1. Buka facebook sharing debugger 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 atau kurangi lagi, beberapa kali sampai gambar thumbnail keluar.

Baca juga : kita dapat uang dari adsense, terus adsense dapat uang dari siapa?

Silahkan langsung praktekan cara diatas untuk memunculkan gambar dan deskripsi ketika share posting ke facebook. Dijamin triknya jitu dan langsung bekerja dengan baik. Tapi, jika belum berhasil juga, mungkin ada langkah yang terlewatkan. Coba terus sampai berhasil ya. Tetap semangat. Terima kasih hehehe.

Share this post