Cara Memasang Meta Tag Facebook Opengraph Pada Blog

IULIA NEWS – Agustus 24, 2018

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiDq44OJY79hrtVqaJqbJZVVSaBWd4QL2BG6H07VlcI5qeQeCsKLrnlsho3zShHbAP9cJPfWoI2zJ8W_Ue8q_agHa1-gObXN8vPmfrgZrVTZHBEwSFcaFbBgr4KT7tL9hYj9IqNzLK2PF/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiDq44OJY79hrtVqaJqbJZVVSaBWd4QL2BG6H07VlcI5qeQeCsKLrnlsho3zShHbAP9cJPfWoI2zJ8W_Ue8q_agHa1-gObXN8vPmfrgZrVTZHBEwSFcaFbBgr4KT7tL9hYj9IqNzLK2PF/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.