Cara Memasang Meta Tag Facebook Open Graph Di Blogger

Pasti anda sudah tahu kan fungsi dari meta tag facebook open graph? Fungsi dari meta tag ini adalah untuk fetch new scrape dan me-render judul artikel, deskripsi artikel, gambar dan informasi lain pada artikel.

Sehingga pada saat url blog/url artikel anda dibagikan/share di facebook maka akan muncul judul, deskripsi, gambar, penulis artikel dan informasi lainnya.

Pentingkah memasang meta tag facebook open graph ini? Kalau jawaban menurut estimasi saya sendiri pemasangan meta tag ini perlu dipasang dan diterapkan ke edit html blogger (xml).

Mengapa perlu memasang metag facebook open graph ini? biasanya pengunjung blog membaca top artikel atau salah satu artikel yang menarik di blog kita, jadi disaat mereka hendak membagikan artikel kita ke facebook saat itulah fungsi meta tag facebook ini diterapkan.

Mengingat faktor media sosial terutama facebook yang turut menyumbang dan berpartisipasi besar dalam mendapatkan visitor/pengunjung blog. Selain itu di saat kita ingin mempromosikan url blog/url artikel kita, disaat itu juga meta tag ini menjalankan fungsinya.

Walaupun meta tag facebook ini tidak terlalu berkonstribusi besar dalam seo artikel namun cukup mempengaruhi ketenaran artikel kita di facebook. Makin banyak yang share artikel kita maka akan banyak pengunjung bukan?

Contoh hasil dari pemasangan meta tag facebook ini dapat anda lihat pada gambar di bawah ini:

Nah, langsung saja pada topik pembahasan kita, hal pertama yang wajib untuk anda ketahui adalah fungsi dari masing-masing meta tag facebook open graph ini. Apa saja fungsinya? silahkan simak ulasan berikut ini:

1. og:title

kode ini berfungi untuk menyimpan informasi judul artikel blog yang bersangkutan. jika facebook menemukan dan membaca kode ini, maka akan digunakan sebagai judul konten share facebook. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:title” content=”judul artikel anda di sini”/>

2. og:type

Kode ini digunakan untuk menyimpan informasi jenis artikel yang akan anda share, ada banyak sekali go:type yang bisa anda gunakan. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:type” content=”article”/>

3. og:description

Kode ini digunakan untuk meletakan informasi descripsi yang akan disertakan di konten share facebook. untuk blog berfaltform blogspot anda bisa mengisi meta og:description dengan meta description untuk halaman artikel yang akan dishare. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:description” content=”tulis apa saja tentang deskripsi blog anda di sini“/>

4.og:image

Kode open graph ini dapat dapat anda gunakan untuk menyimpan informasimengenai gambar yang akan digunakan dikonten share facebook, jikaartikel yang dishare mencantumkan gambar maka gambar tersebut harus bisadisertakan dikonten share facebook secara otomatis. facebook secaraotomatis akan menggenerate konten share dengan gambar yang diambil dari kode open graph og:image ini. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:url” content=”alamat url gambar lengkap”/>

5. og:url

Tag open graph ini bisa anda gunakan untuk menyimpan informasi url dari artikel blog yang akan di share ke facebook. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:url” content=”http://www.alamaturl.com/artikel/test”/>

6. og:site_name

Kode open graph ini dapat digunakan untuk meletakan nama situs dari artikel blog yang akan dishare. kode ini akan dibaca oleh facebook untuk mendapatkan nama situs atau blog yang melakukan share. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”og:site_name” content=”Eris web id”/>

7. fb:admins

kode ini bisa anda gunakan untuk mengaitkan halaman facebook anda dengan blog, agar setiap interaksi fans page blog anda terhadap blog yang anda share statisticnya dapat diktahui secara detail. Kode meta tag nya bisa anda lihat di bawah:

<meta property=”fb:admins” content=”nomor id facebook anda”/>

8. article:author

Kode meta tag ini dapat anda gunakan untuk menampilkan link dari penulis artikel, silahkan pasang alamat url profile facebook anda pada meta tag ini.

<meta content='http://facebook.com/erispedia' property='article:author'/>

9. fb:app_id

Kode ini dapat berguna untuk memanggil aplikasi facebook dan menggunakan aplikasi facebook untuk mengolah og:image dan meta tag penting yang lainnya. Meta tag nya bisa anda lihat di bawah:

<meta content='828725003******' property='fb:app_id'/>

Pemasangan kode meta lengkap di html editor blogger

Di atas tadi adalah beberapa kode penting dalam meta tag facebook open graph, selanjutnya saya akan membahas cara pemasangnya pada blog, anda bisa menggunakan kode meta lengkap yang sudah saya buat ini, kode ini sudah siap pakai, anda hanya perlu merubah tulisan warna merah dengan data anda:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='828725003******' property='fb:app_id'/>
<meta content='100004878******' property='fb:admins'/>
<meta content='http://facebook.com/erispedia' property='article:author'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4DdVC4fWFJ45IwXEQ7WroCRVHC7oulFahA9KEgRrMOnN0_f6nBeBYbYlU8iZh9zRiLXVXl08X_bMbNlJMrFPk0vyGVjeWQM_bJUwEkWnbHtr8SZxi4W0XH7-XXz1Lfac2gDCk3CVsBZA/s1600/erisblog+graph.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>

Silahkan letakkan kode di atas di bawah kode <head> atau satukan di bawah meta tag yang sudah ada, yang penting letaknya masih di bawah <head> lalu simpan template anda. Jangan lupa merubah tulisan warna merah di atas sesuai dengan data anda. 

Untuk og:image masukkan dengan alamat url gambar anda, jadi jika post yang tidak mempunyai gambar maka akan menggunakan og:image di atas, og;image di atas juga digunakan untuk gambar default home page. untuk meta tag judul, meta tag deskripsi pada kode di atas sudah otomatis mendeteksi judul dan deskripsi blog anda, jadi anda cukup mengganti tulisan yang berwarna merah saja. 

Setelah menyimpan settingan blog anda silahkan lihat perubahan (menguji meta tag yang sudah di tambahkan) pada home page/url artikel anda dengan tools debug dari facebook silahkan buka link ini: https://developers.facebook.com/tools/debug/og/object/ lalu masukkan url blog kalian di halaman debug lalu klik scrape. Sekian artikel tentang cara memasang meta tag facebook open graph di blogger, semoga bermanfaat dan selamat mencoba.

Subscribe to receive free email updates: