Cara Menampilkan Logo Thumbnail Blog Saat Share Ke Facebook

GAWARIBLOG-Sebagai seorang blogger kita sering membagikan tulisan atau artikel blog kita di Sosial Media, Khusunya Facebook. Saat kita menuliskan alamat blog atau url sebuah artikel pasti akan muncul deskripsi dan thumbnail dari tautan yang kita bagikan.

Nah sering kali saya temui di grup-grup blogger platform Facebook mereka kesulitan dan tidak tahu bagaimana memunculkan thumbnail dan deskripsi ini. Hal ini terjadi karena mereka atau kamu yang masih kebingungan kenapa tidak muncul logo blog dikarenakan belum memasang kode Meta Tag Open Graph pada template.

Apa sih Meta Tag Open Graph itu?

Open Tag Meta Graph adalah potongan kode yang mengontrol bagaimana URL ditampilkan ketika dibagikan di media sosial. Mereka adalah bagian dari protokol Open Graph Facebook dan juga digunakan oleh situs media sosial lainnya, termasuk LinkedIn dan Twitter.

Hal ini sangatlah penting karena Facebook menjadi salah satu sumber traffic bagi sebuah blog. Dan saat kamu membagikan url blog di Facebook akan sangat menarik dan kemungkinan dilihat oleh orang lain menjadi lebih tinggi jika menggunakan Meta Tag Open Graph ini.

Cara Memasang Open Tag Meta Graph

Dalam penerapannya cukup mudah kamu bisa ikuti langkah dibawah ini dan pastikan diperhatikan dengan seksama.

1. Masuk ke akun Blogger

2. Masuk Menu Edit Tema > Edit HTML.

3. Gunakan fungsi CTRL + F dan cari kode </head>.

Yang harus kamu lakukan adalah menempatkan kode dibawah ini tepat DIATAS kode </head>.

<!-- Facebook Meta Tag Open Graph by igniel.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://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.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

Ganti beberapa value diatas dengan milik kamu sendiri.

1. https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png ganti dengan url gambar atau logo blog milik kamu. 2. 106660612706164 Ganti dengan User ID dari Facebook atau Fanspage kamu (ada 3 buah). 3. 1804789006468790 Ganti dengan ID aplikasi Facebook kamu. Jika tidak punya bisa kamu hapus saja baris meta content fb app_ID.

Ingat ukuran URL Gambar atau Logo setidaknya 200px X 200px.

Cara Cek Apakah Sudah Muncul Open Tag Meta Graphnya

1. Kunjungi Facebook Debug Tool
2. Masukkan URL BLog.
3. Klik tombol Debug.
4. Jika belum muncul klik tombol SCRAPE AGAIN.

Selesai dan cukup mudah bukan Cara Menampilkan Logo Thumbnail Blog Saat Share Ke Facebook ini. Silahkan langsung dipraktekkan jika kamu merasa bingung atau ada yang ingin ditanyakan silahkan berkomentar dibawah.