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 saat di share ke media social, seperti Facebook, Google+ dan Twitter.

Kalau tidak dipasang open graphnya, maka tampilan postingan saat di share ke media social tersebut akan terlihat berantakan. Seperti gambar letaknya jadi disamping, kadang gambar tidak muncul, dan lain sebagainya.
Update: Add Open Graph Tags to Blogger

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

Silahkan masuk ke dashboard blog, klik Theme > Edit HTML

Letakkan kode berikut di atas kode <b:template-skin> atau di atas kode &lt;style type=&quot;text/css&quot;&gt;

<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></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &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'/>
<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://4.bp.blogspot.com/-LdG142RpkTw/WZdNhjGYgvI/AAAAAAAAQsA/USRZh_fTalIDY4rInADlsyALeBlbe5a9wCLcBGAs/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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 kode di bawah ini, sesuaikan dengan blog Anda:

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

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

<meta content='https://4.bp.blogspot.com/-LdG142RpkTw/WZdNhjGYgvI/AAAAAAAAQsA/USRZh_fTalIDY4rInADlsyALeBlbe5a9wCLcBGAs/s1600/opengraph-facebook.png' property='og:image'/>

Author and publisher link
Username pada kode 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 target 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.

<meta content='@bungfrangki' name='twitter:creator'/>

Jika semuanya sudah dirubah, silahkan simpan template.

Demikian artikel kali ini, semoga bermanfaat.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.