Cara Memasang Kode Meta Tag Twitter Card yang Benar

Apa itu Twitter Card? Baca pengertian dan cara pasang Twitter Card di blog disini. Cara memasang snippet meta tag Twitter Card di blog untuk mempercantik tampilan ketika dishare di media sosial.
Cara Memasang Kode Meta Tag Twitter Card di Blog

Kalau kamu pernah membaca artikel saya tentang Facebook Open Graph, maka artikel kali ini pun nggak beda jauh. Masih seputar kode meta tag yang dipakai untuk mempercantik preview blog ketika dibagikan ke media sosial.

Apa Itu Twitter Card?

Pengertian Twitter Card: Twitter Card adalah kode meta tag HTML dengan atribusi khusus yang berfungsi untuk mengambil ringkasan dari website atau blog ketika dibagikan ke Twitter. Data yang diambil antara lain judul, deskripsi, dan gambar (thumbnail). Kode ini bisa dipasang di semua platform. Misalnya Blogger, WordPress, dan lain sebagainya. Kode ini sangat bagus jika dikombinasikan dengan Facebook Open Graph.

Pentingkah Twitter Card?

Penting! Kita sama-sama tahu, media sosial (termasuk Twitter) adalah salah satu penyumbang traffic terbesar. Dengan memasang Twitter Card, tampilan blog kamu akan semakin menarik ketika dibagikan di Twitter. Kalau tampilan sharenya polos doang akan menurunkan minat pengguna media sosial untuk klik blog kita. Nggak percaya? Nih, perhatikan gambar berikut. Ini adalah perbandingan antara blog yang PAKAI dan TIDAK pakai Twitter Card.

Cara Lengkap Memasang Meta Tag Twitter Card di Blogger

Daftar Lengkap Kode Twitter Card

Beda dengan Facebook Open Graph, Twitter Card ini memiliki jenis-jenis yang berbeda. Sebelum kesana, kita kenalan dulu sama beberapa meta tag yang pasti dipakai meskipun jenis cardnya berbeda-beda.
  1. twitter:site
    Author dari web / blog. Diisi dengan @username Twitter kamu.
  2. twitter:title
    Judul artikel.
  3. twitter:description
    Deskripsi atau ringkasan dari artikel.
  4. twitter:image
    Gambar atau thumbnail dari artikel.
  5. twitter:card
    Jenis card yang digunakan. Penjelasan lebih rinci bisa dibaca dibawah.

Jenis-Jenis Twitter Card

Nah, kita masuk ke inti pembahasan. Ini dia jenis-jenis Twitter Card yang bisa kamu pilih. Masing-masing memiliki atribut meta tag yang berbeda. Meskipun berbeda, meta tag yang disebutkan diatas tetap wajib dimasukkan. Dan berikut daftar lengkap jenis-jenis twitter:card.

  1. Summary Card
    Digunakan sebagian besar web / blog yang mengedepankan penyampaian informasi. Seperti web berita, blog pribadi, blog tutorial, dan lain sebagainya. Didesain untuk memberikan preview dari konten artikel, seperti judul, deskripsi, dan gambar (thumbnail). Hampir semua teman-teman Blogger pakai card jenis ini. Ya...berhubung blognya berisi tutorial dan artikel semua.

    A. Kodenya:
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='@igniel' name='twitter:site'/>
    <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/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png' name='twitter:image'/>
    </b:if></b:if>

    B. Penjelasan:
    1. @igniel: ganti dengan @username Twitter kamu.
    2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png: ganti dengan URL dari gambar / icon blog. Jika share artikel (contoh: www.igniel.com/2017/03/cara-verifikasi-twitter.html), thumbnail otomatis didapatkan dari gambar pertama dalam artikel tersebut. Tapi jika share URL homepage (contoh: www.igniel.com), maka thumbnail harus ditentukan sendiri, yaitu URL gambar yang ini.

    Kode Meta Tag Twitter Untuk Blog
    Contoh preview jenis Summary Card

  2. Summary Card with Large Image
    Sama seperti Summary Card diatas, tapi gambar yang ditampilkan lebih besar. Cocok dipakai untuk web / blog wallpaper atau fotografi. Blog berita / pribadi / turorial pun bisa kok. Saya juga pakai yang ini.

    Kodenya:
    <meta content='summary_large_image' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='@igniel' name='twitter:site'/>
    <meta content='@igniel' 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/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png' name='twitter:image'/>
    <meta expr:content='data:blog.title' name='twitter:image:alt'/>
    </b:if></b:if>

    Penjelasan:
    1. @igniel: ganti dengan @username Twitter kamu.
    2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s1600/ignielcom.png: ganti dengan URL dari gambar / icon blog. Jika share artikel (contoh: www.igniel.com/2017/03/cara-verifikasi-twitter.html), thumbnail otomatis didapatkan dari gambar pertama dalam artikel tersebut. Tapi jika share URL homepage (contoh: www.igniel.com), maka thumbnail harus ditentukan sendiri, yaitu URL gambar yang ini.

    Contoh Twitter Card Pada Blog
    Contoh preview jenis Summary Card with Large Image

  3. App Card
    Merepresentasikan detail dari aplikasi mobile (mobile app) atau install driver, lengkap dengan link yang langsung menuju ke lokasi download. Cocok untuk developer game atau software yang senang memajang kayanya lewat web / blog.
    Yang ditampilkan: nama aplikasi / driver, deskripsi, icon, dan atribut seperti rating dan harga.
    Selain itu, kamu perlu menambahkan beberapa atribusi lain agar meta tagnya bisa membaca baik itu Apple Store maupun Google Play. Tapi karena jarangnya web / blog asal Indonesia yang memakai card jenis ini, saya nggak bakal menjelaskan lebih lanjut. Baiknya kamu baca sendiri dokumentasinya DISINI.
    Kode Twitter Card Untuk Blog
    Contoh preview jenis App Card

  4. Player Card
    Cocok untuk dipakai web / blog yang memiliki niche movie atau streaming. Video akan langsung bisa dimainkan tanpa perlu pergi ke web / blog aslinya. Misalnya kamu share link video Youtube, maka videonya bisa langsung dimainkan di Twitter tanpa perlu pergi ke Youtube dulu. Berhubung jenis card yang ini agak complicated dan panjang buat ditulis, silakan baca sendiri dokumentasinya DISINI.
    Cara Memasang Snippet Twitter Card
    Contoh preview jenis Player Card

Cara Memasang Kode Twitter Card di Blogspot

  1. Pilih SALAH SATU jenis card yang sudah dijelaskan diatas. Satu ya, nggak usah dua-duanya. Pilih jenis summary card ATAU summary card with large image.
  2. Pada pengaturan Blogspot, masuk ke menu "Template".
  3. Pilih "Edit HTML"
  4. Cari kode </head>. Gunakan "CTRL + F" untuk memudahkan.
  5. Letakan kode dari jenis card yang sudah dipilih "di atas / sebelum" </head>
  6. Terakhir, pilih "Save theme".

Cara Validasi: Cek Apakah Twitter Card Sudah Benar Atau Belum

Kamu pun bisa cek apakah kode yang dipasang tadi bener atau nggak. Caranya:
  1. Masuk ke halaman Card Validator.
  2. Masukkan URL yang ingin dicek. Jika kodenya benar, maka preview akan muncul.
    Memasang Meta Twitter Card Markup Di Blogger

Itulah tutorial tentang cara memasang meta tag Twitter Card di blog. Jangan lupa bagikan agar bisa bermanfaat bagi teman-teman Blogger yang lain. Good luck ya.

https://dev.twitter.com/cards/overview
https://dev.twitter.com/cards/types/summary
https://dev.twitter.com/cards/types/summary-large-image
https://dev.twitter.com/cards/types/app
https://dev.twitter.com/cards/types/player
24
Cara Memasang Kode Meta Tag Twitter Card yang Benar
Cara Memasang Kode Meta Tag Twitter Card yang Benar
Apa itu Twitter Card? Baca pengertian dan cara pasang Twitter Card di blog disini. Cara memasang snippet meta tag Twitter Card di blog untuk mempercantik tampilan ketika dishare di media sosial.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

24 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Muhamad Sahrudin
    13 Maret, 2023
    Profil: https://www.blogger.com/profile/17474781374411105225
    Kak untuk menampilkan mention di tweet otomatis tanpa bantuan twitter widget.js eksternal bagaimana?

    <a aria-label='Twitter' class='c tw' data-text='Tweet' data-via='inputekno' expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='noopener' role='button' target='_blank'><b:include name='twitter-r-icon'/></a>

    Tapi hasilnya hanya menampilkan link + judul artikel
  • Admin
    02 Agustus, 2022
    Profil: https://www.blogger.com/profile/02702532805371669144
    Sekarang apa sudah ga work ya di twitter soalnya saya pake plugin yoast juga ga bisa
  • Kemasyarakatan
    06 Juni, 2021
    Profil: https://www.blogger.com/profile/05102924003903491383
    tadi saya udah berhasil, cuman foto dari linknya masih keciil. mau nanya kak, agar gambar dari link blog kita tersebut nampak lebih besar mendominasi seperti apa caranya kak ?
  • Takiman
    25 November, 2020
    Profil: https://www.blogger.com/profile/07103022411418617182
    Terimakasih atas informasinya, saya banyak belajar disini mengenai blog. Semoga sehat selalu dan rezekinya lancar.
  • Admin
    14 Desember, 2019
    Profil: https://www.blogger.com/profile/07104127152592045072
    Mbak, ijin tanya.. Kalau gambar pada postingan agar bisa seperti detik, kumpara dan kompas, pada saat kita lihat di twitter gambar pada postingan ada bingkai atau watermarknya, namun pada saat kita klik buka postingan tersebut tidak ada pada gambar aslinya, hanya ada pada tampilan di twitter, itu gimana cara setingnya ya mbak??
  • Arjun Lap
    28 Oktober, 2019
    Profil: https://www.blogger.com/profile/18040695121857603984
    Sukses langsung Done terimakasih mbak
  • Ilul
    12 Oktober, 2019
    Profil: https://www.blogger.com/profile/05357479128996148404
    mau tanya kak. saya sudah nyoba panduan ini, dan berhasil dengan baik. cuma ada sedikit masalah. sebelum saya pasang script twitter-card, blog saya berstatus "connection is secure". tapi setelah saya pasang script ini berubah menjadi "not secure". terpaksa saya lepas lagi script-nya. itu kira-kira masalahnya di mana ya? mohon dijawab ya kak. terima kasih.
  • La Sidin
    18 Juni, 2019
    Profil: https://www.blogger.com/profile/13465444834119799778
    Kak gimana caranya supaya Nama blog nggak usah muncul di Judul artikel? Cukup nama artikel saja dan alamat blog.
    • Igniel
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus bagian ini:
      <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
      Ganti menjadi ini:
      <b:if cond='data:view.isMultipleItems'>
      <meta expr:content='data:blog.title' property='twitter:title'/>
      </b:if>
      <b:if cond='data:view.isPost or data:view.isPage'>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
      </b:if>
    • La Sidin
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      Thanks kak. Sudah work.
  • La Sidin
    11 Juni, 2019
    Profil: https://www.blogger.com/profile/13465444834119799778
    Terimakasih untuk tutorialnya. Saya sudah coba dan hasilnya sangat bagus :)
  • Tomy Saputra
    31 Desember, 2018
    Profil: https://www.blogger.com/profile/03504394946082741746
    Mantap om, baru sadar kalau bisa di Seting seperti ini😀
    • La Sidin
      11 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      mbak ignie itu cewek mas :')
  • Celoteh Dini Hari
    29 November, 2018
    Profil: https://www.blogger.com/profile/09419194597923123305
    alhamdulillah mbak berhasil.... makasih menolong sekali.. huhu, tadi hampir putus asa
    www.celotehdinihari.com
  • Redaksi Naviri
    14 Oktober, 2017
    Profil: https://www.blogger.com/profile/07455246104110821006
    Kak, saya sudah mencoba tutorial ini, tapi hasilnya kok gak bisa terus ya? Waktu saya cek di validasi, hasilnya gini, "Unable to render Card preview".

    Terus di bawahnya ada keterangan warna merah, bunyinya gini, "ERROR: Fetching the page failed because the fetcher cannot resolve the address."

    Itu masalahnya di mana ya? Mohon pencerahannaya. Nuhun.
  • Muaz Ramdany
    28 Juli, 2017
    Profil: https://www.blogger.com/profile/05454240474214408640
    Mantap bosku :)
  • Imaniar
    16 Juli, 2017
    Profil: https://www.blogger.com/profile/10749218855819385126
    Oke banget nih, tipsnya!
  • Rizal Hadizan
    15 Juli, 2017
    Profil: https://www.blogger.com/profile/13684098219680105276
    'https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png'
    Nyari kode diatas diblog sendiri gimana ya, saya searching google ga ada tutornya
    • Igniel
      15 Juli, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu URL banner blog ini. Gantinya pake URL banner kamu sendiri.
    • Dudo Saputra
      05 Mei, 2018
      Profil: https://www.blogger.com/profile/12647165990488262564
      view image info di halaman utama blog pencet gambar terus klik kanan
  • Kholidin Alian
    13 Juli, 2017
    Profil: https://www.blogger.com/profile/06954325971617379813
    stelah saya cek di Card Validator, sudah benar. gak error. tp sy coba share tetep eblum muncul. mohon solusinya
    • Igniel
      13 Juli, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba tunggu sehari biar Twitter membaca struktur blognya dulu. Nanti coba lagi.
  • zoetami
    12 Juli, 2017
    Profil: https://www.blogger.com/profile/13339341516839172495
    Thx kak. Nanti dicoba di zoetami.com