Memasang twitter card di blog memang dapat dikatakan penting tidak penting, alasannya mengingat fungsinya memang hanya untuk menampilkan gambar yang ada pada postingan itu sendiri ketika postingan tersebut dishare ke twitter.
Kaprikornus bila kita memasang twitter card di blog, maka pada ketika sebuah postingan blog dishare ke twitter, penampakannya kurang lebih akan ibarat gambar di bawah ini
 |
Twitter memang tidak ibarat facebook, yang secara automatis akan menampilkan postingan beserta gambarnya pada ketika sebuah postingan dishare ke facebook.
Jika di twitter, bila kita tidak memasang twitter card di dalam blog, maka postingan yang dishare ke twitter hanya akan muncul linknya saja, ibarat pada gambar di bawah ini...
 |
Terus bagaimana caranya bila ingin menciptakan atau memasang twitter card di blog?
Sebenarnya cara memasang twitter card ini tidaklah sesulit yang dibayangkan. Karena, hanya dengan memasukan kode-kode dibawah ini:
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmX3iUY9HRTB64GIHNNsk48HWjdrBCUJsS1zwelFCJ60K-DpofGVsYYUVfBubUZDG3SAneLA3IleNqDItYUuIeaFN0Ue80rY-nEjY1m0C5U2hflRNn9AdzKcHAy-RDrQ9jhqSSpaJen_j/s1600/cats.png' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if></b:if>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSmX3iUY9HRTB64GIHNNsk48HWjdrBCUJsS1zwelFCJ60K-DpofGVsYYUVfBubUZDG3SAneLA3IleNqDItYUuIeaFN0Ue80rY-nEjY1m0C5U2hflRNn9AdzKcHAy-RDrQ9jhqSSpaJen_j/s1600/cats.png' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if></b:if>
Lalu menempatkannya di bawah instruksi <head> atau di atas tag epilog </head>, maka gansis sudah berhasil memasang twitter card di blogger.
Namun bila gansis masih tetap merasa resah cara memasang twitter card di blogger, silahkan masuk saja ke dashboard, kemudian pilih theme/tema kemudian klik edit html.
Untuk lebih jelasnya, lihat gambar di bawah ini!
 |
Setelah menentukan edit html, tempatkan instruksi yang tadi di bawah <head> lihat gambar di bawah ini
 |
Atau dapat juga ditempatkan di atas/sebelum tag epilog </head>. Perhatikan gambar di bawah ini
 |
Untuk melihat atau mendapat url sebuah gambar, silahkan baca di postingan ini. Gambar ini nantinya akan menjadi gambar utama ketika alamat blog gansis dishare ke twitter.
Ada beberapa jenis twitter card lainnya yang dapat kita pasang di blog, di antaranya adalah:
1. Summary with large image
 |
2. Summary card
 |
3. Player card
 |
4. App card
 |
Namun dari ke 4 twitter card ini, yang sering dipakai ialah twitter card jenis summary with large image, ibarat yang ada di dalam blog ini.
Jika seandainya teman kurang srek dengan hasil tampilan twitter card yang di atas, teman dapat memakai instruksi yang ada di bawah ini
<!-- [ Twitter card meta tag ] -->
<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:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' 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:else/>
<meta expr:content='"Silakan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' 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/AVvXsEgSmX3iUY9HRTB64GIHNNsk48HWjdrBCUJsS1zwelFCJ60K-DpofGVsYYUVfBubUZDG3SAneLA3IleNqDItYUuIeaFN0Ue80rY-nEjY1m0C5U2hflRNn9AdzKcHAy-RDrQ9jhqSSpaJen_j/s1600/cats.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:creator'/>
<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:else/>
<meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' 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:else/>
<meta expr:content='"Silakan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' 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/AVvXsEgSmX3iUY9HRTB64GIHNNsk48HWjdrBCUJsS1zwelFCJ60K-DpofGVsYYUVfBubUZDG3SAneLA3IleNqDItYUuIeaFN0Ue80rY-nEjY1m0C5U2hflRNn9AdzKcHAy-RDrQ9jhqSSpaJen_j/s1600/cats.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:creator'/>
Kemudian letakan di bawah instruksi <head>
Jangan lupa, ganti goresan pena yang berwarna hitam dengan user name teman sendiri, dan yang berwarna merah ganti dengan url gambar yang teman inginkan. Gambar ini nantinya akan menjadi gambar home page pada ketika blog teman dishare ke twitter.
Untuk mengatasi gambar postingan yang dibentuk sebelum twitter card dipasang di dalam blog tidak tampil, sebaiknya validasi terlebih dahulu url nya di sini. (cukup 1 kali saja/postingan)
Caranya, masukan url postingan ke dalam kotak yang sudah disediakan, kemudian klik preview card. Untuk memperjelas, perhatikan gambar di bawah ini
 |
Demikianlah cara menciptakan atau memasang twitter card di blogger, biar postingan sederhana ini ada keuntungannya bagi sobat-sobat semua.
Akhir kata, aku ucapkan terima kasih sudah berkunjung ke cara memasang twitter card di blogger. Sumber https://holidincom.blogspot.com/