07 Januari 2021

Cara pasang meta tag facebook open graph di blog

Facebook open graph merupakan sebuah kode html yang berfungsi untuk membaca seluruh komponen pada sebuah halaman ketika alamat url halaman tersebut dishare ke facebook yang kemudian meringkasnya menjadi tampilan yang lebih sederhana berupa komponen inti yang terdapat pada halaman tersebut seperti judul artikel,gambar,url blog,author dan lain-lain.


Seberapa pentingkah facebook open graph bagi sebuah situs atau blog?

Bagi anda yang memanfaatkan facebook sebagai media untuk mempromosikan situs yang anda miliki tentu hal tersebut sangat penting bagi situs anda untuk menarik minat baca para pengguna facebook diseluruh jagat maya.
Dengan kata lain,memasang tag meta facebook open graph merupakan sebuah upaya guna membantu untuk meningkatkan jumlah trafik blog yang anda miliki.


Cara pasang tag meta facebook open graph.

Langkah pertama adalah silahkan copy kode script dibawah ini

<!-- [ Facebook Open Graph Meta Tag by frenaradea.blogspot.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='article' 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/AVvXsEi8RRPEsaOVENEICvFnSgx3sWl82uotP5Ivb1nOwf1jCVfF7bRJPqaeC5XLhsNNcFjGqIpoSZw2ygpBKlfI5Pf9Viaj7j9ZeUEbL5QnKaKctW_0ws04kdxuP_SzDK0OJJCyRiinWGOp354/s0/frenaradea.blogspot.com.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/2255606127XXXXX' property='article:author'/>
<meta content='https://www.facebook.com/2255606127XXXXX' property='article:publisher'/>
<meta content='2255606127XXXXX' property='fb:admins'/>
<meta content='54321890064XXXXX' 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'/>


Keterangan: 
Ganti tulisan warna ungu dengan alamat url gambar anda.
Ganti tulisan warna merah dengan id facebook anda. (Bisa anda lihat pada alamat url ketika anda membuka photo profil fb).
Ganti tulisan warna biru dengan id aplikasi facebook anda. Untuk yang ini anda perlu membuat aplikasi facebooknya terlebih dahulu di Developer facebook.
Jika sudah membuatnya,anda bisa menyalin id aplikasi fb anda yang terdapat dibagian atas dashboard developer facebook.


Selanjutnya masuk ke akun blogger kemudian pilih menu tema lalu klik edit html.
Cari kode </head> dan tempatkan kode script tersebut di atasnya lalu klik simpan.
Dan untuk melihat hasilnya,anda bisa masuk ke bagian Alat debug berbagi yang terdapat pada halaman developer facebook dengan memasukan url blog anda kemudian klik debug.


Pada tampilan artikel blog,silahkan klik tulisan kurangi lagi. Lalu coba anda share ulang artikel tersebut dan lihat hasilnya ketika sudah dishare ulang.

Tidak ada komentar:

Posting Komentar