Cara Mudah Memasang Twitter Card di Blogspot dan Wordpress


Twitter card 1

Dengan Twitter Card, berbagi postingan blog ke media sosial Twitter lebih terlihat "cantik" karena tweet dilengkapi foto dan resume. Hampir sama ketika kita share postingan blog ke Facebook. Bedanya jika di facebook kita tinggal share URL maka gambar dan resume postingan akan muncul secara otomatis. Namun pada Twitter tidaklah semudah itu untuk bisa menampilkan gambar dan resume secara otomatis ketika kita share URL.

Untuk dapat melakukan hal itu secara otomatis ketika kita share URL maka kita harus menambahkan beberapa baris kode html kedalam template blog.

Cara memasang Twitter Card pada template blogspot :

  1. Masuk ke Dashboard lalu pilih Template
  2. Cari kode <head> 
  3. Letakkan kode dibawah ini tepat di bawah kode <head>
    <!-- [ Twitter card meta tag Start ] -->
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@mustzain' 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'/>
    </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'/>
    <!-- [ Twitter card meta tag End ] -->
      
  4. Ganti @mustzain dengan account Twitter Anda
  5. Simpan Template

Catatan:


  • Untuk menguji apakah template blog telah terpasang Twitter Card dengan benar, buka Card Validator lalu masukkan URL yang akan di uji. Setelah klik Preview Card, jika proses diatas telah benar dilakukan  maka hasilnya akan terlihat seperti gambar di bawah ini.

Twitter card 2


  • Jika Anda ingin Twitter Card menampilkan gambar dengan ukuran kecil maka ganti summary_large_image pada kode di atas dengan summary. Maka tampilannya akan seperti 

Twitter Card 3

Setelah proses pengujian selesai maka Twitter Card siap untuk digunakan.


Cara memasang Twitter Card pada Wordpress :

  1. Jika Anda telah menggunakan plugin Yoast SEO pada blog Anda berarti Anda beruntung sekali, karena Yoast telah mempunyai "build in" Twitter Card di dalamnya. Namun jika belum sebaiknya instal terlebih dahulu plugin Yoast SEO pada Wordpress Anda sebelum melanjutkan ke langkah berikutnya.
  2. Dari Dashboard Wordpress pilih SEO -> Social -> isikan username Twitter Anda lalu tekan Save Changes. Lihat gambar dibawah ini
    cara setting Twitter Card pada Yoast SEO
  3. Berikutnya klik User -> Your Profile -> isikan username Twitter Andatanpa tanda "@" pada kotak yang telah disediakan lalu tekan Update Profile. Seperti pada gambar berikut,
    cara setting twitter pada profil Wordpress
  4. Selesai

Catatan:

  • Jika ingin memilih gambar kecil atau gambar besar ketika di share ke twitter Anda bisa menggantinya pada SEO -> Social -> Twitter tab. Seperti di tunjukkan gambar berikut ini
Cara menentukan tipe twitter card
  • Untuk menguji apakah semua yang kita lakukan telah benar maka silakan kunjungi Card Validator lalu masukkan URL yang akan di uji.

Semoga bermanfaat :)



Pencinta teknologi, yang hobi memotret dan berselancar di internet. Mencari dan mempelajari hal yang baru adalah suatu yang sangat disukainya dalam mengisi waktu.

Share this

---

Previous
Next Post »

Terimakasih buat rekan-rekan yang telah meluangkan waktu untuk memberi komentar.
Tapi maaf, saya moderasi terlebih dahulu, untuk menghindari spam