Cara Memasang Meta Tag Facebook Open Graph di Blog


Meta tag Facebook open graph adalah standar penulisan metadata halaman web dari Open Graph Protokol yang di gunakan oleh pihak Facebook untuk mengoptimalkan konten dengan hosting web saat di bagikan ke Facebook. Element meta ini biasanya di letakan pada bagian <head> HTML.

Pemasangan meta tag Facebook open graph pada halaman web di maksudkan agar memberikan rendering dengan hasil yang optimal saat halaman web di share ataupun likes. Dalam proses rendering crawel Facebook akan melakukan srapping terhadap HTML di URL tersebut untuk mengumpulkan, menyinggahkan dan menampilkan info tentang konten di Facebook seperti judul, deskripsi, gambar dan lainya.

Beberapa manfaat dari meta tag Facebook open graph
→ Membuat web/blog Anda menjadi banyak pengunjung atau visitor
→ Memungkinkan judul artikel pada halaman pertama Google search
→ Judul artikel akan lebih mudah/cepat terindek oleh Google
→ Meningkatkan trafik dan page rank web/blog Anda

Ini mungkin menjadi hal penting apabila Anda yang memiliki sebuah web/blog untuk promosi menggunakan media sosila Facebook. Nah buat sobat yang ingin menambahklan meta tag Facebook open grap di blog, ikuti langkahnya berikut ini.

Cara Memasang Meta Tag Facebook Open Graph di Blog


Secara umum meta tag facebook open graph yang di butuhkan untuk blog terdiri dari beberapa macam dengan fungsi yang berbeda, namun sesuai dengan webmaster facebook kurang lebih ada lima macam. Berikut adalah contoh mark up artikel untuk halaman artikel blog.
<meta property="og:url"            content="http://www.nubietheme.com/2017/04/manfaat-cara-membuat-app-id-facebook.html"/>

<meta property="og:type"           content="article"/>

<meta property="og:title"          content="Cara Membuat dan Mengetahui Aplikasi Facebook"/>

<meta property="og:description"    content="Aplikasi facebook dapat di integrasikan dengan blog..."/>

<meta property="og:image"          content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFZ4H20P-t4o8x1oYEhmNQWWeiOp3oTdCGbK655juIHMEEwiWnzf3B9gzbFNrHklc_DgPjhW8DFQkoqKY9dD16svZkF9jxOirxty9NFDeTrC8KlGttGqaTpY3JqxKWaE4ab52Nnsg89dN/s640/cara+%252Bbuat%252Bid%252Baplikasi%252Bfacebook.png'/>

Penjelasan mark up open graph di atas
→ og:url adalah open graph yang menampilkan URL artikel blog Anda saat di bagikan ke Facebook
→ og:type adalah open graph yang menunjukan bahwa jenis artikel yang di bagikan tersebut merupakan tipe "artikel" bukan website, video ataupun image.
→ og:title adalah open graph yang menunjukan judul artikel yang di bagikan ke Facebook
→ og:description adalah open graph yang menampilkan deskripsi/penjelasan dari artikel yang di bagikan ke Facebook.
→ og:image adalah open graph yang menunjukan URL gambar dari artikel yang di bagikan ke Facebook.

Jika kita menerapkan tag di atas pada template blog, maka akan terlihat beberapa informasi dari kontent seperti gamabr berikut.


Untuk menerapkan meta tag dengan hasil seperti gambar di atas, Anda dapat copy kode tag berikut dan letakan sebelum kode </head>.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta expr:content='data:blog.title' property='og:title'/>

<meta property='og:type' content='website'> 

<meta content='url gambar logo blog' property='og:image'/> 

<b:else/>

<meta expr:content='data:blogspot.FaviconUrl' property='og:image'/> 

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta expr:content='data:blog.pageName' property='og:title'/> 

<meta content='article' property='og:type'/>

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='data:blog,postImageUrl' property='og:image'/>

</b:if></b:if></b:if>

<meta expr:content='data:blog.url' property='og:url'/>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<meta content='http://www.facebook.com/shaynoanggoro' property='article:author'/>

<meta content='http:/www.facebook.com/nubietheme' property='article:publisher'/>

<meta content='1284602071627713' property='fb:app_id'/>

Keterangan tag :
Silahkan ganti content yang berwarna merah sesuai dengan data blog Anda.

Pada kondisi halaman home/beranda, maka og:type sendiri akan menampilkan sebagai "website"  bukan artikel dan og:image akan menampilkan gambar sesuai dengan url yang di masukan atau silahkan ganti dengan url dari logo blog Anda agar lebih relevan.

Pada kondisi halaman posting maka judul, gambar dan deskripsi akan di ambil dari halaman posting. Sedangkan og:type halaman akan menampilkan artikel bukan website.  Bagian deskripsi mengambil dari isi "Deskripsi Penelusuran" yang pada editor posting dan untuk menampilkan kiriman tautan dengan gambar besar gunakan gambar minimal 600 x 315 pixel.

Itulah beberapa meta tag Facebook open graph yang terpenting untuk blog dan untuk tag lainya silahkan pelajari sendiri di webmaster Facebook. Apabila ada kesalahan dalam penulisan artikel ini, penulis mohon maaf atau silahkan komentar untuk menambahkan referensi baru.

Baca juga :
Cara Membuat dan Mengetahui App ID Facebook

Penulis


EmoticonEmoticon