Apa itu Open Graph?
Open Graph adalah teknologi yang pertama kali diperkenalkan oleh Facebook pada 2010 yang memungkinkan integrasi antara Facebook dan data penggunanya dan situs web. Dengan mengintegrasikan meta tag open graph ke konten blog atau situs, juga dapat mengidentifikasi elemen halaman mana yang ingin Anda tampilkan ketika seseorang membagikan konten di blog.
Fungsi Open Graph?
Untuk fetch new scrape dan me-render judul artikel, deskripsi artikel, gambar dan informasi lain pada artikel, sehingga pada saat url blog/url artikel blog anda dibagikan/share di facebook maka akan muncul judul, deskripsi, gambar, penulis artikel dan informasi lainnya.
Fungsi dari masing-masing meta tag facebook Open Graph :
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.
2. og:type
<meta property=”og:title” content=”JUDUL ARTIKEL”/>2. og:type
Kode ini digunakan untuk menyimpan informasi jenis artikel yang akan anda share, ada banyak sekali go:type yang bisa anda gunakan.
<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.
<meta property=”og:description” content=”DESKRIPSI BLOG“/>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.
<meta property=”og:url” content=”URL GAMBAR”/>5. og:url
Tag open graph ini bisa anda gunakan untuk menyimpan informasi url dari artikel blog yang akan di share ke facebook.
<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.
<meta property=”og:site_name” content=”WENXPLOIT”/>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.
<meta property=”fb:admins” content=”ID PROFILE FACEBOOK”/>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='https://facebook.com/100000088526217' 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 content='2652703391416046' property='fb:app_id'/>Pemasangan Meta Tag
1. Di dashboard blogger, klik Tema >> Edit HTML
2. Copy kode di bawah, lalu paste di bawah <head>
<b:if cond='data:blog.pageType == "item"'>
<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='2652703391416046' property='fb:app_id'/>
<meta content='100000088526217' property='fb:admins'/>
<meta content='http://facebook.com/100000088526217' 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/AVvXsEjAKaetWfbGNeJTYC-MIy2SHTCBubEiiAwKZZte81V1MFGCYKPJZymEp-kmCEQkYRMkPCjeHI9rDhiFjjim97ihSSPrwNHB-ByHM-ZcWZ3mvv6WGHrX_d4Pq0JUN7iSVurBKi_s5mgU2D8/' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>3. Klik Simpan Tema
Untuk mengecek hasilnya kunjungi https://developers.facebook.com/tools/debug/
Hasilnya kurang lebih seperti ini
