OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik
By Romeltea | Published: August 10, 2017
OPEN Graph (OG) Meta Tags Twitter dipasang di template blog kita, jika saat share posting (artikel) blog ke Twitter yang tampil cuma judul dan link-nya doang.
Share Posting Blog di Twitter yang "normal" terdiri dari Judul, Gambar Thumbnail, Deskripsi, dan Link.
Berikut ini contoh posting blog yang di-share ke Twitter yang menampilkan gambar kecil:
Nah, jika tampilan postingan blog Anda di Facebook hanya berupa judul dan link doang, tanpa gambar dan deskripsi seperti yang saya punya di atas, berikut ini kodenya.
OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik
1. Di dashboard blogger Anda, klik Tema/Theme > Edit HTML2. Copas kode berikut ini di bawah kode <head> atau di atas kode ]]><b:skin>
<meta expr:content='data:blog.title' name="twitter:site"/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name="twitter:title"/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name="twitter:description"/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name="twitter:image:src"/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETUPJiQGQOTD7p2sFbCuWvGSCYx_JF_taUHJxjX57_f-4uK6N7YBF0oqNi3UrnVGOO1wo-RYEouwxWdY1m6Q14uQ4NkiRIzsIRI9Er_Gm8VHnwk74By9BTAxU-9YkfWPNOwRwcCrEnjJ7/s1600/no-image.jpg' name="twitter:image:src"/>
</b:if>
</b:if>
<meta content='summary' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/><meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
Catatan:
- Ganti @username dengan username akun Twitter Anda, misalnya @romeltea
- Jika ingin menampilkan gambar besar, ganti summary dengan summay_large_image menjadi <meta content='summary_large_image' name='twitter:card'/>
- Link gambar no-image yang warna merah bisa diganti dengan gambar lain, misalnya logo blog Anda, namun ukuran gambarnya minimal 600x400 pixel
3. Save!
Silakan tes tampilannya di Validator Twitter Open Graph. Jika sukses, hasilnya seperti ini.
Itu dia cara memasang Open Graph Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik. Wasalam. (www.romelteamedia.com).*
OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik https://t.co/DlMwddkOsC— Romel Tea (@romeltea) August 10, 2017
Sumber1 | Sumber2
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me:
facebook
twitter
instagram
linkedin
youtube
Gan, saya sudah nyoba tutorial di atas, tapi kok gak bisa ya? Waktu saya cek, hasilnya gini: "Unable to render Card preview"
ReplyDeleteKira-kira apa yang salah di blog saya ya?
Nuhun.
Coba cek di forum ini:
Deletehttps://twittercommunity.com/t/card-validator-unable-to-render-card-preview/16283/9
Pak, ijin bertanya, agar gambar pada postingan terlihat seperti berbingkai atau ada watermark pada saat di share ke twitter seperti postingan twit detik, kompas, kumparan dan lainnya. Cara setingannya seperti apa ya Pak.. Mohon banduannya. Terima kasih
ReplyDeleteKak saya sudah coba tapi gagal gimana ya
ReplyDelete