Skip to content Skip to sidebar Skip to footer

Cara Memasang Meta Tag Facebook Open Graph di Blog


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

Pemasangan meta tag Facebook open graph pada halaman web di maksudkan semoga menunjukkan rendering dengan hasil yang optimal ketika halaman web di share ataupun likes. Dalam proses rendering crawel Facebook akan melaksanakan srapping terhadap HTML di URL tersebut untuk mengumpulkan, menyinggahkan dan menampilkan info wacana konten di Facebook menyerupai 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 sahabat 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 ialah pola mark up artikel untuk halaman artikel blog.
<meta property="og:url"            content=" "/>  <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/AVvXsEgV6Sx7vMedUg8LYl6unGafSzqlSMatKfXFppavTBvCPtExXKL7R7RbYpqIoo6moiPfqb_1TCmFBKvyFQj-9WFXjxCKxZxa-xxZZ8MeJHsid7s2PZiBMOxIQ8H9TxRoPR_tg_U3FZXq_tvR/s640/cara+%252Bbuat%252Bid%252Baplikasi%252Bfacebook.png'/>

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

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


Untuk menerapkan meta tag dengan hasil menyerupai gambar di atas, Anda dapat copy arahan tag berikut dan letakan sebelum arahan </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 semoga 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 acuan baru.

Baca juga :
Cara Membuat dan Mengetahui App ID Facebook

Post a Comment for "Cara Memasang Meta Tag Facebook Open Graph di Blog"