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/AVvXsEgQA1TRAZjUMw-mHxr504kCxjCnu4CzUCojwJUKqrHnf-JIlMAxG5ki76vvc_JZr_g7eCwhApVrDo-Rx0TAfFxgBGyl4PL6yEszKk92ErYWiVRTiky0C9eaWbWswoGisO61Szu_yFIFsQhl/s1600/buka-rahasia.blogspot.com.jpg' 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
<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. 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?
- 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 bagian teks yang hendak dijadikan paragraf. Contoh:
<p>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.</p>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 <p> 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.
Cukup rumitkah?
Jika
iya, ada satu alternatif lain yang dapat digunakan untuk melakukan
share post terbaru di Facebook secara otomatis, terjadwal, dan dengan
gambar dan deskripsi yang benar. Simak Autopost ke Facebook dengan RSSGraffiti.
0 Responses So Far:
Posting Komentar