Mengatur Tittle, Snippet Deskripsi & Thumbnail Posting di Facebook

Ketika anda berbagi atau nge-share URL posting anda di facebook, maka secara otomatis facebook akan memuat judul, gambar dan deskripsi posting blog yang anda share, seperti gambar dibawah ini :

mengatur snippet deskripsi di facebook

Snippet ini sangat bermanfaat untuk meningkatkan CTR(Click through rate) atau kemungkinan dikliknya link yang anda bagikan. Snippet ini memberikan informasi singkat tentang halaman web yang anda share. Oleh karena itu, anda harus membuatnya menarik dan orang-orang penasaran dan mengklik posting yang anda share.

Mungkin anda mengira bahwa itu di-load secara otomatis tanpa bisa kita utak-atik. Padahal sebenarnya kita bisa mengatur gambar thumbnail yang muncul, deskripsi, bahkan judul/tittlenya sesuai kebutuhan. Caranya adalah dengan melengkapi halaman yang anda share dengan kode html dibawah ini.

Untuk Mengatur Tittle/Judul


<meta property="og:title" content="Judul yang anda inginkan" />

Untuk Mengatur Snippet Deskripsi


<meta property="og:description" content="Deskripsi konten yang anda inginkan" />

Untuk Mengatur Gambar Thumbnail


<meta property="og:image" content=""/>

Ketiga kode diatas ditempatkan diantara tag <head> dan </head> sebagaimana tag <meta> lainnya.

Masalahnya, jika anda menggunakan cms seperti wordpress atau blogger pada blog anda, tidak mungkin anda menyertakan kode tersebut secara manual pada tiap halaman. Oleh karena itu diperlukan koding tambahan ataupun plugin agar markup itu ditambahkan secara otomatis pada setiap halaman.

Jika anda menggunakan WordPress Self Hosted, anda bisa menggunakan plugin WP Facebook Open Graph protocol untuk mengotomisasinya.

Sedangkan jika anda menggunakan Blogger, anda bisa mengikuti cara dibawah ini :

1. Buka Dasbor blogger > Template > Edit HTML

2. Setelah ditampilkan editor html, masukkan kode dibawah ini diatas tag </head> atau diantara <head> dan </head>.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh6.googleusercontent.com/-Gqxzyx1D-qM/Sd6gUSMyvxI/AAAAAAAAAIA/67EBdl4ZQ2k/w354-h472-no/Holland1.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>

Penjelasan Kode

1. Kode berwarna ungu adalah untuk menentukan gambar thumbnail yang akan muncul. Kode diatas menentukan gambar thumbnail berdasarkan gambar pertama yang ada pada posting.

2. Kode berwarna hijau adalah url menuju ke gambar yang akan menjadi thumbnail jika posting anda tidak memiliki gambar.

3. Kode berwarna merah adalah untuk menentukan snippet deskripsi yang akan muncul berdasarkan ‘Preferensi pencarian’ atau ‘Search description’ yang dimasukkan saat pembuatan posting.

Preferensi pencarian

 

4. Kode berwarna biru adalah untuk menentukkan title yang akan muncul berdasarkan nama halaman atau judul halaman posting anda.

Sedangkan jika anda ingin menentukan snippet gambar untuk homepage atau halaman utama, anda bisa menambahkan kode berikut ini dengan penempatan yang sama :

<b:if cond='data:blog.homepageUrl'>
<meta content='url ke default gambar yang diinginkan' property='og:image'/>
</b:if>

Yap, begitulah caranya. Jika kurang jelas silahkan tanyakan dikomentar. Sekian.. Semoga bermanfaat!

~Muhammad Syakirurohman~

73 Comments

  1. jadi pas share link di facebook muncul deskripsi nya ya sob?

  2. maksih banget gan infonya, jadi ga usah copy ulang deskripsinya

  3. tak cobain ya gan

  4. ini kalau di search engine berpengaruh tidak mas,,,

  5. Kalo untuk Twitter card, gimana mas ?

  6. mantab mas,,, akhirnya blog saya sembuh setelah baca artikel ini

  7. kalau di wordpress gimana gan ?

  8. Artikelnya membantu 😛

  9. Jadi ini kodenya, masih bingung dengan yang beginian mas 😀

  10. kalau sudah terpasang seperti di atas efeknya langsung kelihatan apa harus menunggu beberapa waktu tertentu

  11. Ini yang saya cari selama ini…maklum masih belajar gan .. 🙂
    sangat membantu artikelnya…terima kasih mas syakir…maju terus websitenya (y)

  12. gan ane dah coba, tpi kenapa klo pada postingan ada gambar, deskripsinya ndak keluar, padahal di penelusuran dah di isi deskripsinya,, mohon solusinya gan.

  13. Mas syakir, saya sudah coba sesuai yang anda tuliskan diatas. Tetapi setiap postingan yang di share masih belum muncul foto sesuai isi konten.
    Mohon pencerahannya..

    Terima kasih

  14. bagaimana Cara menampilkan gambar dan rating postingan di google

  15. kalau posting di google plus bagaimana ? saya pakai wordpress selfhosting

  16. Wah, infonya sangat lengkap dan bermanfaat. Terima kasih banyak 🙂

  17. Oh ya, tapi btw kok nggak semua konten berhasil ya mas? Masih ada artikel yang deskripsi postingannya nggak rapi saat di share ke FB. Padahal saya sudah pakai pluginnya. Mohon pencerahan.

  18. Kunjungi balik ya gan : http://arkop4t.blogspot.com 🙂

  19. Nah ini dia yang saya caricari…
    Makasi banyak infonya gan…

  20. Owh, ternyata menggunakan ini, kirain gak bisa diutak-atik lagi share fbnya, makasih banyak gan, sangat membantu sekali^^

  21. thanks for sharing ya, kebetulan blog lagi berulah dengan opengraphnya sehingga link yang dishare ke fb ga muncul foto

  22. Mungkin pertanyaan saya ini gak nyaman, tapi berkaitan dikit hehe.. Jika saya menambahkan search description seperti diatas beberapa widget yang ada di bawah Postingan saya hilang seperti permalink, tombol share dan artikel terkait, kenapa ya? Maka dari itu saya suka kosong kan saja search description nya, apakah akan berdampak buruk?

    • Mungkin itu disebabkan karena adanya tag html yang tidak ketutup.. karena sangat jauh hubungannya antara tag meta di atas dengan widget.. saya kira itu disebabkan oleh hal lain..
      kalau description untuk share fb ini ga masalah, kalo meta description sebaiknya harus tetap ada

  23. wah keren gan tutorialnya,langsung bisa

  24. joss banget ni artikel, masalah ane langsung bisa fix, thanks brader 🙂

  25. Saya ingin bertanya, mungkin bekaitan sedikit…

    Saya salah satu user WP selfhosting,, pas saya iseng” cek di google dengan mengetik http://www.minyakkutuskutusbali.com kenapa yang muncul keterangannya “alexa traffic bla bla bla” yaa…?

    Kenapa bukan deskripsi web yang sudah saya buat sebelumnya di plugin SEO by Yoast…?

  26. Sudah isi kok lengkap mas, tapi hasilnya tetap seperti itu, itu kenapa yaa…? saya dah cari dan ubek” google ga ketemu”…:'(

  27. Iya neh kadang thubnail yg muncul bukan isi postingan kita, kadang widget yg muncul, mksh ya sharingnya 🙂

  28. Mas udh dicoba tapi masih belum bisa ya, ga muncul thubnail yg dipostingan ato deskripsi, kenapa ya?

  29. terima kasih mas sangat membantu sekali

  30. Gan saya udah coba, tapi ada beberapa masalah belum clear, kalo dekripsi udah muncul, tapi tumbnailnya yang munculnya berantakan dan kurang cocok sama artikelnya.

  31. Kalo untuk mengganti keterangan url yg dibawahnya snipped deskripsi yg muncul di facebook gmn mas?

  32. kalau di wordpress gimana ya om? gak nemu2 dari kemaren

  33. Gan, supaya judul/nama blog ga tampak pada saat share postingan ke facebook gimana ya caranya?

  34. Halo gan, deskripsi blogspot saya kalau dishare munculnya memiliki format seperti ini:
    JUDUL JAM POSTING PARAGRAF PERTAMA, misal artikel saya seperti artikel agan ini, jadinya seperti ini:

    Mengatur Tittle, Snippet Deskripsi & Thumbnail Posting di Facebook 16.20 Ketika anda berbagi atau nge-share URL posting anda di facebook, maka secara otomatis facebook akan memuat judul…

    Jadi judulnya diulang, malah ada jam posting segala, malah kadang ada kata “EDIT” juga. Nah, saya ingin yang muncul langsung deskripsi paragraf pertama saja, caranya bagaimana ya?
    Saya sudah pakai meta description seperti yang agan tulis di atas masih tidak bisa.

    Contoh lebih jelas bisa klik: http://www.trendingnewshub.net/2016/02/amazing-physicists-detect-gravitational.html, template saya sama seperti itu. Kalau artikel itu dishare, deskripsi yang muncul menampilkan judul dan jam posting juga.

    Mohon berkenan membantu 🙂

    Terima kasih gan..

    • Kalau sudah menjalankan cara diatas dan masih gagal juga, berarti ada yang salah di template blognya.. Ada kode yang salah tulis, atau menimbulkan error seperti itu.. Coba hubungi pihak pembuat templatenya, karena dia yang tau sama kode templatenya.. kalau tidak respon, sebaiknya ganti template saja

  35. gan, punya ane ga ada kode adanya cuman itu gimana? trus kode buat snippet, thumbnail, dll itu cuman dicopas aja atau perlu disesuaikan lagi?

  36. gan, punya ane ga ada kode . adanya cuman itu gimana? trus kode buat snippet, thumbnail, dll itu cuman dicopas aja atau perlu disesuaikan lagi?

  37. jadi beberapa minggu ini ngga’ update blog nah pas update udah selesai pas mau di share di facebook muncul pop up buat share di facebook biasanya yang pertama belom ada thumbnail cuma deskripsi aja nah biasanya ane close terus mencet tombol share lagi dari postingan blog biasanya muncul thumbnailnya kali ini muncul sih tapi yang muncul gambar wrench/pensil/mail bukan gambar thumbnail postingan ane, padahal kalo di sharelinknya (copy paste link) di post facebook keliatan beberapa gambar thumbnail salah satunya ada thumbnail postingan ane tapi gambarnya urutan ke 3/4 nah kalo lewat sharelink bisa sih dipilih tapi kalo lewat tombol share langsung dari blogpost aneh kaga bisa padahal postingan yang lama kaga bermasalah normal aja mungkin ada solusinya?

    terima kasih
    sorry panjang

    • Kalo mau share jangan lewat popup yang muncul setelah posting.. biasanya juga itu share ke google plus.. yang mana dalam hal ini berbeda..
      kalo share coba copas urlnya aja di facebook.. kalo sudah ngikutin step di atas, saya kira ga akan bermasalah..

  38. Makasih Tipsnya..

    Media sosial memang sangat bermanfaat untuk meningkatkan ranking website/blog di search engine..

  39. terima kasih infonya sangat bermanfaat banget………

  40. Mas mau Tanya.. Cara diatas berfungsi gak kalau masalahnya tiap kali posting ke fb yang muncul photo profile g+.. Ditunggu ya maz jawabannya

  41. mau saya coba dulu ahh ,,, maksih mas

  42. ijin coba mas buat promo ke fb

  43. setelah beberapa hari di cari baru ketemu ni artikel. trimakasih ya gan lagi sya coba ni semoga berhasil 😀

  44. saya sebelumnya merubah menjadi pas lbh dr setngah bulan saya coba cek share ke fb kok ada yang muncul deskripsi blog ada yang deskripsi artikel, akhirnya saya hapus itu deskripsi blog yang saya isi di edit html, apa gara-gara saya edit ?

  45. untuk facebook saya udah coba dan berhasil kalau untuk google plus berfungsi tidak……????

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *