Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Mengatur Tittle, Snippet Deskripsi & Thumbnail Posting di Facebook

mengatur snippet deskripsi di facebook

Ketika anda berbagi atau nge-share URL posting anda di facebook, maka secara otomatis facebook akan memuat judul, gambar dan deskripsi posting blog yang anda share, seperti gambar dibawah ini :

mengatur snippet deskripsi di facebook

Snippet ini sangat bermanfaat untuk meningkatkan CTR(Click through rate) atau kemungkinan dikliknya link yang anda bagikan. Snippet ini memberikan informasi singkat tentang halaman web yang anda share. Oleh karena itu, anda harus membuatnya menarik dan orang-orang penasaran dan mengklik posting yang anda share.


Mungkin anda mengira bahwa itu di-load secara otomatis tanpa bisa kita utak-atik. Padahal sebenarnya kita bisa mengatur gambar thumbnail yang muncul, deskripsi, bahkan judul/tittlenya sesuai kebutuhan. Caranya adalah dengan melengkapi halaman yang anda share dengan kode html dibawah ini.

Untuk Mengatur Tittle/Judul


<meta property="og:title" content="
Judul yang anda inginkan" />

Untuk Mengatur Snippet Deskripsi


<meta property="og:description" content="
Deskripsi konten yang anda inginkan" />

Untuk Mengatur Gambar Thumbnail


<meta property="og:image" content=""/>

Ketiga kode diatas ditempatkan diantara tag <head> dan </head> sebagaimana tag <meta> lainnya.

Masalahnya, jika anda menggunakan cms seperti wordpress atau blogger pada blog anda, tidak mungkin anda menyertakan kode tersebut secara manual pada tiap halaman. Oleh karena itu diperlukan koding tambahan ataupun plugin agar markup itu ditambahkan secara otomatis pada setiap halaman.

Jika anda menggunakan WordPress Self Hosted, anda bisa menggunakan plugin WP Facebook Open Graph protocol untuk mengotomisasinya.

Sedangkan jika anda menggunakan Blogger, anda bisa mengikuti cara dibawah ini :

1. Buka Dasbor blogger > Template > Edit HTML

2. Setelah ditampilkan editor html, masukkan kode dibawah ini diatas tag </head> atau diantara <head> dan </head>.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh6.googleusercontent.com/-Gqxzyx1D-qM/Sd6gUSMyvxI/AAAAAAAAAIA/67EBdl4ZQ2k/w354-h472-no/Holland1.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>

Penjelasan Kode

1. Kode berwarna ungu adalah untuk menentukan gambar thumbnail yang akan muncul. Kode diatas menentukan gambar thumbnail berdasarkan gambar pertama yang ada pada posting.


2. Kode berwarna hijau adalah url menuju ke gambar yang akan menjadi thumbnail jika posting anda tidak memiliki gambar.

3. Kode berwarna merah adalah untuk menentukan snippet deskripsi yang akan muncul berdasarkan ‘Preferensi pencarian’ atau ‘Search description’ yang dimasukkan saat pembuatan posting.

Preferensi pencarian

 

4. Kode berwarna biru adalah untuk menentukkan title yang akan muncul berdasarkan nama halaman atau judul halaman posting anda.

Sedangkan jika anda ingin menentukan snippet gambar untuk homepage atau halaman utama, anda bisa menambahkan kode berikut ini dengan penempatan yang sama :

<b:if cond='data:blog.homepageUrl'>
<meta content='url ke default gambar yang diinginkan' property='og:image'/>
</b:if>

Yap, begitulah caranya. Jika kurang jelas silahkan tanyakan dikomentar. Sekian.. Semoga bermanfaat!

~Muhammad Syakirurohman~

79 thoughts on “Mengatur Tittle, Snippet Deskripsi & Thumbnail Posting di Facebook

Tinggalkan Balasan