Cara share link website di facebook
Seperti yang kita ketahui, facebook akan melakukan crawling data saat kita menginputkan link website pada kolom update status.
Namun apa yang kita dapatkan apabila metadata website tersebut tidak lengkap?
Facebook hanya akan menampilkan link saja tanpa ada informasi lengkap terhadap website tersebut, seperti pada gambar dibawah ini:
Lalu bagaimana jika kita ingin website yang ter-crawling oleh facebook menampilkan informasi lengkap?
Permasalahan
Tanpa metadata yang lengkap, Facebook hanya akan menampilkan link saja tanpa ada informasi lengkap terhadap website tersebut.
Bagaimana cara share link website di facebook yang benar
Berikut adalah tata cara share link website di facebook yang benar
Persiapkan Metadata
Anda harus menuliskan beberapa baris kode metadata yang dapat dengan mudah dikenali oleh facebook.
<meta name="title" content="Judul Website Anda" /> <meta name="keywords" content="Keyword anda agar membantu pencarian di google" /> <meta name="description" content="Keterangan website anda" /> <link rel="image_src" href="alamat_url_gambar_preview_website_anda.jpg" />
Mari kita bahas satu persatu,
<meta name="title" content="Judul Website Anda" />
Akan menampilkan judul website anda
<meta name="description" content="Keterangan website anda" />
Akan ditampilkan sebagai deskripsi website anda
<link rel="image_src" href="alamat_url_gambar_preview_website_anda.jpg" />
Gambar yang akan ditampilkan oleh facebook untuk preview website anda
Hasil yang diharapkan
Apabila metadata sudah lengkap maka facebook akan menampilkan data lengkap website anda seperti dibawah ini:
Note: Perhatikan bahwa facebook akan menyimpan cache saat pertama kali crawling ke website anda.
Untuk memaksa agar facebook menghapus cache website anda, maka anda harus menginputkan nama url website anda di http://developers.facebook.com/tools/debug
Tekan tombol debug terus menerus hingga facebook berhasil mengcrawl website anda dengan metadata yang lengkap.
Kesimpulan
Dengan lengkapnya metadata yang kita siapkan di website kita, maka facebook akan dapat dengan mudah mengambil data yang ingin kita share.
Selamat mencoba 😀
27 Comments
Join the discussion and tell us your opinion.
Ternyata facebook juga bisa crawling yah…makasih infonya..saya akan cobain.
Pak, ini saya coba debug terus menerus di http://developers.facebook.com/tools/debug, tetapi koq tetap tidak bisa ya?
Ini keluar error seperti ini :
Object Missing a Required Value: Object at URL ‘http://nufarindo.com/home’ of type ‘website’ is invalid because a required property ‘og:title’ of type ‘string’ was not provided.
Missing Required Property: The og:url property is required, but not present.
Missing Required Property: The og:type property is required, but not present.
Missing Required Property: The og:title property is required, but not present.
Circular Redirect: Circular redirect path detected (see Redirect Path section for details).
Kira2 ini apa ya pak?
Silahkan Pak Benny memeriksa meta data yang ada di website bapak terlebih dahulu, apakah property-propertynya sudah benar penulisannya, dan apakah tidak ada duplikasi sintak, karena hal tersebut dapat menghalangi facebook crawling ke website bapak.
Sorry tanya-nya agak menyimpang … hehe, itu code hilighter-nya pake plugin atau bikinan sendiri ? Kalau plugin, namanya apa ? 😀
untuk share facebook otomatis menggunakan apa ya … dlvr.it bisa ngak …
makasih gan .. saya menggunakan dlvr.it untuk share artikel facebook secara otomatis ..
Dicoba ah, makasih informasinya.. Sangat manfaat..
itu metadanya di taro di mananya yah mas? tulung bantuannya dunks 🙁
salam kenal mas,
mohon pencerahannya mas, tentang crawling ( maklum masih newbie ), saat saya menginputkan link website pada kolom update status. yg keluar malah logo google crome serta keterangan seperti ini :
– Internet Explorer 6 is on the way out, but there is still a significant nuber of users that are stuck to this broser. According to this, we decided that our templates are going to support IE 6 slightly. By dint of the “IE6 Bar” plug-in, available in templates menu options, user –
Terima kasih,
bro,klo bikin yg ginian free ya?sorrry bro gua gaptek haha
kalo wordpress metadatanya dmn ya
info yag sangat bermanfaat sekali tapi bigunng mas kalo opencart itu meta data sebalah mana yakk thanks
kalo tampilan fb jd situs atau blog kita tahu gak caranya
infonya sangat bermanfaat. Sudah dicoba dan berhasil. Terima kasih.
Nice posting bang…
Terus kalo thumbnail nya saya buat sendiri gimana caranya yah?
Jadi misalnya thumbnailnya yang ingin saya tampilkan ga cocok , jadi pengen saya ganti sendiri. bisakah?
Thanks…
maksudnya code metadata diatas ditulisnya dimana mas?? tolong bantu masih newbie …
di bagian HEAD di HTMLnya 🙂
mantep gan share nya, nyoba dulu..
saya coba gan, makasih tutorialnya
oke siipp saya coba dulu 🙂
Keren gan, coba pasang ya di web ane 🙂
Mantab Gan.
Tulisan yang di metanya di ganti gan. at tinggal copy paste aj di head
Mas penulisan variable php untuk menampilkan gambar gimana ya, kalau html kan img src, kalau php $…….?
saya sudah mencobanya, makasih infonya gan sangat membantu,,
kalo ad waktu mampir juga dong ke web saya http://www.carvellakelom.com
di coba dulu deh.
good gan untuk share link website
Segera dieksekusi gan.