Custom Domain Blogger

OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik

Posted by Romel Tea ● Follow @romeltea ● Like Romeltea Media on Facebook

OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik
Cara Memasang Twitter Card: OG Meta Tags Twitter Agar Sharing Posting Blog di Twitter Tampil plus Gambar dan Deskripsi.

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:

OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik

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 HTML
2. 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 == &quot;item&quot;'>
    <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='http://4.bp.blogspot.com/-ZeYaf2Nu9o0/VFXGPuoitxI/AAAAAAAAeHQ/Cgn0KuW6XzA/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.

OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik

OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik

Itu dia cara memasang Open Graph Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik. Wasalam. (www.romelteamedia.com).*



Sumber1 | Sumber2

Author:

I am a Blogger, Media Practisioner, and Practical Communication Trainer. I share my own knowledges, experiences, and skills about practical communication - writing, speaking, blogging - and my hobbies and concerns. Visit my official website Romeltea.

Newest

Related Posts

0 Komentar untuk "OG Meta Tags Twitter untuk Share Posting Blog di Twitter Tampil Menarik"

You comment, I'll visit back your blog. If you have one. Komentar SPAM dan LINK AKTIF tidak akan muncul.