Cara Menambahkan Facebook Open Graph Meta Data di Blogger
Tuesday, May 7, 2013
11 Comments
 |
| Open Graph |
Facebook Open Graph Meta untuk Blogger:
Sebelum kita melompat ke tutorial kami, adalah penting untuk mempelajari apa istilah (properti obyek) lebih sering digunakan dalam Open Graph. Ini tidak hanya akan membantu Anda untuk memahami atribut tetapi juga akan membantu Anda dalam mempelajari fungsi mereka.- og: title: Kondisi ini merupakan judul posting Anda, blog, dll
- og: url: ini merupakan URL posting Anda, homepage, dll
- og: image: kondisi ini merupakan gambar yang harus ditampilkan di Facebook.
- og: type: Ini merupakan jenis halaman Anda. Sebagai contoh, pada homepage kita menggunakan "blog" dan pada halaman artikel kita menggunakan "artikel" atribut.
Langkah # 1: Menambahkan Ruang nama Open Graph Protocol :
Hal pertama yang perlu Anda lakukan adalah untuk login ke account Blogger Anda. Sekarang dari dashboard pergi ke Template >> Edit HTML dan cari berikut disorot HTML atribusi. (Quick Tip: Kode ini biasanya ada di baris pertama dari coding template yang Anda).<html ......
xmlns:expr='http://www.google.com/2005/gml/expr'>
Sekarang hanya sebelah kode disorot (seperti yang ditunjukkan di atas) menambahkan xmlns: og = 'http://ogp.me/ns #'. Setelah semuanya turun, agak akan terlihat seperti ini. (Quick Tip: Pastikan Anda meninggalkan ruang antara dua kode).
<html xmlns:og='http://ogp.me/ns#' ......
xmlns:expr='http://www.google.com/2005/gml/expr'>
Langkah # 2: Menambahkan Objek Properties:
Setelah menambahkan namespace dengan benar dalam template, sekarang saatnya untuk memasukkan properti obyek yang telah kita bahas di awal tutorial ini sehingga mencari tag <head> dan tepat di bawah ini paste potongan berikut coding. Setelah semuanya selesai, tekan tombol "Simpan Template" tombol.<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
Selamat: Facebook Open Graph Meta Data berhasil ditambahkan ke blog Blogger Anda.
Anda mungkin penasaran untuk mengetahui apakah semuanya benar atau tidak, jadi jika Anda ingin belajar bagaimana konten akan terlihat ketika Anda akan berbagi di Facebook kemudian menguji URL Anda di Facebook Debugger yang bekerja sama persis seperti Tool Rich Snippet. Ini menampilkan kesalahan dan memberikan preview kecil konten Anda.
Pada catatan kedua, sebagian besar template tidak dioptimalkan untuk Open Graph, sehingga Anda perlu untuk mendapatkan pekerjaan ini dilakukan diri sendiri tidak peduli apakah Anda menggunakan Custom atau standar Blogger template. Namun, tag ini tidak membantu Anda untuk peringkat yang baik dalam hasil mesin pencari. Ini hanya untuk membantu crawler Sosial untuk mengambil konten yang tepat dari situs Anda.
Kami yakin bahwa artikel ini akan membantu anda dalam menanggulangi bug yang mungkin Anda hadapi saat berbagi konten Anda di Facebook. Itulah Cara Menambahkan Facebook Open Graph Meta Data di Blogger semoga bermanfaat dan jangan lupa meninggalkan komentar di bawah ini.
terima kasih bro udah bisa
ReplyDeletesama sama
DeleteTerima kasih banyak min atas informasinya, mudah-mudahan sukses dipasang di blog aku :)
ReplyDeletesalam kenal ya min....
siip gan,, makasih banyak ya,, nubi ijin nyobain sekalian belajar lah.. :D
ReplyDeletesaya udah coba masukin meta deskripsinya tapi gak mau muncul itu kenapa ya mas??
ReplyDeleteDi blog saya kaga bisa gan ,, error , pemberitahuannya : {associated with an element type "html" must be followed by the ' = ' character.}
ReplyDeletemantaf informasinya gan
ReplyDeletewww.trikbaru.xyz
mau tanya neh om, kenapa pas share link artikelnya justru tidak muncul yah ??
ReplyDeleteerror mas bro
ReplyDeleterất hữu Ãch.. thank pro..also make your surfing experience faster and smoother on download uc browser
ReplyDeletethat is pecial post with many good imformation and we can refer that. when you waiting download you can relax by listen music at save lagu that is so great
ReplyDelete