Cara Mengatasi Thumbnail Link Saat Share di Facebook

4:50:00 PM

Cara Mengatasi Thumbnail Link Saat Share di Facebook

Belakangan, Raisa gue sering mendengar keluhan teman-teman blogger tentang thumbnail post yang nggak muncul ketika mereka men-share artikelnya di Facebook ataupun media sosial lainnya. Mungkin, banyak juga yang menganggap hal ini nggak penting. Bukannya nggak penting, tapi nggak tau juga solusinya gimana, jadi males dan ngebiarin aja thumbnail yang nongol nggak sesuai dengan postingan. Padahal, gambar dan deskripsi yang muncul ketika kita share sebuah link, cukup penting untuk menarik pembaca. Sampe gue aja udah share soal optimasi gambar postingan. Ye, kan?


Sambil nyelem, minum kuah Indomi, alias ngebantu temen blogger sekalian ngisi postingan di bulan Januari ini. Muehehehe.

Algoritma yang dipake Facebook adalah melakukan scan dari data yang ada di dalam link tersebut, ngambil datanya, lalu disimpan ke cache. Setelah itu, akan terjadi proses crawl di mana Facebook men-scan berbagai teks yang terlihat, hyperlink, dan konten berbagai tag (contohnya meta tag yang berisi keyword gitu, lho). Sewaktu meta data nggak ditemuin, secara otomatis Facebook akan ngambil data gambar dan teks apa pun yang kali pertama dia temuin di halaman tersebut. Makanya, nggak jarang saat di-share, yang nongol malah gambar banner dan deskripsi si empunya blog itu sendiri.

Emang sih, kalo share manual, kadang Facebook berbaik hati nampilin banyak gambar dan dikasih panah buat milih gitu. Tapi, sering juga pilihan ini nggak nampil. Lagian, maunya kan praktis ya, begitu post udah pasti thumbnail gambar dan deskripsinya muncul. Ini dia trik untuk mengatasi thumbnail link yang sesuai di Facebook (khusus yang menggunakan Blogger, ya).

1. Masuk halaman dashboard Blogger. Pilih Template, lalu Edit HTML.
2. Letakkan kode di bawah ini, sebelum kode <b:skin>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='
URL_gambar.jpg' property='og:image'/>
</b:if>



*URL_gambar.jpg diganti dengan URL gambar lo sendiri. Ini adalah kode untuk menampilkan gambar kalo blogpost lo nggak ada gambarnya. Misalnya, kalo pas postingan tanpa gambar, lo maunya nongolin thumbnail muka Syahrini. Taruh deh, URL gambar Syahrini di situ.

atau, bisa juga memakai tag Facebook Open Graph. (Pilih salah satu aja ye!)


<!-- Facebook Open Graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>



Kalo itu tadi kan, sekadar nampilin thumbnailnya aja. Kalo deskripsinya gimana?

Untuk deskripsi sendiri nggak muncul karena Facebook nggak menemukan yang dicari. Facebook mengenali tag paragraf atau <p>, sedangkan tag otomatis dari Blogger adalah <div>. Kalo lo punya masalah deskripsi tulisan yang nggak sesuai, bisa dicoba dengan menambahkan tag paragraf sebelum mengisi isi postingan. Tapi, bikinnya di bagian HTML, bukan compose. Dan, ketika menuliskan tag ini, jangan langsung dibalikin ke compose sebelum di-save. Karena tag-nya akan kembali ke <div>. Agak ribet ye?


<p>Isi postingan lo</p>


Nah, setelah tahapan-tahapan di atas dilakuin, alangkah baiknya kita ngosongin cache di Facebook dengan cara buka link ini -> https://developers.facebook.com/tools/debug/.  Masukin link blog lo, lalu klik Debug.

Taraaaa, langsung dicobain aja, deh. Tapi, backup template-nya dulu dan jangan lupa ngeletakin script-nya di mana. Kalo salah kan, bisa berabe.

Kebanyakan sih, template responsive udah otomatis ada social media tag yang disisipin sama sang desainer. Kalo yang nggak ada, ya, bikin sendiri begituuuu, Shaaay~

Udah ya, gue mau piknik sama Keenan Pearce dulu. Bye.

You Might Also Like

16 comments

Comments
16 Comments
  1. paling aman aku pakei debugger yang di fb hwehhe..but makasih yaah

    ReplyDelete
    Replies
    1. sayangnya, harus dilakukan berkali-kali.

      Delete
  2. Bisa langsung praktik nih. ^^ Makasih sharingnya

    ReplyDelete
  3. Kalau buat blog platform WP gimana ya mbak? :(

    ReplyDelete
    Replies
    1. WP khususnya udah punya plugin SEO sendiri. Kalo mau enak pake Yoast. Tapi sebenernya WP udah support OpenGraph sama Twitter Card juga kok.

      Delete
  4. Kalo open graph ini karena di wp saya pake setting plugin seonya dengan muka sendiri. Kalo muka syahrini takut disuruh bayar saya. Hahaha. Kalo ada gambarnya ya pake featured imagenya. Kalo di blogger baru tahu di sini Mbak. Makasih yaa.. :)

    ReplyDelete
  5. Emang blogger tuh ga bisa lepas sama html ya. Aku dari dulu nganggep html tuh serem tapi kalo dicoba dan bisa asik juga sik xD

    Nanti coba aah. Thanks udah sharing kak Funyyyy xD

    ReplyDelete
  6. keren banget kamu kakaaaaaakkk

    bukanbocahbiasa(doT)com

    ReplyDelete
  7. makasiiiih Funy, kamu blogger muda berbakat... jangan bosen-bosen share ilmu buat aku blogger mak-mak kurang update :D

    ReplyDelete
  8. Keren kakak, langsung praktik nih!!

    ReplyDelete
  9. makasih infonya.. save dulu.. ntar dicoba :D

    ReplyDelete
  10. kalau wp gimana Mba? hehehe, bingung.

    ReplyDelete
  11. mantap bermanfaat salam dari eketawa.com

    ReplyDelete
  12. thanks gan info ny sangat membantu

    ReplyDelete
  13. aslm.wr.wb
    konten yang manis . . . saya punya masalah hampir mirip dengan ini, dimana salahsatu artikel saya snippet deskripsi sama snippet gambarnya tidak berfungsi sedangkan linknya berfungsi dengan baik, ternyata setelah saya debug di fb masalahnya ada di permalink saya yang dianggap spamming oleh fb . . . solusinya saya ganti judul dan ganti permalink artikel tersebut. alhamdulillah normal kembali,,,terimakasih ya mbak bukan raisa...hehehe jangan lupa mampir digubuk saya www.kursuskomputergratis.com, saya terbuka untuk bertukar link.
    wslm

    ReplyDelete