MTUC: Memahami Open Graph Protocol Dan Memasang Pada Blogger

Bagaimana nak memasang open graph meta tags protocal pada blogger
Assalamualaikum WBT dan selamat sejahtera kepada tetamu yang dihormati. Syukur, Alhamdulillah saya akhirnya dapat juga membuat sambungan episod daripada siri MTUC(Mengoptimumkan-Template-Untuk-Carian). Ok, post kali ini ialah tentang open graph protocol.

Tapi apa kebenda tu?

Penting ke?

SIRI: Mengoptimumkan Template Untuk Carian(MTUC) 2012

Episod-5: MTUC: Memahami Open Graph Protocal Dan Memasang Pada Blogger

Definisi Dan Kegunaan Open Graph Protocol

Open Graph Protocol = Membolehkan mana-mana laman web untuk menjadi objek yang kaya dalam graf sosial. Sebagai contoh, ini digunakan di Facebook atau google+ atau twitter untuk membenarkan mana-mana laman web mempunyai fungsi yang sama seperti apa-apa objek yang lain di Facebook.

- Sumber: http://ogp.me/

Kegunaan Open graph meta tags = Membolehkan anda kawal kandungan(content) yang anda nak tunjuk dalam laman facebook. Kita pernah lihat post seperti ini di dalam Facebook. Tapi kita tak tahu bagaimana nak membuatnya. Jawapannya ialah Open Graph :)


og: title - Tajuk halaman anda, kandungan, objek dan lain-lain yang anda ingin ia muncul apabila dipaparkan di Facebook.

og:site_name - nama laman/blog anda.

og:description – Description blog/post anda.

og:type - Jenis kandungan. Fikirkan ini sebagai kategori, hotel, blog, artikel dan lain-lain.

og:image - Satu URL imej yang sepatutnya mewakili objek anda dalam graf.

og: url - Ini akan menjadi URL yang akan dikaitkan dengan kandungan anda iaitu link.


Sekarang, Mari Kita Pasang Open Graph Meta Tags Pada Blogger

1) Seperti biasa le, tak kan tak tau kot (hehe... :P). Pergi Ke Blogger Dashboard.

2) "Template" > Klik "Edit Template" > Klik "Proceed".

3) Cari kod ini
<b:include data='blog' name='all-head-content'/>

4) Selepas sahaja anda jumpa kod diatas, letakkan kod dibawah nanti dibawah kod tadi(#3)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='&quot;ms_MY&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>

Sumber kod:


TAMBAHAN DAN PENTING:

4.a) Cari kod ini

<html

4.b) dan gantikan dengan kod dibawah

<html xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'

5) Klik Preview, Kalau tiada masalah. Klik SAVE dan siap!

Penerangan

Saya rasa penerangan ini agak panjang juga. Tapi tidak mengapa semua ini saya akan terangkan.

Line-1 ~ item

= Ialah satu kod khas untuk blogger untuk memaparkan widget/kod pada post page sahaja.

Line-2 dan Line-10 ~ og:type

= Ialah type apa blog/post anda.

Line-2 menunjukkan type kandungan ialah article. Kalau kandungan anda ialah video. Tukar kepada video.
Line-10 menunjukkan type laman anda. Dia cuma ada dua sahaja, blog atau website.

Baca lagi tentang og:type: http://ogp.me/#types

Line-3 , Line-9 ~ site_name , og:title

= Ialah tajuk blog anda. Anda tidak perlu edit kerana ianya automatik tahu tajuk blog anda sebab kod data:blog.title.

Line-4 ~ og:title

= Ialah tajuk blog/post anda.

Line-5 ~ Kod conditional data:blog.postImageThumbnailUrl

= Ialah kod permulaan conditional. Post(pos) Image(gambar) Thumbnail(Imej ringkas) URL(Link gambar).

Line-6 ~ og:image

= Ialah gambar post anda.

Line-7 ~ </b:if>

= Kod end-tag untuk kod line-5

Line-8 ~ <b:else/> , else = lain

= Kod else merupakan kod yang istimewa bagi saya. Tapi dalam blogger kod itu digukan secara meluas. Maksud kod itu ialah, untuk memaparkan kandungan dalam sesetengah tempat tetapi tidak yang lain.

Tak faham. Memey le. Saya pun tak faham kalau macam tu. Meh sini saya bagi contoh dibawah:

<b:if cond='condition'>
   [content to display if condition is true]
<b:else/>
   [content to display if condition is false]
</b:if>

Sumber: Widget Tags for Layouts

Condition = conditional. Sama je...

Line-11 ~ </b:if>

= end-tag kod line-1 tadi.

Line-12 ~ og:locale

= Lokasi negara. Di-atas kod ditulis ms_MY ialah Bahasa Malaysia. Kalau blog anda English? en_US. Senarai lokasi,  List of all Locales | http://www.roseindia.net/tutorials/i18n/locales-list.shtml

Line-13 ~ og:url

= Link blog/post anda.

Line-14 ~ Kod conditonal metaDescription

= Permulaan kod conditional meta descrption.

Line-15 ~ og:description

= Description blog/post anda. Kalau tiada? Maka tiada juga description blog/post anda.

Line-16 ~ </b:if>

= end-tag line-14

Dari Penulis

Alhamdulillah, open graph metadata merupakan salah satu kod yang agak istimewa. Walaupun ianya hanyalah untuk laman sosial seperti facebook, twitter atau google plus. Tetapi kod ini tetap perlu ada dalam Template blogger anda.

Terpulanglah kepada anda kalau nak pasang atau tidak.

Masih tak faham ke? Atau tak tau nak pasang? Komen-komenlah dibawah Insya Allah saya akan bantu anda secepat yang mungkin :)

P.S: Takkan komen je, share la sekali di facebook (amboi tamak dia :P)

Beliau seorang penulis online. Peminat Insyirah Azhar. Blog editor Sedut Software Sampai Lebam (SSSL). Penulis eBook Rahsia Google PageRank. Pengasas Seni Bina Blog. Selain itu, beliau berjaya mengusaha lebih 20 Projek Blogspot. Antaranya, KeZoom SSSL dan banyak lagi.

PERCUMA: 3 Cara Tingkatkan Bisnes Tanpa Risiko

(Jangan Terkejut.)

1 ulasan:

Hubungi Saya

Nama

E-mel *

Mesej *

100% Percuma Ebook

[FREE] Ebook Rahsia Google PageRank
Email *

Sumber Inspirasi

Danial Abdul Rahim