Mengatur Snippet Deskripsi & Gambar Postingan Blog Di Facebook

" 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 :

Mengatur Snippet Deskripsi & Gambar Postingan Blog Di Facebook

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.