Ok kita merujuk ke laman resmi Introduction Twitter Cards.
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.
Nah singkatnya kode tag meta twitter card ini berfungsi menyematkan judul, deskripsi dan gambar mini sesuai keinginan kita ketika di share oleh pengunjung atau pembaca artikel di blog.
Misalkan ane mengunjungi sebuah situs web blog, situs atau website.
Artikelnya menarik dan ane share ke twitter pribadi ane, hasilnya? Penampilan tata letak judul, deskripsi serta gambarnya telah disesuaikan secara otomatis. Kok bisa otomatis? karena kita sendiri yang mengaturnya.
Nah sudah ketemu kan intinya?
Nah sudah ketemu kan intinya?
Intinya memasang twitter card code ini - secara tidak langsung memaksa sistem Twitter untuk mengubah, mengedit dan menampilkan share artikel berdasarkan kemauan kita sebagai pemilik blog.
1. Buka Blogger > Edit HTML
2. Cari kode </head> dengan cara CTRL + F
3. Copy kode dibawah ini:
4. Paste diatas kode </head> tadi
Cara Pasang Kode Tag Meta Twitter Card Blogger Blogspot
1. Buka Blogger > Edit HTML
2. Cari kode </head> dengan cara CTRL + F
3. Copy kode dibawah ini:
<b:if cond='data:blog.pageType == "item"'>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name="twitter:title" expr:content='data:blog.pageName'/>
<b:if cond='data:blog.metaDescription'>
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<b:else/>
<meta expr:content='"Hey! Yuk baca artikel terbaru kita yang menceritakan tentang " + data:blog.pageName + " ini langsung di situs resminya disini " + data:blog.title + ""' name="twitter:description"/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name="twitter:image:src"/>
<b:else/>
<meta name="twitter:image:src" content='link gambar default' />
</b:if>
</b:if>
<meta name='twitter:card' content='xxxxxxxxxxxxx'/>
<meta name='twitter:creator' content='@username' />
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name="twitter:title" expr:content='data:blog.pageName'/>
<b:if cond='data:blog.metaDescription'>
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<b:else/>
<meta expr:content='"Hey! Yuk baca artikel terbaru kita yang menceritakan tentang " + data:blog.pageName + " ini langsung di situs resminya disini " + data:blog.title + ""' name="twitter:description"/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name="twitter:image:src"/>
<b:else/>
<meta name="twitter:image:src" content='link gambar default' />
</b:if>
</b:if>
<meta name='twitter:card' content='xxxxxxxxxxxxx'/>
<meta name='twitter:creator' content='@username' />
4. Paste diatas kode </head> tadi
5. Ok selesai.
PERHATIAN
Nggak sampai disitu saja karena agan harus tahu juga apa2 saja fungsi dari kode2 diatas. Jangan asal nyeplak toh nanti takutnya tampilan share content gak sesuai sama keinginan.
Pada kode dibawah ini (sudah terpasang di kode atas) bisa agan sesuaikan apakah bentuknya summary, summary large image dan photo (penggunaan keterangannya baca dibawah).
Kalau kodenya hanya "summary" itu artinya disertakannya thumbnail saja.
PERHATIAN
Nggak sampai disitu saja karena agan harus tahu juga apa2 saja fungsi dari kode2 diatas. Jangan asal nyeplak toh nanti takutnya tampilan share content gak sesuai sama keinginan.
Pada kode dibawah ini (sudah terpasang di kode atas) bisa agan sesuaikan apakah bentuknya summary, summary large image dan photo (penggunaan keterangannya baca dibawah).
<'meta name='twitter:card' content='xxxxxxxxxxx'/>
Kalau kodenya hanya "summary" itu artinya disertakannya thumbnail saja.
Jika menggunakan kode "summary_large_image" artinya hasil share gambar thumbnailnya agak besar dan disertai deskripsi singkat artikel; sedangkan untuk kode "photo" itu artinya hanya gambar awal di artikel yang muncul.
Ane sudah menguji dan mencobanya satu per satu; dan menurut ane yang paling bagus dan greget adalah kode "summary_large_image" tag meta twitter card.
Untuk mengujinya sendiri agan bisa berkunjung ke laman ini, Card Validator Twitter Developers.
Ada juga kode berwarna seperti ini yang berfungsi untuk menyimpan informasi link URL domain artikel blog kita yang di share oleh pembaca.
Selanjutnya agan bisa mengubah "link gambar default" yang telah ditandai untuk memasang gambar default apabila di dalam posting blog tersebut tidak ada gambar. Jadi gambar inilah yang akan mewakili artikel yang dibagikan di twitter tersebut.
Nah pada kode dibawah ini:
Ane sudah menguji dan mencobanya satu per satu; dan menurut ane yang paling bagus dan greget adalah kode "summary_large_image" tag meta twitter card.
Contoh: Summary Large Image
Ada juga kode berwarna seperti ini yang berfungsi untuk menyimpan informasi link URL domain artikel blog kita yang di share oleh pembaca.
Selanjutnya agan bisa mengubah "link gambar default" yang telah ditandai untuk memasang gambar default apabila di dalam posting blog tersebut tidak ada gambar. Jadi gambar inilah yang akan mewakili artikel yang dibagikan di twitter tersebut.
Nah pada kode dibawah ini:
<meta expr:content='"Hey! Yuk baca artikel terbaru kita yang menceritakan tentang " + data:blog.pageName + " ini langsung di situs resminya disini " + data:blog.title + ""' name="twitter:description"/>
Itu artinya deskripsi default; maksudnya apabila konten blog tsb tidak punya deskripsi, deskripsi inilah yang akan mewakili itu semua (yang muncul di hasil share artikel di twitter).
Jadi itulah tutoria cara membuat, pasang dan menemukan kode tag meta twitter card untuk blogger blogspot. Semoga berguna gan.*
Source:
https://cards-dev.twitter.com/validator
https://dev.twitter.com/cards/overview
https://dev.twitter.com/cards/types
Post A Comment:
0 comments so far,add yours
Posting Komentar