Cara Memasang Twitter Card Di Blog atau Website


Twitter Card


Hai, Sahabat. . Hari ini, saya akan membahas tentang Apa itu, Jenis-Jenis, dan Cara Memasang Twitter Card Di Blog atau Website.




Daftar isi
  1. Apa itu Twitter Card?
  2. Jenis-Jenis Twitter Card
  3. Cara Memasang Twitter Card di Blog atau Website
  4. 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:


  1. Summary Card
  2. 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.



  3. Summary Card with Large Image
  4. 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.


  1. Login ke Blogger
  2. Pertama, Cara memasang twitter card di blog atau website adalah login ke Blogger dengan menggunakan akun Google kamu.



  3. Edit HTML
  4. Kedua, Cara memasang Twitter Card di blog atau website, adalah Pilih menu "Tema" yang ada di sisi kiri. Kemudian klik Edit HTML.



  5. Letakkan kode Twitter Card
  6. 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 == &quot;item&quot;'>
      <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'/>



    • 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.

  7. Klik "Simpan".



Cara Menguji Coba Twitter Card Yang Telah Terpasang


Untuk menguji coba apakah Twitter Card telah terpasang dengan benar, lakukan langkah-langkah di bawah ini:


  1. Login ke akun Twitter kamu, lalu buka link berikut: "https://cards-dev.twitter.com/validator"
  2. Masukkan salah satu Url Postingan kamu
  3. 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'/>


Menjadi


<meta content='summary_large_image' 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:

Semoga bermanfaat. .



LihatTutupKomentar

Terkini