Mengatasi Masalah Gambar Thumbnail Saat Sharing di Facebook

masalah-thumbnail-sharing-facebookSudah 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.

hotlink-protection
Setting Hotlink Protection

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

&amp;lt;br /&amp;gt;add_filter( 'jetpack_enable_opengraph', '__return_false', 99 );&amp;lt;br /&amp;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’

Protected by Copyscape

26 thoughts on “Mengatasi Masalah Gambar Thumbnail Saat Sharing di Facebook”

  1. 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 ?

    Like

  2. 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… ๐Ÿ˜ฆ

    Like

    1. 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 ๐Ÿ™‚

      Like

  3. 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,,

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.