Horas bah!!!
- Pertama login ke akun facebook seperti biasa
- Setelah itu klik " Debug"
- Hasilnya di bawah akan terlihat postingan dengan thumbnail gambar yang sesuai (ada) dalam postingan.
- Setelah itu, silahkan kembali ke blogpost dan klik share pada postingan, maka thumbnail gambar yang muncul akan sama dengan hasil debugging tadi.
"Terus kalau gak berhasil gimana bang ?"
Tenang pemirsa, banyak jalan menujuhatimu Roma. Kalau cara di atas tidak ampuh, maka silahkan dicoba cara kedua berikut.
2. Menambahkan script Meta Tag pada Template
Untuk cara yang kedua ini sifatnya permanent selama template blog tidak diganti. Kali ini kita akan menambahkan sedikit code script og:image pada tag element template. Dengan script ini, maka facebook akan otomatis mengenali meta image dari gambar yang kita pasang pada blogpost.
- Pertama silahkan login ke blogger
- Masuk ke menu "template" blog dan pilih "edit HTML"
- Kita akan dihadapkan pada barisan-barisan code (yang bagi sebagian blogger bikin pusing) hehe..
Lalu cari code </head>, caranya tekan Ctrl dan F pada keyboard secara bersamaan. Ketik </head> kemudian enter.
- Setelah itu silahkan paste /tempatkan script berikut tepat di atas code </head>
Postingan kali ini gue ingin berbagi tips kepada teman-teman pengguna blogspot. Mungkin apa yang akan gue share kali ini sudah basi dan banyak yang sudah tau. Namun yaa...namanya berbagi pengalaman, semoga bermanfaat lah ya :)
Beberapa saat yang lalu, gue pernah kesal karena postingan yang gue share ke facebook gambarnya tidak sama dengan yang ada pada postingan. Teman-teman pasti ada yang mengalami hal serupa toh ? Gambar yang muncul di facebook bukan gambar yang kita pasang di artikel. Lebih ngeselin lagi, gue pernah share beberapa artikel ehhh..gambar yang muncul itu lagi-itu lagi. Kadang yang muncul gambar (banner) komunitas yang gue pasang di blog, bahkan kadang gambarnya gak ada, kosong putih gitu aja di facebook. Kezell kan???
Masalah ini sebenarnya bukan serta merta kesalahan pada blog kita, namun kadang juga kesalahan si Facebook-nya. Hal ini biasanya dikarenakan facebook belum membaca meta image sesuai dengan algoritmanya. Lalu gimana supaya meta image sesuai ?
Berikut ada 2 cara yang cukup mudah untuk dilakukan agar gambar bisa sesuai dengan hasil postingan :
1. Memanfaat fasilitas Debugging yang disediakan Facebook
Cara ini paling simple. Namun kadang harus dilakukan berulang-ulang jika setiap kali ada postingan baru yang ingin di share dan gambarnya yang muncul berbeda.
- Pertama login ke akun facebook seperti biasa
- Silahkan copy link url postingan yang hendak di share dan paste di kotak "Enter a URL, access token, or Open Graph Action ID"
- Setelah itu klik " Debug"
- Hasilnya di bawah akan terlihat postingan dengan thumbnail gambar yang sesuai (ada) dalam postingan.
- Setelah itu, silahkan kembali ke blogpost dan klik share pada postingan, maka thumbnail gambar yang muncul akan sama dengan hasil debugging tadi.
"Terus kalau gak berhasil gimana bang ?"
Tenang pemirsa, banyak jalan menuju
2. Menambahkan script Meta Tag pada Template
Untuk cara yang kedua ini sifatnya permanent selama template blog tidak diganti. Kali ini kita akan menambahkan sedikit code script og:image pada tag element template. Dengan script ini, maka facebook akan otomatis mengenali meta image dari gambar yang kita pasang pada blogpost.
- Pertama silahkan login ke blogger
- Masuk ke menu "template" blog dan pilih "edit HTML"
- Kita akan dihadapkan pada barisan-barisan code (yang bagi sebagian blogger bikin pusing) hehe..
Lalu cari code </head>, caranya tekan Ctrl dan F pada keyboard secara bersamaan. Ketik </head> kemudian enter.
- Setelah itu silahkan paste /tempatkan script berikut tepat di atas code </head>
<b:if cond='data:blog.pageType == "item"'>
<meta content='Facebook ID' 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>
Note : Facebook ID di isi sesuai dengan milik sendiri. ID bisa dilihat di belakang link url facebook (https://www.facebook.com/xxxxxx(facebook id))
- Kemudian klik "save template"
- Silahkan buka postingan dan share ke facebook.
Gimana? Cukup singkat dan mudah bukan?
Semoga tips ini dapat membantu teman-teman sekalian yang sering mengalami gambar error atau berbeda saat share postingan ke facebook. Jika ada kesulitan dan ingin bertanya, jangan sungkan-sungkan untuk meninggalkan jejak ya ;-)