Skip to main content

Cara Memasang Meta Tag Facebook Opengraph Pada Blog


COPAD | Cara Memasang Meta Tag Facebook Opengraph Pada Blog - Halo sobat COPAD, pada kesempatan kali ini mimin akan membagikan tutorial mengenai pemasangan Meta Tag Facebook Opengraph pada blog. Namun sebelum itu, mari kita simak penjelasan singkat mengenai Meta Tag yang satu ini. Check it out!

Apa Itu Meta Tag Facebook Opengraph?

Facebook Opengraph adalah kode khusus berupa Meta Tag HTML yang memiliki fungsi untuk membaca komponen-komponen halaman ketika link dari halaman tersebut dibagikan ke media sosial Facebook yang nantinya akan ditampilkan menjadi sebuah konten. Komponen-komponen itu berupa judul, gambar, deskripsi, link, serta nama admin. Bukan hanya itu, seperti yang kita ketahui bahwa Meta Tag berperan penting dalam SEO dan tentu Meta Tag FB OG juga salah satunya.

Apa Fungsi Dari Meta Tag Facebook Opengraph?

Fungsinya utamanya tentu saja untuk menarik pengunjung. Facebook OG ini akan memuat blog kalian menjadi lebih enak dipandang ketika membagikannya ke media sosial Facebook. Dan tanpa kode dari Meta Tag FB OG ini, Facebook tidak dapat menampilkan blog kalian dengan benar. Contohnya, kalian pasti pernah melihat seorang atau beberapa blogger ataupun kalian sendiri yang membagikan artikelnya, namun tidak terdapat judul, gambar, deskripsi, bahkan nama dari si blogger tersebut. Hal ini akan menyebabkan kurangnya minat pengunjung untuk mengakses blog kalian, maka dari itu dibutuhkanlah kode dari Meta Tag FB OG ini untuk menyempurnakannya.

Nah, kalian sudah cukup mengerti kan dengan penjelasan singkat di atas. Jika ingin penjelasan lengkapnya, kalian bisa langsung mencarinya di Google. Oke, tanpa basa-basi lagi berikut langkah-langkah dalam memasang Meta Tag Facebook Opengraph. Check it out!

Langkah-langkah Memasang Meta Tag Facebook Opengraph

Langkah 1 - Silahkan Login ke blog kalian terlebih dahulu. Setelah itu, pilih Tema/Theme kemudian pilih Edit HTML.

Langkah 2 - Cari kode </head> pada kotak kode HTML yang telah tersedia dengan menekan Ctrl + F pada keyboard agar lebih mudah.

Langkah 3 - Copy kode di bawah kemudian Paste di ATAS kode </head>.
<!-- [ Facebook Opengraph Meta Tag by zonacopad.com ] -->
<b:if cond='data:view.isHomepage'> 
<b:if cond='data:view.isPost'> 
<b:if cond='data:view.isPage'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://3.bp.blogspot.com/-QcL8vtdAniY/W3cKkg6uw1I/AAAAAAAABZI/cxyLTKwE2zUrzhUoxqn-gx35wLc7NE6XgCLcBGAs/s1600/ZoCo.jpg' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/akbar.arfhan.3' property='article:author'/>
<meta content='https://www.facebook.com/akbar.arfhan.3' property='article:publisher'/>
<meta content='akbar.arfhan.3' property='fb:admins'/>
<meta content='1804789006468790' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Catatan:
1. Ganti link https://3.bp.blogspot.com/-QcL8vtdAniY/W3cKkg6uw1I/AAAAAAAABZI/cxyLTKwE2zUrzhUoxqn-gx35wLc7NE6XgCLcBGAs/s1600/ZoCo.jpg dengan link gambar kalian sendiri. Gambar tersebut akan tampil ketika membagikan link blog kalian. Sedangkan ketika kalian membagikan link artikel dari blog, gambar akan diambil secara otomatis pada artikel tersebut. 
2. Ganti akbar.arfhan.3 dengan nama atau ID Facebook kalian sendiri.
3. Ganti 1804789006468790 dengan ID dari aplikasi Facebook kalian sendiri. Jika kalian tidak tahu atau tidak pernah membuat aplikasi Facebook, kalian bisa membuatnya dengan mengikuti langkah-langkah berikut.

Langkah-langkah Dalam Membuat Aplikasi Facebook Update Agustus 2018

Langkah 1 - Silahkan kalian kunjungi situs berikut. Facebook Developers.

Langkah 2 - Pilih Memulai. Setelah itu, silahkan kalian mendaftar sesuai dengan prosedur yang telah disediakan.

Langkah 3 - Selesai. Kalian sudah bisa melihat ID Aplikasi Facebook kalian. Contoh: ID APLIKASI: 1947568305xxxxxx

Langkah-langkah Untuk Mengecek Apakah Pemasangan Sudah Berhasil

Langkah 1 - Silahkan Login ke situs berikut. Sharing Debugger.

Langkah 2 - Masukkan link blog kalian pada kolom yang telah disediakan.

Langkah 3 - Pilih tombol Debug.

Langkah 4 - Pilih tombol Kurangi Lagi/Scrape Again.

Langkah 5 - Selesai. Jika berhasil, maka akan seperti gambar screenshot di bawah.


Akhir Kata
Sekian untuk artikel Cara Memasang Meta Tag Facebook Opengraph Pada Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.

Comments

Popular posts from this blog

[5.0.2] Iky Os Sm-G530h Fortunave3g

        Di postingan kali ini saya akan share [5.0.2] Iky OS sm-g530h fortunave3g, rom ini base stock rom lolipop sm-g530h instal via twrp, pribadi saja Note:fortunave3g Link rom: https://drive.google.com/open?id=1fbvi56Gi2Ezt2WbZscZJbEJnvKClA2Vj Link fix contacts: https://drive.google.com/open?id=1J7QLccyprHhHvpreVIXDVwJmu_PlRCHw Cara instal rom - lakukan 3 wipe, wipe data, dalvic, cache - Instal rom [5.0.2] Iky OS sm-g530h fortunave3g - Instak fix contacts - Tunggu sampai selesai - Reboot system Kelebihan - Root - Smooth - Full deodex - Tweak - Multi user - Like Grace ux - dan lainya Bug -----------   Feature Iky OS 5.0.2  Status kafetaria - Battery style - Battery bar   - Carrier label - Carrier logo - Network traffic - Gradient status bar - Mini calendar ( Show hidden ) - Digital clock ( Show hidden ) - Default clock ( Show hidden ) Qs panel - Header bann...

Catatan: Fitur TabunganKu dan Pilihan Netizen

Penggemar tabungan tanpa biaya administrasi bulanan boleh berterima kasih pada presiden ke-enam Susilo Bambang Yudhoyono (SBY). Tanpa ide dan pencanangan Gerakan Indonesia Menabung  oleh beliau, boleh jadi produk ini tidak pernah ada. Kalau yang sekarang ……… ( Gak usah di lanjut deh…. No comment aja…. Dari pada kebablasan bisa repot…  cos, saya bisa nulis setajam silet, silet nya Feny Rose tapi

mengamati kedatangan pengunjung dengan feedjit

Apakah kegunaan widget yang satu ini ( live traffic feedjit ) ..? jadi dengan widget ini anda bisa mengetahui darimana pengunjung blog anda datang, dari blog orang lain atau dari hasil pencarian pencarian search engine semacam google, yahoo, msn livesearch dan lain lain. Dengan widget ini pula anda juga dapat membantu menaikkan SEO blog anda dengan cara menelusuri dan membuka dari site serach referer ( website pencarian yang sudah menjadi media pengantar kedatangan pengunjung anda ) tapi akan saya bahas tutorial nya di lain session, karena tidak sesuai dengan topik judul yang dibahas sekarang, tapi jika anda merikuesnya pasti akan segera saya posting untuk anda.. dijamin dech.. hehehe.. Oke sekarang kita kembali ketopik pembahasan yaitu " mengamati kedatangan pengunjung blog dengan feedjit ". Apa itu feedjit ..? adalah sutu website penyedia widget counter yang berfungsi untuk merekam kedatangan pengunjung suatu blog atau web ( live traffic feed ). Nah untuk mendapatka...