Cara membuat gambar untuk website di facebook

Question

22/08/2017 Maykhel David 4849 Website

Table of Contents Show

Untuk Mengatur Tittle/Judul
Untuk Mengatur Snippet Deskripsi
Untuk Mengatur Gambar Thumbnail
Penjelasan Kode

Pernahkah kalian melihat apa yang terjadi saat seseorang berbagi tautan ke situs web kalian? Pernahkah kalian memperhatikan dan melihat mana gambar dan informasi yang dipilih Facebook secara default? Jika kalian beruntung, kalian mungkin mendapatkan gambar yang kalian inginkan. Tapi sebenarnya facebook akan mengambil gambar lama yang ada di website kalian. Nah, sekarang tidak harus seperti itu lagi, dengan menggunakan Open Graph Protocol (OPG) kita dapat memasukkan beberapa informasi di head yang akan digunakan sebagai informasi utama yang ditampilkan ke social media.

Biasanya jika kalian melakukan share pada facebook akan secara otomatis facebook akan mencari beberap gambar yang terindex dari paling atas, tentu sebagai pemilik blog atau website akan merasa janggal ketika kalian ingin membagikan sebuah artikel kepada teman teman di facebook kalian.

Sekarang ini sudah banyak kemudahan untuk membuat atau menata konten dalam jejaring social agar terlihat menarik, Tahukah kalian bahwa sekarang ini kita sudah bisa untuk memberikan gambar default sebagai gambar yang akan ditampilkan dan juga banyak hal lainnya yag bisa kita atur sendiri menggunakan meta property og: dimana property og sendiri adalah property yang memang sengaja dibuat untuk keperluan sharing pada social media.

Cara penerapannya juga cukup mudah kalian bisa ikuti cara berikut:

pertama kita harus mendeklarasikan fbml yang digunakan oleh facebook pada tag pembuka html seperti berikut

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

Selanjutnya kita akan memberikan beberapa tag meta berikut yang bisa kita gunakan dengan untuk memberikan gambar default pada saat share ke facebook.

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

Selain memberikan gambar default, property og ini juga banyak kegunaannya seperti berikut:

<meta property="og:title" content="DUMET School"/>
<meta property="og:type" content="courses"/>
<meta property="og:url" content="http://www.dumetschool.com"/>
<meta property="og:site_name" content="DUMET School"/>
<meta property="fb:admins" content="YOUR_USER_ID"/>
<meta property="og:description" content="Kursus Website dan Digital Marketing"/>

Baiklah teman-teman dengan adanya meta property og tersebut kita jadi bisa mengatur berbagai macam konten yang akan ditampilkan ke dalam social media. Demikian artikel tentang cara mengatur gambar default share website pada facebook. Semoga bermanfaat.

Social Media, SEO, Artikel, Tips dan Trik

Jika Anda menggunakan Weebly, mulai dengan melihat situs yang diterbitkan dan mengklik kanan gambar untuk Menyalin Alamat Gambar. Kemudian di Weebly, pergi ke Edit Situs, Halaman, klik halaman yang ingin Anda gunakan, Pengaturan SEO, di bawah Header Code masukkan kode dari jawaban Shef:

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

hanya mengganti/mengunggah/... dengan alamat gambar yang disalin. Klik Terbitkan untuk menerapkan perubahan.

Anda dapat melewatkan bagian dari jawaban Shef tentang namespace, karena itu sudah diatur secara default di Weebly.

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 :

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
Untuk Mengatur Snippet Deskripsi
Untuk Mengatur Gambar Thumbnail
Penjelasan Kode

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 != ""'> <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.

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~

Teknologi Facebook Image link io