Pengoptimalan Media Sosial Blogger dengan Meta Tag Open Graph Protocol OGP

Saat ini, penggunaan Open Graph Protocol (OGP) yang bagian dari teknik SEO (Search Engine Optimization) kurang begitu diperhatikan, karena Google dan raksasa web lainnya tidak lagi memprioritaskan hasil pencarian berdasarkan hal tersebut tetapi sebagian besar berdasarkan pada kualitas konten blog yang anda buat.

Meskipun demikian, teknik OGP dapat membantu blog anda agar dapat disebar luaskan di jejaring sosial, dengan menambahkan tag untuk mengidentifikasi atribut utama halaman blog ketika dibagikan di jejaring sosial seperti twitter. Hasilnya mungkin pembaca blog anda akan sedikit meningkat. Karena dengan ada Tag Meta Open Graph Protocol (OGP) memungkinkan halaman web mana pun menjadi objek kaya dalam grafik sosial. Misalnya, ini digunakan di Facebook untuk memungkinkan halaman web mana pun memiliki fungsi yang sama dengan objek lain di Facebook.

Dengan kata sederhana, Tag Grafik Terbuka akan menyusun data halaman Anda yang tidak terstruktur menjadi informasi terstruktur sehingga halaman tersebut dapat ditentukan ketika dibagikan di Situs Sosial seperti Facebook, twitter dan lainnya. Mereka akan mengambil gambar unggulan, deskripsi, judul dari tautan yang dibagikan. ini akan membantu pengunjung untuk melihat tentang apa tautan yang dibagikan dan peluang mengklik tautan tersebut meningkat.

Open Graph Protocol adalah cara yang relatif sederhana untuk mengubah halaman web apa pun menjadi objek sosial yang dapat dibagikan dengan menambahkan tag untuk mengidentifikasi atribut utama halaman tersebut ketika dibagikan di jejaring sosial seperti Facebook. Sebelum kita melihat tag OGP ini dan bagaimana mengintegrasikannya ke dalam blog Blogger Anda, mari kita lihat bagaimana tautan situs web dibagikan di jejaring sosial.

1. Berbagi Tautan di Facebook

Saat anda membagikan URL ketika status Facebook anda melakukan pembaruan, Facebook akan memindai halaman web tersebut dan secara otomatis membuat pratinjau konten tersebut yang mencakup beberapa informasi berguna selain URL yang Anda ketikkan, seperti:

• JUDUL untuk halaman web yang Anda bagikan.
• DESKRIPSI singkat tentang konten di halaman itu.
• GAMBAR dari halaman.

Setelah Anda mempublikasikan status anda, semua informasi tambahan ini menjadi sangat penting, karena kemungkinan besar akan mempengaruhi apakah salah satu teman atau saudara anda akan mengeklik tautan tersebut. Jika gambar terlihat menarik, atau jika salinannya tampak menarik, kemungkinan besar URL yang Anda bagikan akan diklik dan blog anda akan dibaca. Namun, terkadang saat Anda membagikan tautan, gambar, judul, dan deskripsi yang dibuat secara otomatis oleh Facebook hilang seluruhnya atau tidak terlalu menarik.

Sebagai penerbit konten digital seperti blogger atau wordpress, yang ingin membuat konten dan membagikannya di media sosial agar dapat langsung di klik dan di baca akan sangat membantu mempromosikan seluruh isi artikel yang kita tulis. Media sosial Facebook telah menyediakan berbagai utility yang dapat membantu anda dalam mempublikasi konten yang dibuat.

2. Kode Markup Open Graph di Blogspot

Bagaimana cara membuat tautan yang indah di jejaring sosial ketika kiriman Anda dibagikan? Untuk melakukan ini, Anda perlu menerapkan markup Open Graph, yang dimaksudkan untuk memposting ke jejaring sosial. Pernahkah Anda mengalami efek seperti itu ketika Anda membagikan tautan di jejaring sosial dengan halaman tertentu, sedangkan gambar dalam pengumuman dibuat sepenuhnya “kiri”, tidak terkait dengan topik, misalnya spanduk iklan; judul – nama blog; dan deskripsinya adalah teks dari footer blog.

Jika ini masalah pada blog Anda, maka mudah untuk memperbaikinya, yang utama adalah menerapkan markup Open Graph. Pada artikel ini, kami akan menerapkan markup Open Graph ke dalam blog Blogspot/Blogger. Dengan menyematkan markup Open Graph, Anda dapat membuat postingan Anda menjadi indah di jejaring sosial.

Sebelum Anda menyiapkan Open Graph, biasakan diri Anda dengan kode tag meta utamanya:

• og:title: Menulis judul postingan, blog, dll.
• og:url: Kondisi ini menentukan url (link) ke postingan Anda, blog.
• og:image: Kondisi ini akan membantu Anda memasang gambar yang diinginkan di postingan feed jejaring sosial.
• og:description: Properti ini mewakili deskripsi beranda blog Anda, postingan, dll. Ini akan ditampilkan saat Anda berbagi di Facebook.
• og:type: Properti ini mewakili jenis halaman yang dikunjungi pengguna. Kami menggunakan blog/website untuk beranda. selain itu kami menggunakan tipe artikel untuk postingan dan video.
• fb:app_id: Untuk menggunakan Insight Facebook Anda harus menambahkan ID aplikasi ke halaman Anda. Dengan Insight, Anda dapat melihat analitik untuk traffic ke situs Anda dari Facebook. Temukan ID aplikasi di Dasbord Aplikasi.
• og:locale: Bahasa sumber informasi. Secara default ditetapkan ke en_US. Anda juga dapat menggunakan og:locale:alternate jika Anda memiliki terjemahan bahasa lain yang tersedia. Pelajari tentang bahasa yang kami dukung di dokumentasi pelokalan kami.

Jadi sudah sangat jelas, tiap kode yang diawali "og", adalah kode markup Open Graph.

3. Cara Menggunakan Meta Tag Open Graph Protocol

Untuk mengaktifkan halaman blog menjadi objek kaya di situs sosial khusus Facebook, Anda harus menginstal OGP untuk blog Anda.

Facebook menjelaskan beberapa tag grafik terbuka yang direkomendasikan untuk diintegrasikan ke dalam situs Anda untuk membantu Facebook menghasilkan pratinjau. Tag utama yang digunakan Facebook saat membuat pratinjau. Untuk mengaktifkan OGP Facebook, ikuti petunjuk di bawah ini.

a. Ketikkan http://ogp.me/ns#

Agar OGP Facebook dapat aktif pada halaman blog anda, langkah pertama yang harus anda kerjakan adalah mengaktifkan link facebook. Link Facebook tersebut harus anda ketikkan di script no: 3 dari template blog anda. Untuk lebih jelasnya cara mengaktifkan link Facebook pada tempalte blog anda perhatikan contoh script di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
  
  	<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>

Pada script <html.............>, anda tambahkan xmlns:og='http://ogp.me/ns#
Pada script <head>, anda ubah dengan <head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>

b. Tambahkan Meta tag OGP

Setelah anda selesai menambahakn atribut OGP Facebook, pada script di atas, anda lanjutkan dengan mengetik script di bawah ini setelah <head prefix...........> anda tambahkan script di bawah ini untuk mengaktifkan OGP di seluruh halaman blog anda.

<!-- Awal OGP Facebook -->
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<!--<meta expr:content='data:blog.title' property='og:site_name'/>-->
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<!--<meta expr:content='data:blog.pageTitle' property='og:title'/>-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' property='og:image:secure_url'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>  
</b:if>
<meta content='https://www.facebook.com/dapurnethotspot' property='article:publisher'/>
<meta content='https://www.facebook.com/dapurnethotspot' property='article:author'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<!-- Akhir OGP Facebook -->

Implementasi yang dijelaskan di atas untuk Bogger tidak terbatas, Anda dapat memperluas fungsinya dan menambahkan lebih banyak Properti Terstruktur OGP untuk mengidentifikasi situs Anda dengan informasi lebih lanjut ke grafik sosial, Anda dapat menemukan dan mempelajarinya dengan mengikuti instruksi yang tersedia di pejabat Open Graph Protocol situs web.