Sudah sebulan lamanya blog klien saya tidak bisa menampilkan gambar thumbnail kalo sharing article di twitter atau facebook. Berbagai cara saya coba, berbagai plugin yang saya instal tapi ternyata thumbnail tetap tidak muncul. Hampir menyerah rasanya. Pengen tau, bagaimana saya menemukan solusinya?
Hasil googling di internet sepertinya cukup banyak yang mengalami hal yang sama. Penyebabnya juga sangat beraneka macam. Mungkin saja solusi saya tidak bisa diterapkan di blogmu. Sebagai informasi blog saya menggunakan plugin Jetpack dengan update terbaru. Sebenarnya plugin ini sudah menyediakan feature sharing ke facebook dan beberapa social media lainnya. Tapi kenyataannya setiap sharing selalu gambar thumbnail tidak muncul.
Cara Kerja Gambar Thumbnail di Facebook
Munculnya gambar thumbnail di facebook menggunakan protokol yang disebut Opengraph. Opengraph itu ditandai dengan meta tag “og:” contohnya seperti dibawah ini
<br /><meta property="og:image" content="http://example.com/ogp.jpg" /><br /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><br /><meta property="og:image:type" content="image/jpeg" /><br /><meta property="og:image:width" content="400" /><br /><meta property="og:image:height" content="300" /><br />
Hal yang harus diperhatikan adalah meta tag opengraph dapat bekerja dengan baik saat kamu sharing adalah
- pastikan posisi meta tag opengraph berada di dalam tag <head> </head>
- Meta tag opengraph hanya dimunculkan sekali saja.
Jika kedua syarat itu tidak dipenuhi maka saat sharing akan sangat mungkin gambar thubnail tidak akan muncul. Bagaimana untuk memastikannya? Kamu buka saja artikel yang akan di sharing dengan Firefox kemudian tekan tombol Ctrl+U untuk melihat source code halaman web yang akan disharing. Kemudian tekan tombol Ctrl+F untuk melakukan pencarian. Ketik og: dalam kotak search untuk memastikan kedua syarat di atas telah terpenuhi.
Mengaktifkan Hotlink
Jika kamu tidak mengaktifkan hotlink di web servermu, maka kamu tidak perlu membaca pada bagian ini. Apa sih hotlink itu? Hotlink itu adalah istilah yang merujuk pada praktek yang menampilkan gambar di web tapi gambar dengan hanya me-link url gambar itu di web orag lain. Apa akibatnya? Tentu saja bandwith web orang lain akan terpakai. Inilah yang disebut pencuri bandwith. Oleh karena itu cara mengaktifkannya di web hosting pada bagian Security » Hotlink Protection.
Ternyata kesalahan dalam setting hotlink bisa mengakibatkan opengraph tidak bisa menampilkan gambar thumbail di facebook. Agar facebook tetap bisa menampilkan gambar thumbnail dari webmu dan di saat bersamaan kamu tetap mengaktifkan hotlink protection maka jangan lupa untuk mengaktifkan Allow Direct Request seperti gambar dibawah.
Tools Untuk Mengetahui Opengraph Telah Berfungsi Dengan Baik
Ada satu masalah yang saya tidak bisa selesaikan yaitu, opengraph untuk artikel yang lama, sebelum saya menemukan solusi ini, masih tetap tidak bisa muncul gambar thumbnail ketika di sharing. Khusus untuk artikel yang baru sudah bisa bekerja sebagaimana mestinya. Lalu bagaimana untuk mengetahui apakah opengraph sudah bekerja dengan baik? Kamu bisa gunakan tools facebook di http://developers.facebook.com/tools/debug. Kamu tinggal masukkan url halaman web yang akan disharing kemudian liatlah pada bagian Object Properties tag og:image bisa menampilkan gambar thumbnail dari halaman web. Jika bisa, maka itu artinya opengraph telah bekerja dengan baik. Lalu bagaimana dengan artikel lama yang tetap tidak bisa muncul? Entahlah, saya juga belum menemukan solusinya. Apakah saya harus mereset semua thumbnail di blog klien saya ? Tapi untuk sementara saya sudah cukup puas.
Masalah Dengan Plugin Jetpack
Ada satu masalah yang sering muncul pada Jetpack berkaitan dengan opengraph yaitu kalau kamu menggunakan plugin yang sama2 menggunakan opengraph juga maka mungkin (tidak selalu) akibatnya opengraph bisa tidak bekerja dengan baik. Kenapa? Karena Jetpack secara otomatis mengaktifkan feature sharing. Untuk mengatasi masalah itu, masukkan kode berikut pada function.php
&lt;br /&gt;add_filter( 'jetpack_enable_opengraph', '__return_false', 99 );&lt;br /&gt;
Function.php terletak di menu Appearance » Editor. Pilih Theme Function (functions.php) pada sidebar kanan. Saya tidak menambah kode ini karena opengraph telah berfungsi dengan baik walaupun tanpa kode tambahan tersebut. Siapa tau berguna buatmu 🙂
Theme WordPress yang Kamu Pakai – Updated
Artikel ini saya updated, karena saya menemukan penyebab baru kenapa gambar thumbnail tidak muncul saat sharing di facebook.
Saya kebetulan menggunakan dua buah theme premium untuk Blog client saya. Blog Client saya yang pertama menggunakan theme dari MyThemeShop. Saya tertarik menggunakan theme-nya karena murah 😀 . Saya lupa dulu beli berapa tapi seingat saya murah. Belakangan saya bingung, kenapa theme ini kadang (artinya tidak selalu) tidak bisa muncul gambar thumbnail. Semua cara di atas sudah saya ikuti, tapi tetap aja kadang tidak bisa muncul. Akhirnya pasrah aja. Karena masalah gambar thumbnail sharing facebook tidak muncul itu ga sering-sering banget.
Nah, theme yang kedua yang saya gunakan adalah theme wordpress dari Rockettheme. Harganya sih emang lebih mahal. Saya beli theme ini bukan karena ga suka MyThemeShop tapi saya suka dengan framework Gantry yang sangat fleksibel dalam mengatur layout blog. Harganya sih emang lebih mahal. Tapi ternyata masalah gambar thumbnail saat sharing di facebook hampir tidak muncul. Bisa dibilang 99% selalu muncul gambarnya saat sharing di facebook. Sepertinya harga memang tidak bohong. 🙂
Tabe’
Mudah Belajar Blog Wordpress 
mas, kalo web saya itu bermasalah pada bagian thumbnail potonya juga, tapi poto yang masuk tidak sesuai dengan judul artikel, atau url yang saya share. Itu gimana ngatasinya mas ?
LikeLike
Bisa dilihat disini mas http://masterbama.blogspot.com/2014/06/cara-mengatasi-masalah-gambar-artikel-di-facebook.html
LikeLike
link-nya not found gan 😦
LikeLike
ada contoh artikelnya ga, mas? biar saya coba sharing
LikeLike
Website saya juga tidak muncul kang. website saya di buat dengan html http://www.koshosting.com. gemana agar muncul thumnailsnya di facebook
LikeLike
websitenya kayaknya ga pake wordpress, gan. Maaf, saya juga tidak tau
LikeLike
buka https://developers.facebook.com/tools/debug/og/object/ lalu masukan url klik yang fetch new scrape 🙂 hehe
LikeLike
Nah… nah.. masalah yang saya beda tapi mirip mas. Bukan hanya image yang tidak muncul/muncul acak, tapi setiap saya share ke facebook yang muncul url homepage. Bagimane tuch mas… 😦
LikeLike
Kalo setiap saat muncul gambar yang sama saat sharing di facebook, Sepertinya masalahnya itu di template yang kamu pakai.
LikeLike
oo mythemeshop emang trobel ya…pantesan sudah pasang plugin regenerate thumnail tapi gambar tetap gak mau muncul…hiks
LikeLike
iya gan, saya juga sudah bongkar pasang macem-macem, instal uninstal berbagai macam plugin tetapi kadang tetap ga muncul thumbnail. Setelah coba rockettheme, jarang error 🙂
LikeLike
wah ane baru 3 minggu pake thema ini…hehehe
LikeLike
infonya menarik om. tapi saya masih belum bisa pasang text Opengraphnya. belum jelas lokasinya
LikeLike
tergantung theme. Kalo theme standar, biasanya di single.php
LikeLike
sudah saya otak-atik. kayaknya memang dari themplate nya
LikeLike
makasih mas sangeat membantu 🙂
LikeLike
akhirnya bisa normal lagi thumbnailnya waktu dishare…terima kasih banyak infonya mas
LikeLike
Your welcome. Senang bisa bermanfaat bagi orang lain 🙂
LikeLike
Saya memakai MyThemeSHop, dan waktu awal2 muncul semua tuh feature image, dll.
Tapi belakangan ini kok malah nggak bisa muncul ya?
saya juga sudah install plugin WP Facebook Open Graph protocol, tetapi masih saja ada keterangan eror waktu cek di fb debugger:
Errors That Must Be Fixed
Missing Required Property The ‘og:type’ property is required, but not present.
Notice
Warnings That Should Be Fixed
Inferred Property The ‘og:url’ property should be explicitly provided, even if a value can be inferred from other tags.
When shared, this is what will be included
Notice
fb:app_id hasn’t been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Otherwise, the default app id( 966242223397117 ) will be assigned.
Bingung saya,,
LikeLike
wah mantep banget gan,, dari sekian lama mencari jawaban untuk masalah itu , sekarang saya ganti thema dan alhasil mantep banget,
mampir gan ke
http://gudanginfo.online/
LikeLike
Ulasan yang Menarik.. TOP BANGET..!!!
LikeLike
kalau pengen masukin kode di Funcsion.php diletakkan di mana gan?
LikeLike
terima kasih sy coba sdh bisa http://www.carikerjamks.com/
LikeLike
Mas imran, tolong dong dgn masalahku yg sama, foto2 yg muncul pd bersalahan….
LikeLike
Contoh artikelnya banya d Categories… foto2 yg muncul bkn thumbnail pertama
LikeLike
Punya ane juga gak muncul gan ketika di share di fb pd homepage aja, tetapi artikelnya muncul..
LikeLike
Bangke, gw pakek ini web gw error. Gak berkah hidupmu!
LikeLike
terima kasih banyak ilmunya
LikeLike