Memperbaiki Gambar & Deskripsi Posting/Blog di Facebook

gambar dan deskripsi posting di Facebook
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='http://1.bp.blogspot.com/-w-KfGy4e9ec/T18zJJSuB9I/AAAAAAAABZI/7_ZAiKh9obE/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.

Have a nice Blogging and Promoting!
   Regards,

Memperbaiki Gambar & Deskripsi Posting/Blog di Facebook
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 55 Comment(s):

Geo said...

Kasus ini memang sangat mengganggu blogger ketika ingin share artikel ke Facebook. Dari beberapa referensi yg saya cari, tips yg Bpk tulis menurut saya adalah yg terbaik dan sangat solutif. Terimakasih selalu berbagi dengan kami selaku blogger yg senantiasa terinspirasi dan tertolong oleh Anda.

Ahmad Khoirul Azmi said...

@Geo: Yup, terima kasih kembali :) Benar, masalah ini sangat mengganggu karena kita tidak dapat menampilkan snippet yg diinginkan. Fungsi editing ketika share post pun jg tidak banyak membantu, karena kebanyakan link di share secara otomatis melalui like atau send.

happysus said...

Perkongsian yang menarik.Sekurangnya saya dah tahu bagaimana Memperbaiki Gambar & Deskripsi Posting/Blog di Facebook. Salam perkenalan happysus sait

Iklan Gratis said...

Ikut menyimak Gan :-)

BerbagaiHal said...

dari kemaren2 ane juga mengalami hal serupa..sampai2 ane pikir blog ane yg bermasalah..makasih bimbingannya gan

Sejarah Tari Kecak said...

saya sering juga kadang deskripsi atau gambar yang kosong. layak dicoba nih

Warnet Sarah said...

infone bagus gan :
http://sarahnetslawi.blogspot.com

Tips dan Trik Facebook Terbaru 2012 said...

Keren Gan artikelnya..
saya sudah lama cari2 artikel ini, dan baru menemukannya di blog Anda.
Mantabz.. langsung ke TKP Gan..
Salam kenal

WantoknowPru said...

Makasih gan, infonya sangat bermanfaat.

Suwardi said...

terima kasih pak infonya, jangan lupa mampir di tempat saya.....

Harga Komputer Bekas Murah said...

semudah itu kah bro. mungkin bro bisa lebih per detail..

K2 Ichsan said...

Afwan sob kalau yang kode b:if dst di simpannya di mana ya?

Ahmad Khoirul Azmi said...

halo mas. di atas </head>
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.

Blog Rudy Hartono said...

info yang sangat menarik dan bermanfaat, ikut simak artikelnya

Pramuka Smanab said...

saya tiap share apah aja di facebook kok tetep deskripsi yang terlihat adalah deskripsi utama blog, itu kenapa ya???

trikinternet said...

Makasih gan postingnya sangat bermanfaat...

Tips dan Trik Facebook Terbaru 2012 said...

ini problem yg sering gw alami.. krn tiap share ke fb, yg muncul kdang bukan gambar yg sesuai postingan.
nice posting..
2 jempol..
ane bookmark gan..

K2 Ichsan said...

Yup sudah diterapkan, ﺃﻠﺤﻤﺪﷲ lancar & tidak ada kendala.
Tapi afwan sob, kenapa yang muncul di FB itu kadang banner header atau photo profil ya?
Apa ada yang salah saat menerapkannya?
ﺸﻜﺮﺍﻜﺜﻴﺮﺍﺠﺰﺍﻜﻢﺍﷲﺒﺨﻴﺮﺍﻠﺠﺰﺍ

Priyadi Anderson said...

mantap bos... sukses.. tapi berlaku sama gak dengan pencarian di google?? mohon pencerahannya kang.. thx..

sekedar wawasan said...

kalo gambar biar muncul di search google gimana sob,,? apa ada caraya?apa ni juga termasuk itu?

Ahmad Khoirul Azmi said...

kalo yang paling jelas tentunya nama file gambar kudu jelas, misalnya gambar-beruang-madu.jpg. untuk tips lengkap optimasi SEO gambar akan saya posting ke depan.

Bali Jegeg said...

kenapa saya g bisa ya?? snippetnya masih belum kelihatan di saat share blog ke facebook...??

Gopar said...

saya coba,,tapi itu harus manual ya>

kaplik said...

thanks mas azmi, pengetahuan baru buat ane.

rs-m3dia said...

postingannya berguna banget ..!

tyo bageurz said...

ijin coba ..

http://altotyo.blogspot.com

Abdul Smith said...

terimakasih infonya jangan lupa mampir
http://abdul-smith.blogspot.com/

Tony Guard said...

Nice info!! Keep update.


Tangki Fiberglass & Atap Fiberglass

Habib Ismail said...

waduh mas kok ribet banget yah padahal pengen cobain T_T

Kataucheng ji said...

makasih gan ... sukses selalu ;)

Nasrullah Azzubeiry said...

sudah dicoba, mudah2n berhasil ya..thanks sob

rozikin roz said...

Om, kalau kasus di blog saya adalah setiap saya share artikel ke facebook yang muncul adalah meta descriptionnya, bagaimana cara mengatasi itu ya om biar kembali normal atau muncul snippet deskripsi singkat isi postingan. mohon pertolongannya ya om, makasih...

Ahmad Khoirul Azmi said...

Seperti yang sudah disampaikan di atas, gunakan tag p pada paragraf pertama.

Ilu2Maz said...

Saya juga mengalami hal tersebut, ketika artikel di share ke fb deskripsi sudah sesuai dan bisa tampil tetapi gambar artikel tidak nampak.

Adakah solusi lainnya Gan?
Trims

ramdani-blog said...

tapi kenapa mas judul postingannya selalu diganti dengan judul blog ketika artikel di share ke facebook ?

Ahmad Khoirul Azmi said...

Itu berarti Facebook hanya bisa membaca title sitewide-nya, perlu diperbaiki beberapa meta:og nya.

rian sindu said...

Berarti emang masalah.semua orang. Sy kira cuman saya doang. Apakah berarti kekurangan ini membuat wordpress lbhbaik dr blogspot?

andaberbagi.com said...

akan saya coba dulu mas,, kebetulan memiliki masalah seperti di atas,, cuma nama dan link aja yang tampil di facebook..

Alif Dboys said...

om saya tetap ndak muncul gambarnya :( mohon pencerahannya.

Alif Dboys said...

om udah saya coba, tetapi masih belum juga mohon bantuannya

turmuzi said...

makasi atas share ilmunya gan, kebetulan saya juga mengalami masalah seperti itu

inyonk.dwistroi.com said...

terimakasih informasinya pak, dari kemarin share di FB yang muncul cuma deskripsi blog bukan artikel yang kita share.
terimakasih atas tutornya y pak.

Lizanovia M. Hadi said...

Mas Khoirul, saya masih belum paham ini. Sejak ganti template, semua postingan saya usahakan selalu memiliki gambar. Tapi tiap dishare ke facebook hampir selalu tidak ada gambarnya, kecuali di page. Mohon bantuannya di http://lizanovia.blogspot.com Trimakasih :)

Ahmad Khoirul Azmi said...

sudah dicoba cara di atas belum mbak?

Dita D.R said...

saya sudah ikuti semua petunjuk tp g pernah bisa, knp ya??

The_Laila said...

iih.. saya sudah coba tp kok tetep ya... itu wordpress kan ya

ridwan ansori said...

mau tanya ni, expand widget nya di mana ya pas edit html ?
makasih atas infonya gan

Ahmad Khoirul Azmi said...

Sekarang tampilan dan fitur HTML Blogger sudah beda, simak ini untuk edit:
http://buka-rahasia.blogspot.com/2013/08/cara-mencari-kode-blogger-template-editor.html

Ibnu Hr said...

Makasih gan infonya, sangat membatu saya dan para bloger lain.

Alfian Chandra Y said...

pak, itu kode bif nya diletakkan dimana ya? di tempate? atau di postingan(html)?

Ahmad Khoirul Azmi said...

di template

Setyo Nugroho said...

mantap gan, sudah saya aplikasikan dan its WORK.
cek tuh blog saya..
http://dapodikptk.blogspot.com/

UKM JQH AL-MIZAN said...

kodenya efektif pak, namun bisakah kualitas gambarnya lebih tinggi. soalnya terpotong dan kualitas gambarnya menurun drastis... trimakasih

Ahmad Khoirul Azmi said...

Facebook otomatis mengkompresi gambar, jadi kalo kualitas gambar di blog udah rendah, maka gambar yang dirender dan dihost di Facebook jadi lebih rendah lagi. Jadi upayakan gambar dlm konten blog kualitas bagus. Untuk cropping itu juga dari facebook, pastikan saja ukurannya tidak persegi sama sisi, tapi lebih ke persegi panjang.

Ahmad Khoirul Azmi said...

Facebook otomatis mengkompresi gambar, jadi kalo kualitas gambar di blog udah rendah, maka gambar yang dirender dan dihost di Facebook jadi lebih rendah lagi. Jadi upayakan gambar dlm konten blog kualitas bagus. Untuk cropping itu juga dari facebook, pastikan saja ukurannya tidak persegi sama sisi, tapi lebih ke persegi panjang.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap