Meta Tag Facebook yang harus ada di Website

Meta tag? Buat sebagian programmer mungkin sudah sering mendengarnya. Tapi memang tidak banyak yang menggunakannya. Nah, definisi Meta Tag menurut mbok Wiki adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang berfungsi sebagai penyampai informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Banyak sekali macam-macam meta tag, sekitar 20 lebih, tapi pada post kali ini saya akan mencoba menjelaskan tentang 10 meta tag yang berhubungan dengan social media yaitu Facebook dan Twitter.

Sebelum itu, pernah denger yang namanya 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.

Ada banyak Open Graph meta, namun yang paling umum dan wajib diisi adalah:

1. 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
2. og:description : Untuk mengatur konten yang akan di share, Jangan menulis terlalu panjang disini, karena bisa-bisa terpotong, biasakan sekitar 150 karakter saja
3. og:image : Waktu share FB, disebalah kiri post akan ada thumbnail gambar. Itu bisa kita atur di meta ini. Gambar harus memiliki minimum resolusi 200*200 ya untuk bisa dibaca Facebook, lebih besar lebih baik karena akan digunakan oleh Facebook ketika dibuka menggunakan gadget yang beresolusi tinggi.
4. og:type : Jenis website kita, biasanya isinya adalah website, blog, dll
5. og:url : URL yang akan dishare, kita bisa mengatur bila ada post yang sama namun mengarah ke satu tujuan, atau menggunakan url shortener seperti bit.ly ataupun adf.ly untuk iklan. Tapi awas, biasanya link seperti ini jarang dibuka orang karena takut spam.

Biar lebih jelas saya kasi cara pakainya juga, saya coba comot contoh dari salah satu artikel saya.

 

Nah, untuk code yang saya pakai adalah ini :

1 2 3

<meta property="og:image" content="" /> <meta property="og:description" content=""> <meta property="og:type" content="blog">

Gimana? gampang kan? Perhatian! Kalau kamu sudah benar dalam code tapi waktu sahre masih salah, ada kemungkinan itu karena cache, untuk menghilangkan cache open graph caranya yaitu debug link kamu di Facebook Debugger. Smoga bermanfaat!