Cara Menampilkan Gambar Thumbnail Facebook di Blog

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 di blognya tidak muncul ketika membagikan URL di 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 thumbnail facebook di blog gak muncul, ada kemungkinan karena sobat belum memasang kode open graph di 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?
Menampilkan Gambar Thumbnail Facebook di Blog

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

3. Cara Memasang Gambar Thumbnail Facebook di Blog

#1.  Masuk ke bloggger.
#2. Pilih menu tema.
#3. Pilih edit html.
Cara Menampilkan Gambar Thumbnail Facebook di Blog

#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://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 sobat 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. 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 Thumbnail Masih Belum Muncul

Resolusi gambar thumbnail minimal yang diharuskan adalah 200 x 200 px. Jika kurang dari itu maka gambar thumbnail 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 Thumbnail Masih Belum Muncul?

Layaknya mesin pencari, Facebook pun memerlukan waktu untuk merayapi ulang blog sobat. Kalau mau hasil yang cepat, sobat bisa mengikuti panduan cara dibawah ini.
  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.
Cara Menampilkan Gambar Thumbnail Facebook di Blog

Baca juga : kita dapat uang dari adsense, terus adsense dapat uang dari siapa?
Silahkan langsung praktekan cara diatas untuk memunculkan gambar thumbnail 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.
Tampilkan Komentar


EmoticonEmoticon