Cara Memperbaiki Snippet Gambar Blog ~ Bithoo

Ketika share atau post link blog/web, Facebook akan menarik snippet yang diambil dari halaman sesuai link tersebut. Fitur ini memungkinkan kita para blogger dapat mempublikasikan artikel dengan ringkasan isi serta gambar yang dapat menarik perhatian pengunjung/pembaca.

Nah, masalahnya, dalam beberapa kasus tertentu, Facebook gagal mengidentifikasi dan merender snippet-snippet tersebut, sehingga deskripsi dan gambar yang ditampilkan tidak sesuai dengan isi halaman posting. Kasus ini banyak terjadi terutama pada halaman blog berplatform Blogger. Tentunya ini tidak diharapkan karena dapat merusak dan mengurangi daya tarik artikel yang di-share. Ada satu pengunjung blog ini yang menanyakan tentang kasus snippet di Facebook yang kadang gagal ditampilkan atau muncul dengan gambar dan deskripsi yang salah. Ada beberapa tips yang akan saya share disini sebagai usaha untuk mengatasi hal tersebut.

Cara Kerja Facebook dalam Mengambil Snippet Data Halaman Blog/Web
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.

Memperbaiki Snippet Gambar Agar Sesuai Dengan Gambar/Thumbnail Posting
Ketika melakukan share manual, Facebook akan menampilkan beberapa gambar yang merupakan opsi (apabila Facebook dapat mengambil beberapa gambar dari halaman tersebut). Anda dapat memilih gambar mana yang hendak ditampilkan dengan menggunakan tombol panah di bawah gambar. Nah, permasalahannya Facebook kadang tidak menemukan gambar yang diinginkan. Pada kasus lain, link kadang tidak dishare secara manual, melainkan melalui Fitur Facebook Like dan Send, Facebook Like Box, dan fitur-fitur otomatis lainnya. Maka, snippet gambar (maupun deskripsi) yg ditampilkan tidak dapat diatur.
Untuk mencoba mengatasi gambar yang salah ditampilkan, kita dapat menggunakan meta opengraph (og image property), yang diberikan perintah b if conditional guna mengkhususkan pada thumbnail post.

 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>

Tetapi bagaimana dengan posting yang tidak memiliki gambar di dalamnya? Solusinya adalah dengan menambahkan meta tag opengraph baru yang disertai dengan default image atau gambar yg akan digunakan sebagai snippet, dengan sebelumnya menggunakan tag b else. Jadinya:

 <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/AVvXsEiBGdRINumyDHNf_PR3KwqLybqSv0xxLnLxvsLNGqnaGdCxGOCtsg6eU2kw8JC9X99mcbYoRUVxH2IRIAel_2-BfDEw3H0xRIP8hyphenhyphenQE99ybPguVX82c-l8CEdfKsWcx4J6BYfBbrsJKtzw/s400/Tanda+Tangan+Bithoo.png' property='og:image'/>
 </b:if>

Copy kode di atas; ganti url gambar (hijau) dengan url gambar default anda sendiri.

Masuk ke Dashboard > Design/Template > Edit HTML/Edit Template

Letakkan di atas </head>

Save template.

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 widget posting blog (bagian posting [blog post] juga merupakan widget loh), 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 . Nah, sayangnya lagi nih, fitur posting editor blogger tidak menggunakan default tag paragraph (p), melainkan division (tag <div>). Sehingga di dalam posting Blogger, jarang sekali ditemukan paragraph, kecuali yg ditambahkan sendiri (menambahkan tag secara manual). Berbeda dengan WordPress yang menggunakan tag sebagai default text formation. Jadi solusi agar deksripsi yang di Facebook sesuai, tambahkan tag secara manual, setidaknya pada paragraf paling awal/atas pada setiap posting.
Bagaimana cara menambahkannya?

Ketika sedang membuat atau mengedit posting, pilih mode "Edit HTML" di sebelah "Compose". Letaknya di pojok kanan atas editor posting.
Masukkan tag beserta penutupnya pada bagian teks yang hendak dijadikan paragraf. Contoh:

Backlink adalah poin penting yg dibutuhkan oleh setiap blog/website dalam rangka bersaing dengan blog/website lain di search engine. Itulah mengapa link building selalu disebut-sebut & sering muncul dalam SEO.

Setelah itu jangan kembalikan ke "Compose", karena tag p akan dikembalikan menjadi div. Hmmm, cukup susah juga bukan? Hehe. Alternatifnya, akan sangat mudah jika menggunakan Windows Live Writer. Fitur Editing Controls-nya dapat digunakan untuk mengatur default text formation sehingga tag dapat digunakan secara otomatis.

Setelah, melakukan tahap-tahap di atas, gunakan alat debugger Facebook untuk membersihkan cache pada server Facebook > debugger tool. Barulah mulai share posting lagi.

Nah, dengan dua cara di atas setidaknya kasus snippet gambar dan deskripsi yang salah ketika suatu halaman blog/web di-share di Facebook dapat diminimalisir.

Sekian dulu yah sobat Bithoo, jangan lupa baca postingan yang lain di Bithoo, dan klau ada pertanyaan tinggalkan pesan yah,,,,!!!