Tambahkan Meta Tag Facebook Open Graph ke Blogger – Melanjutkan konten artikel saya sebelumnya mengenai Mengatasi Thumbnail Tidak Muncul Saat Share Tautan ke Facebook. Artikel kali ini saya akan membahas topik yang masih berhubungan dengan Thumbnail Facebook yaitu Meta Tag Facebook Open Graph.

Facebook Open Graph adalah aturan atau standar yang berfungsi untuk mengintegrasikan atau menghubungkan konten dari website ke media sosial. Open Graph akan mengkontrol data apa saja yang akan ditampilkan saat website dibagikan ke Facebook atau media sosial lain.

Nah, agar website milik kita dapat tampil dengan baik saat dibagikan ke Facebook, kita perlu memasang kode Meta Tag dari Facebook Open Graph sehingga sistem dari Facebook dapat mengambil data yang dibutuhkan dari website kita. Berikut panduan lengkapnya :

Baca Juga : Cara Submit Sitemap Blogger ke Google Search Console

Menambahkan Meta Tag Facebook Open Graph ke Blogger

Sebelum mengikuti langkah-langkah dibawah, pastikan kalian sudah melakukan backup template Blogger yang sedang kalian gunakan sehingga nanti bila terjadi kesalahan, eror atau semacamnya, kalian masih bisa melakukan restore atau mengembalikan template blog kalian.

• Masuk ke Dashboard Blogger kalian, klik menu Template > pilih Icon Segitiga Dropdown > lalu pilih Edit HTML.
• Cari tag lalu tempel Kode Meta Tag berikut ini tepat dibawah tag :

<b:if cond=’data:blog.url == data:blog.homepageUrl’> 
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<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 expr:content=’data:blog.pageTitle’ property=’og:title’/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<meta content=’article’ property=’og:type’/>
<b:else/>
<meta content=’website’ property=’og:type’/>
</b:if>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<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 expr:content=’data:blog.blogspotFaviconUrl’ 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 content=’Deskripsi Website Alternatif” property=’og:description’/>
</b:if><meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’ID Facebook App‘ property=’fb:app_id’/>
<meta content=’ID Facebook / Fan Page‘ property=’fb:admins’/>
<meta content=’en_US’ property=’og:locale’/>
<meta content=’en_GB’ property=’og:locale:alternate’/>
<meta content=’id_ID’ property=’og:locale:alternate’/>

• Selanjutnya, cari tag lalu tempel kode berikut tepat dibawah tag :

<div id=’fb-root’/>

• Ganti teks yang saya buat Bold + Italic dengan keterangan berikut ini :

Deskripsi Website Alternatif dengan Deskripsi Singkat Blogmu.
ID Facebook App dengan ID dari App Facebook milikmu.
ID Facebook / Fan Page dengan ID dari Akun Facebook atau Fan Page milikmu.

• Simpan template kalian.
• Kalian bisa cek apakah sudah bekerja dengan melakukan debug tautan dari blog kalian di halaman Facebook Share Debugger.

Baca Juga : Mengatasi Limit / Batasan Save for Web Adobe Photoshop

Itulah sedikit panduan untuk Menambahkan Meta Tag Facebook Open Graph ke Blogger kalian. Pastikan kalian mengikuti langkah-langkah diatas dengan urut ya agar tidak ada langkah yang terlewat. Lalu, bila kalian masih bingung, kalian boleh tanya via kolom komen dibawah.

Kalian juga bisa mendukung saya lewat halaman berikut ini. Terima kasih sudah membaca! Cheers~!