Mengatur snippet deskripsi dan thumbnail pada posting blog di Facebook

Well, kasus ini saya temukan bukan diblog saya, tapi diblog sahabat yang saya admini.
Semua tentunya pada tau dong, terkadang kita pengen share suatu news atau di status FB pengen nulis alamat link/url. Nah secara default , FB akan menampilkan deskripsi atau narasi pendek tentang link/url tersebut beserta 3 pilihan thumbnail atau foto mini.

Gbr.1 Tampilan awal sebelum diperbaiki 

Nah, ceritanya nih, saya pengennya tampilannya seperti Gbr.2, tapi apa lacur yang muncul seperti Gbr.1. Waduhhhh.. puyeng gak tuh. Deskripsinya kosong, gambarnya salah. Waduhhhh... how come it happens .... 

Akhirnya saya menghadap mbah google. Menjelajahi segala database yang ada. Facebook ternyata secara acak akan mengambil snippet gambar yang ada disuatu web. Dari semua data yang muncul akhirnya saya memilih informasi di buka-rahasia.

Cara Kerja Facebook dalam Mengambil Snippet Data Halaman Blog/Web 
Seperti yang disampaikan tadi kalau Facebook secara rutin mengambil data di dalam halaman dan menyimpannya ke dalam cache. Setelah suatu halaman baru ditemukan pada suatu url posting yang di-share, Facebook melakukan crawl dan menyimpan data-data halaman tersebut, dalam hal ini adalah gambar dan teks. Yg dilakukan pada saat crawl adalah mencari meta data (dalam tag opengraph dan tag-tag lain). Ketika meta data tidak ditemukan, algoritma Facebook akan mengambil data gambar dan teks apapun yg pertama kali ditemukan pada halaman tersebut. Nah, inilah mengapa kadang snippet gambar dan deskripsi yang ditampilkan tidak sesuai.

Akhirnya saya mengubah template mengikuti petunjuk buka-rahasia.. Dan hasilnya... taraaaammmm... seperti Gbr.2 

Gbr.2 Setelah kode diperbaiki

Saya coba rangkumkan ya, sintaknya seperti apa. Gak sulit kok ..Tinggal ikutin aja. Kalau gagal , kontak saya aja ya or leave message.
Berikut langkah-langkahnya.

1. Buka dashboard blogger  - Template - Edit HTML - Proceed

2. Kali ini tidak perlu lagi klik Expand Widget Template , karena ntah per kapan blogspot mengganti tampilannya menjadi lebih manusiawi seperti gambar dibawah ini.

3. Untuk mencoba mengatasi gambar yang salah ditampilkan, kita dapat menggunakan meta opengraph (og image property), dengan menuliskan sintak dibawah ini diatas </head>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxvOLjKjfPZRiynwmfmHKmpR7oNi0FbhtNC-Nfzpi3snKRMHVlU4ff9ldQQ-_j-o0NF4TdZcbOwlXTQbc-8wFHppaf9Ui0VWK31V81xzq7A082bt892KGApTXL5swNs3xG-7Lx7yiHKX0/w354-h472-no/Holland1.jpg' property='og:image'/>
</b:if>

Tulisan yang berwarna biru diganti dengan alamat gambar sendiri ya. Jangan lupa loh, ntar fotoku malah yang terpajang.
Setelah itu save template dulu.

4. Eits.. main nutup aja, ini belum selesai. Masih ada mengatur deskripsi loh.
Ayo, kembali ke edit template tadi.

Memperbaiki Snippet Deskripsi Posting/Halaman Blog
Kasus ini terjadi ketika Facebook tidak mampu membaca atau mengenali konten, struktur halaman blog/web dan, meta data. Sayangnya, Blogger tidak memiliki tag snippet posting selain di dalam posting blog , sehingga kita tidak dapat memasukkan meta tag dengan menggunakan valid HTML. Selanjutnya, ketika Facebook tidak menemukan meta data, maka Facebook biasanya menggunakan paragraph pertama yang ditemukan. Paragraph menggunakan tag <p>.
Nah, sayangnya , fitur posting editor blogger tidak menggunakan default tag paragraph <p>, melainkan division <div>. Sehingga di dalam posting Blogger, jarang sekali ditemukan paragraph, kecuali yg ditambahkan sendiri (menambahkan tag <p> secara manual). Jadi solusi agar deksripsi yang di Facebook sesuai, tambahkan tag <p>
secara manual, setidaknya pada paragraf paling awal/atas pada setiap posting.

Bagaimana cara menambahkannya?
Mudah kok, tinggal tuliskan saja pada saat posting berita tag <p> isi beritanya apa </p>

5. Setelah itu klik save template.
Lalu gimana dong postingan terdahulu yang sudah ke upload tidak ada tag <p> nya? Ya sudahlah, lupakan saja. Kecuali mau edit atu-atu

6. Langkah terakhir yang tidak kalah pentingnya adalah melakukan debugger di Facebook. Kalau tidak, ntar tampilannya sama saja. Ini diperlukan untuk membuang cache yang sudah terekam oleh FB. Klik tools debugger facebook

Akhirnya selesai sudah, sekarang dicoba deh share postingannya.