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.

Fadjarreply

29 Okt 2011 at 6:25 am

Ternyata facebook juga bisa crawling yah…makasih infonya..saya akan cobain.

Bennyreply

18 Nov 2011 at 4:59 pm

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?

Christian Chandra

26 Nov 2011 at 10:24 am

– In reply to: Benny

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.

Satriyo Niti Atmojoreply

10 Des 2011 at 3:52 am

Sorry tanya-nya agak menyimpang … hehe, itu code hilighter-nya pake plugin atau bikinan sendiri ? Kalau plugin, namanya apa ? 😀

p3the_dyanreply

16 Jan 2012 at 3:05 am

untuk share facebook otomatis menggunakan apa ya … dlvr.it bisa ngak …

Berita hiburanreply

16 Jan 2012 at 3:08 am

makasih gan .. saya menggunakan dlvr.it untuk share artikel facebook secara otomatis ..

Rengareply

26 Apr 2012 at 1:00 pm

Dicoba ah, makasih informasinya.. Sangat manfaat..

seselreply

3 Jun 2012 at 12:12 pm

itu metadanya di taro di mananya yah mas? tulung bantuannya dunks 🙁

harryreply

11 Jun 2012 at 9:01 am

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,

Brijukreply

12 Jul 2012 at 6:16 am

bro,klo bikin yg ginian free ya?sorrry bro gua gaptek haha

ochireply

9 Agu 2012 at 8:19 am

kalo wordpress metadatanya dmn ya

edireply

14 Sep 2012 at 6:33 am

info yag sangat bermanfaat sekali tapi bigunng mas kalo opencart itu meta data sebalah mana yakk thanks

obatherbal99reply

3 Nov 2012 at 8:24 am

kalo tampilan fb jd situs atau blog kita tahu gak caranya

bondanreply

13 Nov 2012 at 10:19 am

infonya sangat bermanfaat. Sudah dicoba dan berhasil. Terima kasih.

AnotherNewbiereply

27 Des 2012 at 1:28 pm

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…