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.
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.id/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:
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:
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.
Wah ini kalau dipake buat ‘nakal’ bahaya juga min. Bisa manipulasi thumbnail website yang isinya aneh2 trus ditaruh di facebook dll
Wah ini bisa dibuat nipu orang ya? Kalo isi halaman sama gambar open graph nya beda kan bisa aja dipake buat narik viewer?