Objek Open Graph Pelengkap Meta Tag Bawaan Blogger

bungfrangki Tutorial Blog Objek Open Graph Pelengkap Meta Tag Bawaan Blogger

Sebetulnya ada banyak object properties open graph meta tag yang dapat digunakan di dalam blog atau website. Anda bisa cek langsung disini:
https://developers.facebook.com/docs/sharing/opengraph/object-properties atau lebih jelasnya untuk langkah-langkah penerapan Anda bisa lihat disini: http://ogp.me/

Tetapi dianjurkan untuk tidak memakai semua elemen open graph tersebut untuk menjadi meta tag di blog. Setiap blog punya tujuan masing-masing, jika blog ditujukan untuk posting artikel-artikel atau berita, maka penerapan objek open graph pun seringkali akan menggunakan object properties open graph yang standar.

Berupa: og:description, og:title, og:url, og:type, og:image dan lain sebagainya. Namun, tahukan Anda bahwa jika di template Anda menggunakan data blog all head content seperti berikut ini:

<b:include data='blog' name='all-head-content'/>

Maka akan ada beberapa objek open graph penting yang tidak perlu Anda pasang lagi, karena sudah disematkan oleh pihak Blogger pada kode tersebut.

Adapun objek properties open graph yang tidak perlu dipasang lagi jika menggunakan <b:include data='blog' name='all-head-content'/> adalah:

og:url

og:title

og:description

og:image

(pada halaman postingan)

Untuk melengkapi dari open graph meta tag bawaan Blogger tersebut, maka beberapa baris object properties open graph berikut ini dapat Anda pasang di blog agar tidak terjadi error pada tools Debugger.

Adapun object properties open graph berikut telah saya terapkan pada Gampang Blogger Template.

<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='https://www.facebook.com/YOUR_FB_OR_FANPAGE_USERNAME' property='article:author'/>
<meta content='https://www.facebook.com/YOUR_FB_OR_FANPAGE_USERNAME' property='article:publisher'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta content='YOUR_FB_APP_ID' property='fb:app_id'/>
<meta content='YOUR_FB_ADMINS_ID' property='fb:admins'/>
<meta content='YOUR_FB_PROFILE_ID' property='fb:profile_id'/>
<meta content='YOUR_FANPAGE_ID' property='fb:pages'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='en_GB' property='og:locale:alternate'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDB74qCpEjOwd8VUJ2-mrUp4LvUVYHgh3lCQ165y38d6HBVTQ6lh8rvhyUPLSjLY61k4L3vSz0Q7jc-qar8BMHZKH8FIx8stNjLVFEhkHKj20OMqR5qu1TQ2nj0d3SSLIDCUfkjTWac8/s1600/themeindiefb2.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:image:alt'/>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@YOUR_USER_NAME' name='twitter:creator'/>

Catatan:
Yang dimaksud dengan lengkap disini ialah tidak berarti open graph yang tersedia dipasang semuanya, hanya yang penting-penting saja guna menanggulangi error atau missing object properties open graph pada tools debugger.

Setelah itu, silahkan periksa kembali perubahan open graph meta tag Anda pada https://developers.facebook.com/tools/debug/og/object/ dengan mengklik “Ambil informasi pengurangan baru”.

Artikel ini masih terkati dengan artikel sebelumnya tentang Cara Membuat Property fb:app_id dan fb:admins untuk Meta Tag.

Semoga bermanfaat.

Label

Tutorial Blog