Open Graph: Custom Thumbnail pada Sosial Media

5/5 (37)

Open Graph: Custom Thumbnail pada Sosial Media. – Open Graph adalah teknologi yang memungkinkan integrasi antara Facebook dan data penggunanya dan situs web. Teknolog ini pertama kali diperkenalkan oleh Facebook pada tahun 2010 lalu.

Kalian tentu pernah membagikan tautan di Facebook. Namun seringkali ada gambar yang benar-benar berbeda dari yang kalian kira? Mengetahui sedikit tentang tag Open Graph dapat membantu kita mengatasi masalah ini. Lihat contoh dibawah ini.

Open Graph
Preview Thumbnail situs Facebook

Tampilan preview pada Facebook memberikan pratinjau konten di Facebook Feed, dengan judul dan kutipan isi. Open Graph menentukan sejumlah meta tag untuk mendefinisikan meta informasi konten, serupa dengan meta tag yang diumpankan ke mesin pencari sebagaimana praktek SEO pada umumnya.

Open Graph: Custom Thumbnail pada Sosial Media

Sekarang kita akan melakukan percobaan menggunaan tag OG ini. Pada artikel sebelumnya, kita mempelajari Cara Menggunakan ParticleJS (baca disini), pada artikel tersebut pula saya membuatkan halaman demo yang tepatnya ada di arc.codelatte.org/particlejs/. Pada halaman demo tersebut bisa kita lihat tidak ada gambar sama sekali. Dan setelah saya coba menaruh link tersebut di Facebook, hasilnya menjadi seperti ini:

Open Graph: Custom Thumbnail pada Sosial Media

Tidak ada gambar yang nampak pada preview karena memang pada halaman tersebut tidak mengandung gambar sama sekali. Sekarang kita coba tambahkan tag OG untuk memberi gambar pada thumbnail tersebut.

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

Setelah saya tambahkan OG tag pada bagian <head>, hasilnya nampak seperti ini:

Open Graph
Preview Thumbnail Setelah OG Tag ditambahkan.

Apa yang terjadi? Bisa dibilang tag OG ini memberi tahu Facebook, “Hai Facebook, gunakan gambar ini sebagai thumbnail saat halaman dibagikan.” Dan … voila!

Open Graph Tags

Berikut ini dalah contoh tag OG yang akan saya masukkan ke bagian <head> halaman. Dengan menggunakan strategi tag META ini, kalian dapat menentukan gambar, teks, dan item lain untuk digunakan saat berbagi halaman di situs web kalian.

site_name

<meta property="og:site_name" content="Nama Website atau Halaman Disini"/>

title

<meta property="og:title" content="Masukkan Judul Disini. Judul halaman yang baik adalah tidak lebih dari 90 karakter."/>

description

<meta property="og:description" content="Deskripsi URL yang menarik. Umumnya mempunyai panjang sekitar 300 karakter."/>

image

<meta property="og:image" content="urlgambardisini.png">

type

<meta property="og:type" content="blog"/>
<!-- Bagaimana kalian ingin mengkategorikan situs web kalian.-->
<!-- Apakah kalian berbagi posting dari blog? -->

Daftar lengkap untuk tag Open Graph bisa kalian lihat disini.

*Apakah kalian sudah menambahkan tag namun tidak berfungsi? Coba gunakan alat debugger untuk bantuan dari Facebook.

Menggunakan tag Open Graph untuk mengontrol pesan pemasaran adalah taktik yang mudah dan sederhana yang dapat kalian terapkan hari ini. Jangan biarkan semua kerja keras yang kalian lakukan untuk membuat konten hebat menjadi sia-sia – siapkan untuk kinerja berbagi sosial yang optimal dan hasil yang berkelanjutan dan bertahan lama. Sekian artikel kali ini, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *