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 Facebook, Twitter 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 == "item"'><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.
Caranya dengan membuka link https://developers.facebook.com/tools/debug/og/object/.
 |
| 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.
wah, blog aku pernah juga kejadian kayak gini, kakak master ma kasih infohnya
ReplyDeletesama sama emak cantik.. wah, belum masterm masih belajar nih emak cantik.
DeleteNah, meta data gini perlu ku pelajari.. Makasih infonya..
ReplyDeleteyup. semoga artikel ini bisa membantu ya nin..
Deletenah sepertinya ini bunda butuh banget tutorial ini, terimakasih sekali yak julia ilmunya kapan2 tutorial lamgsung yach
ReplyDeletesiap, kalo bertemu kita coba ya bunda
DeleteAku dulu pernah mbak. Gambar nggak muncul d blog. Alhamdulillah sekarang udah muncul dia . Mngkn karna aku ganti template x yah .
ReplyDeleteya, 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