" Optimasi snippet facebook adalah cara mengatur dan memperbaiki title, snippet deskripsi & gambar thumbnail halaman posting blog / website ketika artikel dibagikan / share di Facebook "
Jadi, ketika kita share postingan artikel ke facebook, maka secara otomatis facebook akan langsung memuat judul, gambar thumbnail dan deskripsi postingan website / blog yang di share, seperti gambar berikut :
Snippet ini berguna untuk meningkatkan Click Through Rate (CTR) atau kemungkinan klik pada link yang dibagikan. Snippet secara otomatis akan memunculkan informasi mengenai halaman blog / website yang di share. Oleh sebab itu, sebaiknya kita mengoptimasi snippet facebook ini agar pengguna lain semakin tertarik mengklik dan mengunjungi halaman blog yang kita bagikan.
Cara mengoptimasi snippet postingan blog di facebook di blogger yakni dengan hack template pada bagian meta tags. Kita dapat mengatur gambar thumbnail, deskripsi, judul (title) pada postingan yg kita bagikan.
Kode Snippet Untuk Title, Deskripsi & Thumbnail Posting Di Facebook
Berikut ini beberapa meta tags yang dapat digunakan untuk mengoptimasi opengraph Facebook:
Snippet Judul (Title)
<meta property="og:title" content="Judul yang anda inginkan" />
Snippet Deskripsi
<meta property="og:description" content="Deskripsi konten yang anda inginkan" />
Snippet Gambar Thumbnail
<meta property="og:image" content=""/>
Ketiga kode diatas harus diletakkan pada tag <head>.
Lalu bagaimana cara Mengatur Title, Snippet Deskripsi & Gambar Thumbnail untuk halaman Postingan Blog di Facebook ?
Nah, pada blog / website berbasis blogger dan wordpress tentu melelahkan dan tidak memungkinkan jika kita harus menyertakan kode snippet tersebut satu-persatu pada tiap halaman secara manual . Untungnya pada cms wordpress dan blogger kita bisa menerapkan hack halaman dengan kode <b:if>.
Kita bisa menambahkan coding (pada blogger) atau plugin (pada wordpress) supaya markup snippet bisa muncul pada setiap halaman secara otomatis sesuai dengan title, deskripsi dan gambar thumbnail masing-masing halaman posting.
Cara Mengatur Title, Snippet Deskripsi &Gambar Thumbnail Facebook untuk halaman Postingan Blog
Untuk website berplatform WordPress Self Hosted, kita dapat menggunakan plugin WP Facebook Open Graph protocol untuk menerapkan optimasi snippet facebook ini.
Dan untuk Blogger, kita dapat menerapkannya dengan cara berikut :
1. Login ke akun blogger anda > Buka Dashboard > Template > Edit HTML
2. Copas atau letakkan kode berikut tepat diatas tag </head>.
<b:if cond='data:blog.postImageThumbnailUrl'><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><b:else/><meta content='https:Link url gambar alternatif.jpg' property='og:image'/></b:if><b:if cond='data:blog.metaDescription != ""'><meta expr:content='data:blog.metaDescription' property='og:description'/></b:if><meta expr:content='data:blog.pageName' property='og:title'/>
Keterangan sesuai warna kode:
- Ungu, berguna untuk menampilkan gambar thumbnail berdasarkan gambar pertama pada halaman posting.
- Hijau, link menuju gambar thumbnail alternatif apabila postingan tidak mempunyai gambar.
- Merah, untuk menentukan snippet deskripsi yang muncul berdasarkan 'meta description' postingan.
- Biru digunakan untuk menentukkan judul / title yang muncul berdasarkan 'judul halaman' posting.
Cara Mengatur Title, Snippet Deskripsi & Gambar Thumbnail Facebook untuk home page Blog
Dan untuk mengatur snippet gambar pada home page / halaman utama blog, maka silahkan tambahkan kode berikut ini tepat setelah kode diatas :
<b:if cond='data:blog.homepageUrl'><meta content='https:Link url gambar yang diinginkan.jpg' property='og:image'/></b:if>
Demikian Cara Mengatur Title, Snippet Deskripsi & Thumbnail Gambar Halaman Postingan ketika kita share di Facebook. Apabila ada pertanyaan silahkan tinggalkan komentar.
Mengatur Snippet Deskripsi & Gambar Postingan Blog Di Facebook
4/
5
Oleh
Unknown
14 komentar
Maaf gan jadi tag meta yang ini gak usah lagi ya yang dibawah <head?
Reply<meta property="og:title" content=
<meta property="og:description" content="Deskripsi
<meta property="og:image" content=
makasih gan pencerahannya.
Perlu mas, sama seperti langkah-langkah diatas
ReplySip gan,, ane gak pake tapi pake yang kedua yang auto ajalah, manual repot dan sudah berhasil, makasih atas tutornya gan sudh diterapkan dan berhasil dengan baik. semoga suses selalu blognya agan, saya mah sudah gak ngebolg lagi gan tapi toko online aja nih kunjungin gan jika ada perlu sesuatu dengan pekerjaan besi karena saya menjual peralatan bor dan travo las dll jika berkenan. makasih sekali lagi.
Replyiya sama-sama mas..
ReplyKalau boleh saran untuk toko online jangan pakai domain freedom (.ga), sebaiknya untuk keperluan komersial gunakan domain TLD (.com) saja.
Makasih gan atas sarannya, ini baru uji coba dulu blom fix banget hehehe... jadi pengen ngeblog lagi, kunbal lagi gan ke blog yang sudah lama terbengkalai. Saran gan berat blog agan coba di custom bagian ini <> di ubah.
Replysudah kunbal gan.. bagian mana yg diubah gan?
Reply<> tanpa titik ini diganti gan coba agan lihat di blog saya disana ada tutornya makasih, sama > tanpa titil, <> tanpa titil diganti dengan huruf besar semua mudah mudahan loading blog agan semakin mantap dan itu font awesome agan klo bisa dibungkus sm script nanti saya share tutornya.
Replymaaf gan mau nanya cara ganti gambar yg kita inginkan di postingan yg kita share di facebook gmna ya ? mksudnya ganti gambar asli di postingan jadi gambar yg kita inginkan saat dishare, tanpa harus ganti gambar beneran di postingan blog. mohon tutornya gan kalo tau. bales di rizki.paloh@gmail.com ya gan.. mkasih
Replypertanyaan sama dengan di atas
ReplyTerima kasih banget skrip cara Mengatur Snippet Deskripsi & Gambar Postingan Blog Di Facebook.
ReplySudah saya coba dan berhasil.
Sukses selalu buat ehpedia.
Bookmark dulu gan,, ane ada masalah dengan deskripsinya.
Replymaaf gan, agar judul blog kita g muncul pas kita share di fb atau twitter gmn ,,, ?
Replyjd yg muncul cuma tumbhail image, judul post, sama deskripsi nya saja,, cz blog saya kalau di share ke fb / twitter judul blognya ngikut terus gan ,, mohon dibantu y gan :)
Saya sudah pasang ko belum muncul ya gan...? Tolong di bantu masang rice snipet nya
Replymaaf gan klo nyimpang, mw tanya sya habis ngeshare postingan saya ke fb tapi yang bukan artikel postingan tapi deskripsi penelusurannya.
Replyitu kenapa ya? makasih
Mari berkomentar dan berbagi info atau pengalaman Anda. Dan jangan SPAM!