Tips Memasang Open Graph Meta Tag Facebook di Blog

Bukan rahasia lagi bahwa Facebook telah menjadi pendorong lalu lintas utama untuk semua jenis situs web. Tips Memasang Open Graph Meta Tag Facebook di Blog | Raimond Well harus tepat agar tidak berantakan saat di bagikan di facebook. Saat ini banyak perusahaan besar mengarahkan konsumen ke halaman Facebook mereka alih-alih situs web perusahaan secara langsung. Dan tentu saja ada widget Facebook "Suka" dan "Kenalkan" di setiap situs web. Satu masalah yang selalu saya temukan dengan berbagi URL di Facebook adalah Anda sering tidak memiliki kendali atas gambar dan teks deskripsi yang menyertai URL. Seandainya saya tahu tentang Facebook Open Graph API, saya pasti sudah tahu solusi untuk masalah itu.

Protokol Open Graph Facebook memungkinkan pengembang web untuk mengubah situs web mereka menjadi objek "grafik" Facebook, memungkinkan tingkat penyesuaian tertentu atas bagaimana informasi dibawa dari situs web non-Facebook ke Facebook ketika halaman "direkomendasikan", "disukai" , atau hanya dibagikan secara umum. Informasi ini diatur melalui tag META khusus pada halaman sumber. Mari kita lihat berbagai tag META yang digunakan Facebook untuk memungkinkan Anda menyesuaikan cara situs web Anda dibagikan.

Semua tag META Open Graph Facebook diawali dengan og:, kemudian dilanjutkan dengan properti spesifik yang akan ditetapkan. Data relatif ke set properti masuk dalam content atribut.

Tips Memasang Open Graph Meta Tag Facebook di Blog adalah:

1. Masuk ke menu Template lalu klik tombol Edit HTML
2. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian.
3. Masukkan kode berikut SEBELUM / DIATAS </head>

<!-- [ Facebook Open Graph Meta Tag ] -->
<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/AVvXsEhed7CDGc1Bq-517KG__2WTJ3H2dqieCwDBy_VbcY1oq6G9iWMc-pIJptV6RZ4VFbFP_qifo5PiPKVUq8VU7HLupboTXR-1Sd73FvCX1aPSFV1fgPqaAXzFTnrrtHvr8ts3zpU1mf4ID3M/s1600/310+x+81.png' 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/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' 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'/>

Penjelasan

1. Pada saat kamu membagikan artikel kamu di facebook misalnya https://www.raimondwell.com/2017/01/cara-pasang-facebook-open-graph-baik-benar.html, secara otomatis gambar yang ditampilkan di ambil dari gambar pertama dalam artikel tersebut. Lain lagi jika kamu membagikan URL homepage blog seperti http://www.raimondwell.com/ maka gambar yang akan muncul adalah gambar yang bisa kamu tentukan sendiri atau lebih dikenal dengan gambar favicon/icon blog dimana ukurannya mesti kurang dari 100 kb dan berbentuk persegi. Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed7CDGc1Bq-517KG__2WTJ3H2dqieCwDBy_VbcY1oq6G9iWMc-pIJptV6RZ4VFbFP_qifo5PiPKVUq8VU7HLupboTXR-1Sd73FvCX1aPSFV1fgPqaAXzFTnrrtHvr8ts3zpU1mf4ID3M/s1600/310+x+81.png dengan URL gambar favicon/icon blog kamu sendiri.
2. Ganti 106660612706164 dengan ID atau username profil pribadi Facebook atau Fanspage. Sebagai saran, gunakanlah ID karena dia bersifat tetap. Sedangkan username dapat diubah. mungkin aja suatu saat kamu ganti username, dan lupa mengedit Open Graph Meta Tag di blog. Kan bahaya juga, apalagi tarfik blog kamu tinggi.
3. Ganti 1804789006468790 dengan ID dari aplikasi Facebook kamu. Apakah kamu Belum pernah bikin, atau memang kamu belum pernah denger tentang aplikasi Facebook ini? Baca dulu tutorialnya Cara Membuat Aplikasi Facebook

Bantu Berikan DONASI jika artikel ini dirasa bermanfaat Donasi akan digunakan untuk memperpanjang domain www.raimondwell.com