Cara membuat meta tag open graph facebook agar gambar dan deskripsi tampil bagus ketika di share.

,

Gambar 0.1 meta tag open graph

Fitur open graph ini sangat berguna loh bagi kemakmuran blog kita , contohnya gini ketika artikel kita ada pengunjung dan artikel kita di share , nah pada posisi ini open graph sangat menentukan hasil share tersebut. Gambar , title , deskripsi kan harus ngikut semua biar nanti tampilan di facebooknya bagus beserta gambarnya.

Apa itu Open Graph Protocol? Sederhananya, Open Graph Protocol adalah format meta tags yang berfungsi untuk menampilkan objek dari halaman kita ke social media Facebook. Banyak sekali website yang membuat fitur share ke FB, nah bagaimana caranya FB tahu gambar mana yang akan digunakan sebagai share, titlenya apa, deskripsinya apa, nah itu bisa kita atur melaui opengraph (og) meta.

Nah... Apa fungsi open graph , fungsinya untuk mendeskripsikan artikel kita agar facebook bisa membacanya dengan benar.

Sebenernya Ada banyak Open Graph meta, namun yang paling umum dan wajib diisi adalah:
og:title Dari namanya sudah terlihat, bahwa apa yang kita tulis dalam meta ini akan menjadi title dalam hasil share FB, kalau tidak diisi berarti title sesuai dengan yang ada di tag
og:description Untuk mengatur konten yang akan di share, Jangan menulis terlalu panjang disini, karena bisa-bisa terpotong, biasakan sekitar 150 karakter saja
og:image Waktu share FB, disebalah kiri post akan ada thumbnail gambar. Itu bisa kita atur di meta ini. Gambar harus memiliki minimum resolusi 200x200 ya untuk bisa dibaca Facebook, lebih besar lebih baik karena akan digunakan oleh Facebook ketika dibuka menggunakan gadget yang beresolusi tinggi.
og:type Jenis website kita, biasanya isinya adalah website, blog, dll.
og:url URL yang akan dishare, kita bisa mengatur bila ada post yang sama namun mengarah ke satu tujuan.

Ini contoh penempatan meta tag ketika artikel saya di share ke facebook.
Gambar 0.2 Penempatan tag meta open graph ketika di share


Contoh meta tag open graph.



<meta content='veriasha: menu dropdown keren' property='og:title'/>
<meta content='dropdown menu navigasi simple' property='og:description'/>
<meta content='http://xxx/image.jpg' property='og:image'/>
<meta content='http://xxx' property='og:url'/>


Mudah dan gampang kan. Semuanya itu mudah asal mau belajar. Trimakasih sudah mampir.

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.