Update: Add Open Graph Tags To Blogger

The Open Graph meta tags are the social media meta tags for Facebook, Google Plus, and Twitter. Artinya, meta tag open graph ini gunanya untuk mengatur tampilan postingan ketika di share ke media social, menyerupai Facebook, Google+ dan Twitter.

Kalau tidak dipasang open graphnya, maka tampilan postingan ketika di share ke media social tersebut akan terlihat berantakan. Seperti gambar letaknya jadi disamping, kadang gambar tidak muncul, dan lain sebagainya.

Berikut cara memasang opengraph di Blogger semoga gambar postingan selalu muncul.

Silahkan masuk ke dashboard blog, klik Theme > Edit HTML

Letakkan instruksi berikut di atas instruksi <b:template-skin> atau di atas instruksi <style type="text/css">

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<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></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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'/>
<meta content='530' property='og:image:width'/>
<meta content='280' property='og:image:height'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<meta content='530' property='og:image:width'/>
<meta content='280' property='og:image:height'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYhgLqeFB3hkD-aPSj6p8688HX47xv0YlaU-kfGo0fWBUWruZJMkQJ_Z_AxeZm4qJOXTuMty91OBi44DCE2K8Itr58BD67kFXvgxkN68bH04mRzXqjKqR-pM8J7Skavd0tLkM1f81PM94/s1600/opengraph-facebook.png' property='og:image'/>
<meta content='530' property='og:image:width'/>
<meta content='280' property='og:image:height'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='https://www.facebook.com/username' property='article:author'/>
<meta content='https://www.facebook.com/username' property='article:publisher'/>
</b:if>
<meta content='[ Facebook App ID ]' property='fb:app_id'/>
<meta content='[ Admin Profile Facebook ID ]' property='fb:admins'/>
<meta content='[ Admin Profile Facebook ID ]' property='fb:profile_id'/>
<meta content='[ Facebook Fanpage ID ]' property='fb:pages'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='id' name='geo.country'/>
<meta content='general' name='rating'/>
<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='@bungfrangki' name='twitter:creator'/>

Sebelum menyimpan Template, pastikan Anda mengkonfigurasi beberapa instruksi di bawah ini, sesuaikan dengan blog Anda:

Post image
Dianjurkan memakai gambar postingan dengan perbandingan yang sama dengan 1200px x 630px.

Ganti image URL pada instruksi berikut dengan banner Facebook atau thumbnail homepage blog Anda.

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYhgLqeFB3hkD-aPSj6p8688HX47xv0YlaU-kfGo0fWBUWruZJMkQJ_Z_AxeZm4qJOXTuMty91OBi44DCE2K8Itr58BD67kFXvgxkN68bH04mRzXqjKqR-pM8J7Skavd0tLkM1f81PM94/s1600/opengraph-facebook.png' property='og:image'/>

Author and publisher link
Username pada instruksi berikut ganti dengan username Profil Facebook atau Fanpage:

<meta content='https://www.facebook.com/username' property='article:author'/>
<meta content='https://www.facebook.com/username' property='article:publisher'/>

ID Property
Ganti sesuai keterangan:

<meta content='[ Facebook App ID ]' property='fb:app_id'/>
<meta content='[ Admin Profile Facebook ID ]' property='fb:admins'/>
<meta content='[ Admin Profile Facebook ID ]' property='fb:profile_id'/>
<meta content='[ Facebook Fanpage ID ]' property='fb:pages'/>

Terkait:
Cara Mengetahui Property fb:profile_id dan fb:pages Untuk Meta Tag Blogger
Cara Membuat Property fb:app_id dan fb:admins untuk Meta Tag

Geo Placename
Atur sesuai negara yang Anda sasaran serta alternative negara yang ingin Anda invasi.

<meta content='id_ID' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='id' name='geo.country'/>

Twitter username
Ganti dengan username Twitter Anda atau blog Anda.