Twitter Card / Meta Tag Twitter
Adalah kode meta tag yang ditambahkan kedalam template website / blog yang berfungsi untuk menyesuaikan tampilan halaman apabila di posting ke Twitter.
Contoh, saya memposting link https://kamuscss.blogspot.com/ ke Twitter, maka tampilannya akan menjadi seperti ini :
 |
| Tampilan website dengan Twitter Card - Preview Twitter Card |
- Gambar tersebut menunjukkan tampilan salah satu blog yang saya modifikasi sedemikian rupa hingga tampil menjadi seperti website alias blog rasa website.
- Untuk memasang Twitter Card hampir sama dengan memasang meta tag lainnya.
- Bahkan meta Twitter lebih sederhana karena tidak terlalu banyak meta yang dibutuhkan agar website tampil sempurna saat di Tweet
Persyaratannya pertama harus memasang kode awal seperti ini :
Kode ini untuk tampilan dengan gambar kotak standar.
Untuk bisa menampilkan gambar ukuran besar seperti gambar contoh, gunakan kode ini :
Tempatkan meta tersebut diarea head.
Selanjutnya letakkan kode pelengkapnya yaitu :
- Tempatkan username akun Twitter khusus blog atau situs jika ada atau samakan dengan username creator
<meta name='twitter:site' content='@username-blog'> - Tempatkan username Twitter admin
<meta name='twitter:creator' content='@username-admin'> - Masukkan judul blog
<meta name='twitter:title' content='Judul Blog'> - Masukkan deskripsi blog
<meta name='twitter:description' content='Deskripsi Blog'> - Masukkan url gambar
<meta name='twitter:image' content='http://url-gambar.png/jpg'> - isi dengan judul / tema gambar
<meta name='twitter:image:alt' content='Judul image'> - Peletakan meta Twitter seperti mengikuti name nya :
site - Berarti untuk mengambil judul blog, bisa diletakkan dibawah kode awalnya.
title - Berarti untuk mengambil judul postingan, letakkan bersama meta yang memuat kode expr:content='data:post.title' masukkan kode yang sama atau copy paste saja kode tersebut. description
- diarea deskripsi blog atau letakkan dalam HTML postingan untuk menyesuaikan deskripsi postingan.
image
Letakkan bersama meta lain dengan kode content="data:post.firstImageUrl" untuk mengambil gambar pertama postingan. Atau letakkan dalam postingan secara terpisah jika postingannya tidak memuat gambar atau gambarnya tidak sesuai dengan cara mengisi content='...' dengan url gambar yang diinginkan.
Untuk memastikan hasil pemasangan Twitter Card, langsung saja uji di Card Validator