Hai, Sahabat. . Hari ini, saya akan membahas tentang Apa itu, Jenis-Jenis, dan Cara Memasang Twitter Card Di Blog atau Website.
Daftar isi
- Apa itu Twitter Card?
- Jenis-Jenis Twitter Card
- Cara Memasang Twitter Card di Blog atau Website
- Cara Menguji Coba Twitter Card Yang Telah Terpasang
Apa Itu Twitter Card?
Agar kamu apa itu Twitter Card, lihat penjelasan di bawah ini.
Twitter Card adalah sebuah kode perintah Tag Meta HTML khusus yang dapat dipasang di blog atau website kamu. Dengan menggunakan Twitter Card, kamu dapat menambahkan gambar atau Video secara otomatis di dalam tautan kamu yang dapat mengarahkan menuju situs web atau blog kamu.
Jenis-Jenis Twitter Card
Ada beberapa jenis Twitter Card yang perlu kamu ketahui, diantaranya:
- Summary Card
- Summary Card with Large Image
Jika kamu menggunakan jenis Twitter Card ini, maka tautan yang kamu kirim ke akun twitter kamu akan menampilkan judul, deskripsi, dan gambar postingan berukuran kecil.
Jika kamu menggunakan jenis Twitter card ini, yang akan ditampilkan masih sama seperti Summary Card, tetapi ukuran gambar akan lebih besar.
Sebenarnya masih ada jenis lain dari Twitter Card, tetapi saat ini saya hanya akan menjelaskan tentang kedua jenis Twitter Card tersebut karena keduanya paling banyak digunakan.
Cara Memasang Twitter Card Di Blog atau Website
Sekarang, kita simak cara memasang Twitter card untuk blog atau website kamu. Di sini, saya akan memberi tahu cara memasang twitter card di blogger.
- Login ke Blogger
- Edit HTML
- Letakkan kode Twitter Card
- Ganti "USERNAME" dengan username akun twitter kamu.
- Ganti "IMAGE_URL_ALTERNATIVE" dengan url gambar yang kamu inginkan. "Url image alternative" digunakan sebagai alternatif gambar jika postingan kamu tidak memiliki gambar.
- Klik "Simpan".
Pertama, Cara memasang twitter card di blog atau website adalah login ke Blogger dengan menggunakan akun Google kamu.
Kedua, Cara memasang Twitter Card di blog atau website, adalah Pilih menu "Tema" yang ada di sisi kiri. Kemudian klik Edit HTML.
Ketiga, Cara memasang Twitter Card di blog atau website adalah Meletakkan kode Twitter Card berikut di bawah kode <head> atau di atas kode </head>.
- <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'/>
- <b:if cond='data:blog.pageType == "item"'>
- <meta expr:content='data:blog.canonicalUrl' name="twitter:url" />
- <meta expr:content='data:blog.pageName' name='twitter:title'/>
- <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
- <b:else/>
- <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
- <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
- <meta content='IMAGE_URL_ALTERNATIVE' name='twitter:image:src'/>
- </b:if>
- <b:if cond='data:blog.metaDescription'>
- <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
- </b:if>
- <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
Cara Menguji Coba Twitter Card Yang Telah Terpasang
Untuk menguji coba apakah Twitter Card telah terpasang dengan benar, lakukan langkah-langkah di bawah ini:
- Login ke akun Twitter kamu, lalu buka link berikut: "https://cards-dev.twitter.com/validator"
- Masukkan salah satu Url Postingan kamu
- Klik “Preview Card” Lalu lihat hasilnya di Card preview.
Catatan:
Kode script Tag Meta Twitter Card di atas adalah jenis Twitter Card 'Summary". Jika kamu ingin merubahnya menjadi "Summary Large Image", ganti kode:
<meta content='summary' name='twitter:card'/>
Tips
Gunakan "CTRL + F" untuk memudahkan kamu dalam mencari kode. Selain itu, Jika kamu menggunakan smartphone, gunakan aplikasi QuickEdit untuk memudahkan pengeditan HTML.
Demikianlah penjelasan tentang Apa itu, Jenis-Jenis, en Cara Memasang Twitter Card Di Blog atau Website.
Lihat juga:
- Cara Membuat Tombol Back To Top Yang Keren Dan Responsif
- Cara Membuat Dan Memasang Breadcrumb Di Blog
- Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website
Semoga bermanfaat. .
No comments:
Post a Comment
Tulis Komentar Di Sini