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 dibutuhkan alasannya ialah dapat merusak dan mengurangi daya tarik artikel yang di-share. Ada satu pengunjung blog ini yang menanyakan ihwal 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 perjuangan 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 gres ditemukan pada suatu url posting yang di-share, Facebook melaksanakan crawl dan menyimpan data-data halaman tersebut, dalam hal ini ialah gambar dan teks. Yg dilakukan pada ketika crawl ialah 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 melaksanakan 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 ialah dengan menambahkan meta tag opengraph gres 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/AVvXsEhngU5in9pGlsrQKBMb7ciAaZsCW7V1AcjWysXTEJVypshaw2clq4JZBg38NAuVYhnKkE4DfsJeMdAiVU_bGELT9JQ_6L-fMiB0TPccNso5_byDyFBqb9ITQvjW6X8S8XKU-YqqDDQJmnQo/s1600/buka-rahasia.blogspot.com.jpg' property='og:image'/></b:if>
- Copy arahan 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 bisa 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 <p>. 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 <p> secara manual). Berbeda dengan WordPress yang menggunakan tag <p> sebagai default text formation. Kaprikornus solusi biar deksripsi yang di Facebook sesuai, tambahkan tag <p> 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 <p> beserta penutupnya </p> pada bab teks yang hendak dijadikan paragraf. Contoh:
<p>Backlink ialah 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.</p>Setelah itu jangan kembalikan ke "Compose", alasannya ialah tag p akan dikembalikan menjadi div. Hmmm, cukup susah juga bukan? Hehe. Alternatifnya, akan sangat mudah bila menggunakan Windows Live Writer. Fitur Editing Controls-nya dapat digunakan untuk mengatur default text formation sehingga tag <p> dapat digunakan secara otomatis.
Setelah, melaksanakan 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.
Cukup rumitkah?
Jika iya, ada satu alternatif lain yang dapat digunakan untuk melaksanakan share post terbaru di Facebook secara otomatis, terjadwal, dan dengan gambar dan deskripsi yang benar. Simak Autopost ke Facebook dengan RSSGraffiti.
Have a nice Blogging and Promoting!
Regards,
