open graph metatags, optimasi blogspot di sosial media

Banyak jalan menuju ke facebook, salah satunya menambahkan metatags opengraph di blogspot. Masih ramai diskusi dan percobaan untuk melakukan ini, namun menurut facebook developer di webnya, masih banyak bugs juga. Open Graph Protocol adalah skema FBML untuk media sosial sharing seperti facebook misalnya agar link bisa di masukkan ke facebook dengan gampang, namun rasanya memang ini tanggung jawab para pembuat protokol, bukan tanggung jawab blogger. Sudah lama dan banyak tutorial mengenai hal ini, namun untuk menambah konten yang bermuatan dengan optimasi blogging rasanya tidak salah untuk berbagi saja.

Memasang meta tags untuk Open Graph Protocol di Blogger:

Pertama login ke blogger dashboard dan menuju ke Layout >> Design >> Edit HTML,

Cari kode:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Tambahkan kode Open Graph Protocol ini pada sebelum kode penutup:
```
xmlns:og='http://ogp.me/ns#'
```

Sehingga akan terlihat penambahan Kode name space Open Graph Protocol seperti ini:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

CTRL + F, untuk mencari kode <head> atau <title><data:blog.pageTitle/></title> dibawahnya atau pastekan di atas kode </head> untuk menambahkan meta tags ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://alamat-url/blog-logo.jpg' property='og:image'/>
</b:if>
<meta content='Nama-blog' property='og:site_name'/>
<meta content='App-ID-FB' property='fb:app_id'/>
<meta content='FB-Profile-ID' property='fb:admins'/>

Save - Simpan Template.

Bagi yang sudah menambahkan tombol Facebook Like atau Plus-nya Google, maka penambahan kode 'blog' bisa di gunakan, menjadi agak panjang seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://alamat/logo-blogmu.jpg' property='og:image'/>
</b:if>
<meta content='Nama blogmu' property='og:site_name'/>
<meta content='App-ID-facebook' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>

Setelah selesai, maka silahkan simpan kode HTML tersebut dengan 'save template'
Selesai

Judul: open graph metatags, optimasi blogspot di sosial media ; Ditulis oleh bolosrewu ; Rating Blog: 4.5 dari 5