Bismillah. Alhamdulillah. Bingung dengan judul artikel ini? Saya juga bingung menentukan judul artikel kali ini, namun bahasan materinya tidaklah terlalu rumit dengan catatan bahwa pembaca artikel ini pernah menggunakan Facebook dan Blogger. Kenapa tidak menggunakan judul "Memperbaiki Snippet Deskripsi Blogger pada Facebook"? Atau "Menampilkan Deskripsi dan Gambar Artikel Blog pada Facebook?" dan lain sebagainya. Judul tersebut sepertinya terlalu praktis untuk digunakan dan mesin pencari sudah terlalu bingung dengan artikel-artikel tersebut. Artikel kali ini masih terkait dengan dua artikel sebelumnya yang membahas Integrasi Blogger Facebook. Fokus materi kali ini adalah Open Graph Protocol. Apa Open Graph? Apa hubungan Open Graph dengan Blogger, Facebook, Twitter dan situs jejaring sosial lainnya? Mari kita diskusikan...
Deskripsi
Blog adalah sebuah objek dihadapan jejaring sosial dan jejaring sosial mau tidak mau harus diakui sudah menjadi subjek bagi para pengguna internet didunia maya. Ketika seseorang membuka jejaring sosial maka mereka berharap dapat bertemu dengan teman-teman lama dan teman baru, menemukan ide-ide baru atau menemukan berbagai ilmu baru, untuk itulah saya menempatkan jejaring sosial menjadi sebuah subjek. Artikel yang kita buat pada blog dapat menjadi sebuah objek yang dapat digunakan untuk memperkaya konten jejaring sosial. Blog-blog dengan artikel-artikel menarik seringkali dibagikan via jejaring sosial, dan trafik pengunjung juga cukup signifikan berasal dari para pengguna jejaring sosial. Lalu bagaimana agar sebuah blog dapat terhubung dengan jejaring sosial dan mampu memperkaya konten jejaring sosial? Sederhananya, bagaimana agar blog kita bisa menjadi salah satu objek pada jejaring sosial?
Open Graph Protocol atau Protokol Grafik Terbuka menjadi sebuah standar yang disepakati bersama antar para pengembang jejaring sosial dan digunakan untuk menghubungkan sebuah objek (blog dan lain sebagainya) dengan subjek (jejaring sosial). Open Graph Protocol memungkinkan halaman web untuk menjadi sebuah objek pada Grafik Sosial (Social Graph). Salah satu situs jejaring sosial yang menggunakan Standar Open Graph Protocol adalah Facebook selain Twitter dan Google. Dengan standar Open Graph ini memungkin halaman-halaman blog kita memiliki fungsi dan posisi sama seperti halnya objek-objek lain pada Facebook.
Blog merupakan situs yang berdiri sendiri, Facebook juga demikian merupakan situs yang berdiri sendiri dan Open Graph berada diantara keduanya agar saling berhubungan dan saling berkomunikasi satu sama lain. Open Graph digunakan sebagai protokol standar untuk mengkombinasikan satu sama lain agar menjadi satu bagian, hal ini karena teknologi dan skema yang berbeda diantara para pengembang teknologi. Tidak ada satu teknologi yang menyediakan informasi sangat melimpah dan beragam yang mampu menandingi konsep Sosial Graph dan Open Graph Protocol dikembangkan berdasar pada teknologi Social Graph. Lalu dimana posisi API (Javascript SDK) yang sudah kita buat sesuai dua artikel sebelumnya? Sederhananya; API adalah kendaraan dan Open Graph Protocol adalah jalan penghubung.
Dasar Metadata
Setiap objek digital seharusnya memiliki metadata, bahkan sebuah photo yang kita sebar memalui internet itu memiliki metadata. Metadata berisi informasi tentang objek tersebut. Misal; sebuah photo memiliki informasi tentang; luas area photo, kepadatan pixel, tipe kamera, model kamera, waktu memotret, versi software, posisi objek tersebut diambil dan lain sebagainya. Informasi-informasi yang ada pada photo tersimpan pada metadata.
Untuk mengaktifkan halaman-halaman blog agar menjadi objek grafik (Graph Object) maka kita harus menambahkan metadata dasar pada halaman blog. Open Graph telah menyiapkan metadata yang berdasarkan pada standar protokol RDFa. Untuk menambahkan metadata pada halaman blog, berarti kita harus memasukan tag <meta> pada bagian <head>. Didalam metadata inilah tersimpan informasi tentang blog dan metadata tidak akan ditampilkan pada browser karena metadata layaknya sebuah informasi yang akan diambil dan ditampilkan apabila diakses oleh situs lain.
Proses Pengambilan Metadata
Dibawah ini gambaran proses sederhana ketika Facebook mengambil informasi metadata dari Blog.
- Ketika pengunjung membuka halaman blog anda dan kemudian melakukan aksi (misal; suka, rekomendasi, berbagi dan lain-lain) melalui aplikasi yang sudah terintegrasi pada blog, maka...
- Aplikasi akan mengirimkan aksi tersebut ke Facebook melalui otentikasi akun pengguna, jika pengguna belum melakukan login pada Facebook, maka aplikasi akan memintanya untuk login (dibahas pada artikel sebelumnya).
- Facebook kemudian mengambil informasi halaman yang dikirim oleh pengguna melalui metadata yang disediakan pada halaman blog tersebut.
Beberapa saat yang lalu banyak beredar tutorial blog membahas tentang cara memperbaiki deskripsi blog yang tidak muncul pada Facebook, salah satunya membahas dengan cara menambahkan tag <p> pada awal artikel blog. Cara ini jelas bukan cara terbaik dan merupakan metode yang tidak sesuai dengan Social Graph Protocol, walaupun memang berhasil namun hal tersebut tidak sesuai standar dasar metadata.
Standar Metadata Open Graph
Sifat dasar metadata untuk halaman-halaman situs harus sesuai dengan protokol Social Graph. Sudah menjadi kesepakatan bersama bahwa protokol yang digunakan sebagian besar pengembang jaringan sosial adalah standar protokol Open Graph. Dibawah ini empat sifat Metadata Open Graph yang diperlukan untuk setiap halaman, yaitu:
- og:title - Judul objek yang akan ditampilkan dalam grafik (misal; "Tampilkan Deskripsi Blog pada Facebook").
- og:type - Ini jenis obyek halaman blog Anda (misal; "article"). Ini tergantung pada jenis yang Anda tentukan, properti lainnya silahkan baca pada halaman dokumentasi Open Graph.
- og:image - Sebuah URL gambar yang mewakili objek dalam grafik. URL ini diambil dari halaman blog anda.
- og:url - URL Canonical dari objek yang akan digunakan sebagai ID tetap dalam grafik (misal; "http://modification-blog.blogspot.com/metadata-tag.html").
Contoh Metadata Open Graph
Dibawah ini adalah contoh metadata standar Open Graph yang harus ada pada halaman situs, yaitu:
<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata ini diambil dari standar Open Graph yang secara global berlaku pada semua pengembang jejaring sosial baik itu Facebook, Twitter maupun Google Plus. Empat sifat dasar diatas adalah standar kesepakatan bersama, sedangkan properti lain adalah bersifat tambahan. Untuk properti lain dari Metadata Open Graph silahkan merujuk kesitus Open Graph.
Metadata Facebook
Setiap situs pasti punya kebijakan sendiri tentang pengunaan metadata, begitu pula dengan Facebook. Situs jejaring sosial ini menambahkan beberapa sifat dasar metadata sebagai hal wajib jika ingin terkoneksi dengan baik. Berikut sifat dasar Metadata Facebook, yaitu:
- fb:app_id - Ini berisi ID Aplikasi atau API Key yang sudah kita buat pada artikel sebelumnya (masih ingatkan?).
- fb:admins - Berisi ID User atau pengguna. Setiap membuat akun Facebook pasti kita diberikan ID User unik, masukan pada bagian ini.
- og:site_name - Nama dari situs yang anda kelola.
- og:description - Berisi deskripsi dari halaman situs blog anda.
<html xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
...
</head>
...
</html>
Metadata diatas adalah rekomendasi Facebook, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Facebook. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Facebook.
Metadata Twitter
Twitter sebagai salah satu jejaring sosial besar juga tidak mau ketinggalan dengan menyediakan property metadata sendiri, seperti dibawah ini:
- name='twitter:card' - Ini berisi informasi tentang situs dan pemilik situs.
- name='twitter:site' - Anda harus membuat dulu akun Twitter khusus untuk blog anda (misal; @bloggertuneup), ketika seseorang membagikan melalui jejaring twitter maka properti ini akan otomatis dimasukan.
- name='twitter:creator' - Ini berisi informasi alamat akun Twitter author blog (misal; @dedehendriono). Jadi anda harus memiliki akun twitter pribadi dan ketika seseorang membagikan halaman situs maka otomatis properti ini akan dimasukan.
- Sedangkah Metadata selanjutnya hampir sama dengan Metadata Open Graph.
<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata diatas adalah rekomendasi Twitter, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Twitter. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Twitter.
Integrasi Metadata Pada Blogger
Sudah panjang lebar bahasan mengenai metadata, waktunya kita mengintegrasikan metadata pada Blog kita. Bagaimana cara mengintegrasikan metadata pada Blogger? Apakah semua harus dimasukan kedalam metadata Blog? Dibawah ini adalah contoh metadata secara keseluruhan hasil dari penggabungan Open Graph, Facebook dan Twitter yang dimulai dari Twitter dulu, yaitu:
<html prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<!-- Metadata Open Graph -->
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata diatas jika langsung dipasang pada blog akan menampilkan metadata yang kacau balau. Metadata diatas hanyalah contoh.
Metadata Twitter, Facebook dan Open Graph Untuk Blogger
Dibawah ini metadata yang sudah disesuaikan dengan karakter Blogger. Ingat! Metadata ini khusus untuk pengguna Blogspot sedangkan pengguna platform blog yang lain, silahkan sesuai dengan metadata yang sudah dijabarkan diatas.
Sisipkan Document Conformance dibawah ini (seperti sudah dijelaskan pada artikel sebelumnya) pada tag <html>:prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'Masukan metadata dibawah ini pada tag <head>:
<!-- Metadata Twitter -->Lakukan penyesuaian metadata pada bagian dibawah ini:
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<!-- Metadata Open Graph -->
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:type' content='article'/>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl'/>
- content='@situsAnda' - ganti dengan akun situs di jejaring sosial twitter.
- content='@userName' - ganti dengan akun anda di jejaring sosial twitter.
- content='1234567890' - ganti dengan API Key atau Aplication ID situs anda di jejaring sosial Facebook (API Key sudah dibahas sebelumnya).
- content='0987654321' - ganti dengan ID User anda di jejaring sosial Facebook.
- content='article' - ganti dengan jenis blog anda, apakah berjenis artikel, photo, video dan lain sebagainya.
- Anda bisa menambahkan conditional tag pada metadata sesuai dengan kebutuhan.
Memeriksa Metadata
Jika metadata sudah terintegrasi pada blog anda, lakukan permeriksaan metadata dengan alat Debugger Facebook atau foursquare.
Berikut contoh screenshoot pada Facebook:
Masalah Metadata Deskripsi dan Gambar
Beberapa blog bisa saja bermasalah saat diuji metadata. Masalah yang sering ditemukan adalah:- Deskripsi Blog tidak tampil - Ini bukan masalah pada metadata diatas, namun pada meta deskripsi Blogger yang belum terintegrasi pada Blog anda. Ini akan dibahas pada artikel berikutnya.
- Gambar muncul namun ada peringatan - Ini masalah internal pada Blogger yang hanya memberikan gambar thumbnail yang ter-crop pada ukuran 72x72 pixel, sedangkah Facebook memiliki standar ukuran minimal gambar yaitu 200x200 pixel. Mungkin ada yang bisa memecahkan?
Mencari ID Facebook User
Tadinya saya mengira semua sudah tahu ID Facebooknya masing-masing, ternyata ada juga yang kesulitan. Untuk yang kesulitan menemukan ID Facebook-nya, silahkan gunakan tools yang sudah saya buat. Cukup mudah, misal; saya mempunyai URL Facebook https://www.facebook.com/dede.hendriono, ambil namanya saja yaitu dede.hendriono kemudian masukan kedalam form input dan klik Submit. Halaman baru akan terbuka yang berisi informasi cukup lengkap tentang anda.
Kesimpulan
Akhirnya selesai juga menulis tentang Metadata. Lalu bagaimana dengan Google Plus? Kita tidak usah bingung dengan Google Plus karena Blogger merupakan bagian dari Perusahaan Google sudah jelas hal ini pasti diperhatikan tanpa perlu penambahan kode secara manual. Lalu apakah ini bagian dari teknik SEO? dan Apakah ini mempengaruhi SERP? Saya bukan ahli SEO, jadi tidak tahu perkara demikian. Saya menulis tentang artikel diatas hanya untuk mengikuti standar-standar yang disepakati bersama, dan tidak ada hubungan dengan pembahasan SEO. Sampai hari ini Blogger Tune-Up masih memegang prinsip "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi" Sampai ketemu pada pembahasan berikutnya. Selamat mencoba dan semoga berhasil. Happy Blogging :)
