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 :
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.
Daftar Isi Postingan
Untuk Mengatur Tittle/Judul
Judul yang anda inginkan
<meta property="og:title" content="" />
Untuk Mengatur Snippet Deskripsi
Deskripsi konten yang anda inginkan
<meta property="og:description" content="" />
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 != ""'>
<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.
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~
ilham
jadi pas share link di facebook muncul deskripsi nya ya sob?
Syakir Rahman
yap benar sekali
finance-jurnal
maksih banget gan infonya, jadi ga usah copy ulang deskripsinya
Syakir Rahman
yo, sama-sama 😀
WSC BIOLO ASLI RESMI
tak cobain ya gan
Syakir Rahman
Sip brooh
enlard
ini kalau di search engine berpengaruh tidak mas,,,
Syakir Rahman
Tidak sama sekali.. Kalo di search engine yang pengaruh itu meta description sama title aja
Achmad Muharya
Kalo untuk Twitter card, gimana mas ?
Syakir Rahman
Ini cuma buat facebook aja mas hehe
muachrus
mantab mas,,, akhirnya blog saya sembuh setelah baca artikel ini
oka
kalau di wordpress gimana gan ?
Syakir Rahman
Itukan udah dijelasin, pakai plugin aja kalo di wordpress self hosted.. kalo wordpress.com ga bisa diakalin
Ginanjardp
Artikelnya membantu 😛
Prisma Try Laksana
Jadi ini kodenya, masih bingung dengan yang beginian mas 😀
Syakir Rahman
Berarti harus belajar terus mas 😀 heheh
putraaadam
kalau sudah terpasang seperti di atas efeknya langsung kelihatan apa harus menunggu beberapa waktu tertentu
Syakir Rahman
Langsung kelihatan mas.. Kalo ngga, berarti masih ada yang error
Akbar
Ini yang saya cari selama ini…maklum masih belajar gan .. 🙂
sangat membantu artikelnya…terima kasih mas syakir…maju terus websitenya (y)
Syakir Rahman
Sama-samaa… Amiiin.. terimakasih doanya ^_^
sugiono
gan ane dah coba, tpi kenapa klo pada postingan ada gambar, deskripsinya ndak keluar, padahal di penelusuran dah di isi deskripsinya,, mohon solusinya gan.
Syakir Rahman
Dari yang saya lihat, di blog masnya belum menggunakan teknik di atas ?
Perawatan Mobil
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
Syakir Rahman
Barusan saya lihat lewat inspect element, kodenya belum ditambahkan
Belajar SEO
bagaimana Cara menampilkan gambar dan rating postingan di google
Syakir Rahman
Coba baca posting ini : http://christiantatelu.blogspot.com/2012/04/cara-menampilkan-rating-bintang-di.html, di blog ini belum ada tutorialnya
jatibagus furniture mebel jati jepara
kalau posting di google plus bagaimana ? saya pakai wordpress selfhosting
Syakir Rahman
Kalau google+ biasanya sudah otomatis..
ngoge
Wah, infonya sangat lengkap dan bermanfaat. Terima kasih banyak 🙂
ngoge
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.
Syakir Rahman
Kadang yang seperti itu ada masalah dari render facebooknya..
Arkop4t Official
Kunjungi balik ya gan : http://arkop4t.blogspot.com 🙂
Mang Koetoe
Nah ini dia yang saya caricari…
Makasi banyak infonya gan…
riizhu
Owh, ternyata menggunakan ini, kirain gak bisa diutak-atik lagi share fbnya, makasih banyak gan, sangat membantu sekali^^
Liza
thanks for sharing ya, kebetulan blog lagi berulah dengan opengraphnya sehingga link yang dishare ke fb ga muncul foto
Denz
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?
Syakir Rahman
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
evan
wah keren gan tutorialnya,langsung bisa
irham
joss banget ni artikel, masalah ane langsung bisa fix, thanks brader 🙂
Sang Putu Widya Artawan
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…?
Syakir Rahman
Itu ada masalah di meta descriptionnya mas.. coba ganti dengan klik menu SEO -> Title & Meta, pasti meta description untuk homenya masih kosong
Sang Putu Widya Artawan
Sudah isi kok lengkap mas, tapi hasilnya tetap seperti itu, itu kenapa yaa…? saya dah cari dan ubek” google ga ketemu”…:'(
Nunk Arif
Iya neh kadang thubnail yg muncul bukan isi postingan kita, kadang widget yg muncul, mksh ya sharingnya 🙂
Nunk Arif
Mas udh dicoba tapi masih belum bisa ya, ga muncul thubnail yg dipostingan ato deskripsi, kenapa ya?
Syakir Rahman
Mungkin pemasangannya belum bener ? atau coba adakah tag meta lain yang bikin error
Free JAV
terima kasih mas sangat membantu sekali
Anna Novianti
Gan saya udah coba, tapi ada beberapa masalah belum clear, kalo dekripsi udah muncul, tapi tumbnailnya yang munculnya berantakan dan kurang cocok sama artikelnya.
Syakir Rahman
berantakan gimana gan ?
Mujib
Kalo untuk mengganti keterangan url yg dibawahnya snipped deskripsi yg muncul di facebook gmn mas?
Syakir Rahman
keterangan url yang dimananya yah ?
Abaya
url yang www{dot}syaikurohman{dot}net biar bisa diganti
Syakir Rahman
Itu otomatis sesuai website yang di share
karimunjawa
kalau di wordpress gimana ya om? gak nemu2 dari kemaren
Syakir Rahman
pakai plugin.. itu di atas dikasih rekomendasi pluginnya
Dasep
Gan, supaya judul/nama blog ga tampak pada saat share postingan ke facebook gimana ya caranya?
Syakir Rahman
Pake tag di atas, tapi di kosongin nilainya
Ipo
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..
Syakir Rahman
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
Usman Efendi
gan, punya ane ga ada kode adanya cuman itu gimana? trus kode buat snippet, thumbnail, dll itu cuman dicopas aja atau perlu disesuaikan lagi?
Syakir Rahman
Dicopas, lalu disesuaikan lagi..
Usman Efendi
gan, punya ane ga ada kode . adanya cuman itu gimana? trus kode buat snippet, thumbnail, dll itu cuman dicopas aja atau perlu disesuaikan lagi?
Syakir Rahman
Copas dulu terus disesuaikan lagi.. coba praktekkan langkah-langkahnya sambil diterapkan
eko
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
Syakir Rahman
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..
Wartainfo
Makasih Tipsnya..
Media sosial memang sangat bermanfaat untuk meningkatkan ranking website/blog di search engine..
Febri
terima kasih infonya sangat bermanfaat banget………
Zaen Bangza
Mas mau Tanya.. Cara diatas berfungsi gak kalau masalahnya tiap kali posting ke fb yang muncul photo profile g+.. Ditunggu ya maz jawabannya
Syakir Rahman
Coba dulu aja.. udah di tes ko itu
ahmad
mau saya coba dulu ahh ,,, maksih mas
AnimovieID
ijin coba mas buat promo ke fb
bayu
setelah beberapa hari di cari baru ketemu ni artikel. trimakasih ya gan lagi sya coba ni semoga berhasil 😀
Arif
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 ?
ahmad
terimakasih gan,. artikel nya sangat membantu..
suryadi
untuk facebook saya udah coba dan berhasil kalau untuk google plus berfungsi tidak……????
harto
bos mau tanya kenapa pic thumbail sy tampilan pincnya tetap sama ketika artikel wordpress sy share di facebook? jd aritkel yg sy share lebih dari 1 tp tmpilan pictum bailnya tetap sm?
syakirurahman
Itu artinya di setiap halaman posting meta tag untuk thumbnailnya sama di semua halaman, atau tidak di set.
kadal emas
mantabb… berhasil ternyata…
Tutor Bisnis
terimakasih tutorialnya sangat membantu dan semoga bermanfaat
Anggi Pradana
makasih min