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 ;-)
16 comments
Write commentsMakasih tutorialnya mas..
ReplyWahhh, yang ke dua aku ilmunya gak nyampe. Harus praktek langsung sama pakarnya nih.
ReplySama-sama mba, semoga membantu :)
ReplyWahhh..mau juga donk di ajarin sama pakarnya :D
Replypake dua cara diatas, gagal semua bang. Pake kodepun salah, yg keluar tetep aja gambar header. Adakah cara lain?
ReplyApakah sudah dicoba share dengan copy-paste link? Atau bisa dicoba share dengan browser yang berbeda.
Replyyang pertama.. ada yang berhasil ada juga yang vgagal.. untuk mencoba yang ke 2 sama seperti mba hermini.. takut salah lae... kapan kapan kita coba bareng ya :)
Replykalo untuk wordpress, gimana?
ReplyAsseekkk...mau diajarin blogspot.
ReplyWordpress malah lebih mudah, tinggal install plugin atau tambahin feature image ;-)
ReplyKok masih beda ya ...gambar yg muncul, Gan...! ksh dong solusinya ?
ReplyBedanya gimana ? Gambar yang muncul masih dalam 1 artikel atau bukan ?
ReplySalam Kenal kak :) Terimakasih kak tipsnya
ReplySewa mobil Jogja harga murah terlengkap di Yogyakarta. Menyediakan Rental Mobil Jogja dengan sopir dan all in (mobil + sopir + BBM). harga rental mobil yogyakarta murah dan terjangkau, tersedia banyak pilihan di jogja
Kenapa jalan jalan ke Yogyakarta memilih Sewa Mobil Jogja?
Harga Sewa Mobil Jogja harga terjangkau
Pilihan armada Sewa Mobil Jogja lengkap
Unit mobil untuk Sewa Mobil Jogja nyaman dan aman
Sopir Sewa Mobil Jogja mudah dan berpengalaman
Alasan Kenapa Rental Mobil Menjadi Pilihan
Kebebasan dan Kenyamanan Dalam Sewa Mobil Jogja Murah
Ketenangan dan Keamanan Dalam Sewa Mobil Jogja Murah
Bisa Beristirahat Dengan Sewa Mobil Jogja Murah
Praktis Sewa Mobil Jogja Murah
Tarif Hemat Sewa Mobil Jogja Murah
Kapasitas Penumpang Luas Dalam Sewa Mobil Jogja Murah
Saya udah pasang Open Graph Fb seperti di atas memang gambar postingan muncul tetapi hanya di versi desktop atau melalui browser jika di buka di aplikasi facebook gambar tidak muncul udah cek di fb debbuger gambar kekecilan. Yang jadi pertanyaan gimana supaya gambar jadi responsive pada saat share ke fb bisa di lihat via aplikasi karena sebelumnya tidak pernah sebelum gaanti templete
ReplySama ajh mba saya juga. Pas di cek di fb debbuger ternyata gambar kekecilan biar responsive gimana yah
Replymas kalau di WP gmna ?
ReplyTerima kasih sudah mau berkunjung dan meninggalkan jejak di mari. EmoticonEmoticon