13 January 2019

Cara Memunculkan Gambar Pada Saat Share Artikel Blog ke Facebook


Pernah gak kalian membagikan atau mengshare artikel blog Anda ke media sosial seperti Facebook tetapi gambarnya tidak muncul? Jadinya artikel blog yang Anda bagikan jadi tidak menarik tanpa adanya gambar. Padahal dengan gambar dapat menarik perhatian bagi orang lain untuk juga ingin melihat dan membacanya.
Gambar Tidak Muncul

Oleh karena itu, tentu Anda pastinya ingin postingan yang Anda share atau bagikan ke media sosial seperti FacebookTwitter ataupun media sosial lainnya secara otomatis dilengkapi dengan gambar dari postingan Anda.
Pasti Anda ingin muncul gambar ketika share artikel di Facebook seperti contoh berikut :
Gambar Muncul

Saya pernah memiliki pengalaman masalah seperti ini yaitu gambar tidak muncul ketika saya membagikan/ share artikel blog saya ke media sosial seperti facebook ketika saya ngeblog. Kenapa ya bisa begitu? Nah, penyebab gambar tidak muncul ketika membagikan/ share artikel blog saya ke media social seperti facebook adalah tidak adanya Facebook Open Graph meta data.
Apa itu Open Graph meta data?
Open Graph meta data adalah data pada artikel Anda yang dikumpulkan dan disimpan pada cache facebook. Kode meta data ini digunakan di sebuah template baik itu ber-platform blogspot, wordpress atau yang lainnya yang berguna untuk mengenali suatu halaman website. Kode tersebut akan di kenali oleh plugin facebook untuk menggali informasi suatu halaman yang nantinya mampu untuk di tampikan di halaman facebook. Dengan demikian, jika terjadi error pada script tersebut maka facebook tidak bisa menerima informasi dari artikel Anda dan deskripsi, gambar, nama blog tidak bisa di tampilkan ke halaman facebook.
Ketika Anda membagikan/share artikel Anda ke media sosial seperti facebook, dll, maka Facebook akan secara otomatis meng-crawl artikel Anda untuk mencari open graph data ini. Jika tidak ada open graph meta data ini, otomatis artikel yang Anda bagikan/share tidak akan muncul gambar.
Berikut cara memunculkan gambar ketika membagikan artikel blog pada facebook dengan menggunakan Blogspot.com
1.   Login ke halaman Dashboard blogspot Anda, setelah berhasil login, masuk ke menu Template » Edit HTML.
Pertama kali yang Anda lakukan adalah dengan Login ke halaman Dashboard blogspot Anda.
2.   Setelah berhasil login, masuk ke menu Template » Edit HTML.
Cari kode </head> dengan menekan CTRL+F, kemudian letakkan kode di bawah ini di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='
id_facebook' property='fb:admins'/>
<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>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
Paste code pada edit HTML
3.   Mengganti id_facebook dengan id Facebook Anda
Setelah mempaste kode diatas di edit HTML maka langkah selanjutnya adalah mengganti id_facebook dengan id Facebook Anda. Jika sudah, Simpan Template.
Berikut contoh mengganti id_facebook :
<meta content='juliapurnamasari09' property='fb:admins'/>
Kode diatas berfungsi untuk men-generate konten share facebook secara otomatis pada saat Anda meng-share artikel.
4.   Uji dengan Debugger Objek Graf Terbuka untuk melihat hasilnya
APa itu Debugger Objek Graf Terbuka/ facebook debugger? 
Debugger Objek Graf Terbuka/ facebook debugger merupakan tools online yang sangat efektif untuk mengatasi deskripsi dan gambar yang tidak muncul ketika membagikan artikel di sosial media.
Lanjut lagi, Setelah selesai menambahkan kode dan mengubah id_facebook, langkah selanjutnya Anda menguji untuk melihat hasilnya dengan Debugger Objek Graf Terbuka.
Debugger objek graf terbuka/ facebook debugger 

Setelah terbuka link tersebut, Anda copy paste link yang ingin Anda uji pada Debugger Objek Graf Terbuka. Kemudian klik Ambil informasi pengurangan baru, agar facebook mengambil ulang cache pada artikel Anda. Dengan demikian akan muncul tampilan seperti gambar dibawah ini.


Anda scroll sampai ke bawah untuk melihat hasilnya. Jika  berhasil maka akan menampilkan informasi gambarnya muncul seperti dibawah ini:
Gambar berhasil muncul

Berikut untuk melihat sebelum gambar tidak muncul 
pada saat membagikan/share artikel blog ke Facebook dan sesudah ketika melakukan cara seperti diatas :
Tampilan sebelum dan sesudah
Ya itulah cara memunculkan gambar pada saat membagikan/share artikel blog ke Facebook. Semoga bermanfaat dan dapat membantu Anda.
Jangan lupa like & share.


8 comments:

  1. wah, blog aku pernah juga kejadian kayak gini, kakak master ma kasih infohnya

    ReplyDelete
    Replies
    1. sama sama emak cantik.. wah, belum masterm masih belajar nih emak cantik.

      Delete
  2. Nah, meta data gini perlu ku pelajari.. Makasih infonya..

    ReplyDelete
    Replies
    1. yup. semoga artikel ini bisa membantu ya nin..

      Delete
  3. nah sepertinya ini bunda butuh banget tutorial ini, terimakasih sekali yak julia ilmunya kapan2 tutorial lamgsung yach

    ReplyDelete
  4. Aku dulu pernah mbak. Gambar nggak muncul d blog. Alhamdulillah sekarang udah muncul dia . Mngkn karna aku ganti template x yah .

    ReplyDelete
    Replies
    1. ya, salah satu alasan gak muncul itu ya karena sering gonta hanti template mbak. Usahakan pilih 1 template yang cocok dan pas dengan blog mbak

      Delete