advertise-scroll to continue

Bagaimana Cara Menambahkan Twitter Cards Pada Blog WordPress

Tahun lalu Twitter.com mengeluarkan fitur baru mereka yaitu Twitter Cards. Dengan menggunakan Twitter Cards API kita bisa membagikan link dari blog atau website kita ke Twitter dengan tampilan yang lebih baik dan lebih informative dibanding cara yang lama. Mengimplementasikan Twitter Cards pada blog dapat dilakukan dengan mudah dan cepat, dan apply ke twitter untuk approval juga proses nya hanya sebentar. Setelah permintaan kita disetujui, konten dari blog kita yang diposting ke twitter akan terlihat lebih profesional dimana pada tweet tersebut akan terlihat link menuju blog kita, gambar yang ada di postingan blog, dan juga video yang ada di blog kita dapat diputar langsung di twitter. Berikut ini adalah salah satu tampilan dari twitter cards di akun twitter saya @maxmanroe.

twitter-cards

Ada beberapa type twitter cards, yaitu; summary, video, dan foto. Summary twitter card adalah untuk artikel dan konten berbasis text, sedangkan video dan foto twitter card adalah untuk konten berbasis gambar dan video, misalnya video YouTube. Ada beberapa Meta tags yang dapat digunakan untuk semua type card, dan ada juga Meta tags yang digunakan untuk card yang lebih spesifik. Oh ya sebelumnya Anda perlu membaca tentang twitter cards, informasinya bisa dibaca di documentasi ini.

Bagaimana cara menambahkan Twitter Cards di blog WP?

Ada beberapa cara yang dapat dilakukan untuk memasanga twtitter cards, apalagi bila Anda menggunakan platform WordPress, pasti akan sangat mudah.

1. Dengan bantuan plugin

Beruntunglah Anda yang menggunakan WordPress untuk website Anda karena cara yang paling mudah memasang twitter cards di website adalah dengan bantuan plugin WordPress. Ada beberapa plugins yang bisa membantu kita untuk memasang twitter cards tanpa harus pusing dengan kode-kode di dalam blog. Untuk blog maxmanroe.com menggunakan plugin WordPress SEO by Yoast. Cara settingnya sangat mudah, Anda tinggal masuk ke settingan plugins Yoast: SEO > Social lalu centang pada kotak “add Twitter card meta data”, lalu save.

Selain plugins WordPress SEO by Yoast, ada beberapa plugins lagi yang bisa digunakan. Tapi saya pribadi merekomendasikan plugin WordPress SEO by Yoast dan juga plugin Twitter Cards buatan Niall Kennedy. Pastikan bahwa twitter card Anda bisa berjalan dengan baik dengan melakukan testing terlebih dahulu, kita bisa gunakan tools dari twitter untuk preview tampilan twitter cards situs kita. Coba testing tampilannya dengan tool preview twitter cards. Untuk menggunakan tools preview ini kita perlu login ke akun twitter milik kita. Setelah itu masukkan URL salah satu postingan ke dalam kolom, klik preview card, nanti Anda akan melihat tampilan twitter card nya seperti apa.

Ok lanjut, setelah selesai setting twitter cards di dalam dashboard WP kita, selanjutnya adalah meminta approval dari twitter. Twitter harus menyetujui domain kita terlebih dahulu agar twitter cards berjalan dengan baik untuk situs kita. Langkah ini dilakukan pihak twitter sebagai salah satu upaya untuk mensortir situs-situs porno dan juga situs-situs yang melakukan kegiatan ilegal. Kita harus mengisi beberapa data pada kolom isian yang disediakan oleh pihak twitter, lihat halaman untuk apply approval twitter cards.

2. Dengan cara mengedit code di header.php

Untuk cara ini Anda perlu meng-copy isi folder header.php blog Anda untuk menjaga kemungkinan terjadinya kesalahan ketika memasukkan kode ke dalamnya. Bukalah header.php blog Anda, copy kode di bawah ini dan paste di tag <head> blog Anda – sebelum tag </head>. Jangan memasang kode tersebut di tempat lain, itu akan membuat terjadinya error pada blog. Berikut ini adalah contoh kodenya:

code

Sumber kode: Ryan Cullen @artesea

PERHATIAN: Jika Anda tidak mengerti tentang Php atau kode-kode dalam blog Anda, sebaiknya gunakan saja cara yang pertama, yaitu menggunakan plugin.

Apakah langkah di atas sudah selesai? Oh belum. Langkah terakhir adalah memastikan bahwa robot.txt website Anda tidak memblokir spider twitter. Jika pada saat testing twitter cards ternyata tidak menunjukkan tampilan seperti twitter cards di atas maka kemungkinan besar spider twitter diblokir oleh robot.txt Anda. Untuk itu anda perlu mengeditnya dan menambahkan kode di bawah:

User-agent: Twitterbot

Disallow:

Jika Anda melakukan langkah-langkah di atas dengan benar, pasti twitter cards blog Anda akan berjalan dengan baik dan tampilannya akan lebih profesional di twitter. Saya ulang lagi langkah-langkahnya:

  1. Tentukan Anda mau menggunakan plugin atau dengan coding. Lakukan settingan di dalam blog Anda seperti yg dijelaskan di atas.
  2. Lakukan testing dengan menggunakan Tool Preview twitter.
  3. Isi formulir ini untuk apply ke twitter.

Setelah semua itu selesai dilakukan, Anda tinggal tunggu hasilnya. Jika Anda ada pertanyaan, masukan, dan ide lain, silahkan kirimkan melalui komentar. Jika menurut Anda artikel ini berguna, saya sangat berterimakasih bila Anda membagikannya kepada orang lain melalui twitter atau facebook. Jangan lupa follow twitter saya @maxmanroe, kirimkan mention agar saya tau dan pasti akan saya follow back.

Hasilnya adalah seperti ini:

Terimakasih sudah membaca artikel saya :)

Maxmanroe

A Blogger, YouTuber, and Trader. Start getting to know Online Business since 2012 and continue to learn about internet business until now. Currently active as a content writer at Maxmanroe.com.

31 thoughts on “Bagaimana Cara Menambahkan Twitter Cards Pada Blog WordPress”

  1. Mudah banget ya dengan bantuan plugin Yoast, simple.. makasih mas tutorialnya

    Reply
  2. cara memasukan cuitan twitter ke dalam postingan di wordpress gimana ya? Seperti di akhir artikel di atas, ada contoh tweetnya yang di dalam box itu.

    Terima kasih.

    Reply
  3. Mantaps mas,,, terimakasih. ane lagi mau pasang twitter nih d blog wordpress ane,,
    sekali lagi terimakasih

    Reply
  4. Jadi tanpa harus menggunakan plugin seperti ini ya mas, terima kasih. Ijin praktik mas.

    Reply
  5. Saya sudah mencoba tutorial Anda. Tinggal menunggu approval dari FB. cuma tadi saya bingung ketika masukkan antonprasetyo.com untuk urlnya tapi tidak bisa tapi ketika masukkan antonprasetyo.com/rahasia-sukses-orang-jepang/ bisa diindeks. Pertanyaan saya apakah setiap ada artikel baru harus kita daftarkan kembali dengan langkah langkah diatas. Mohon pencerahannya. Trimakasih

    Reply
  6. ada plugin selain wp seo kah gan yg support untuk twitter card?makasih ya atas artikelnya….nambah ilmu

    Reply
  7. Mantep mas, jadi pingin tweet nya di pampang biar banyak yang retweet ato fav.

    Reply
  8. gan setelah instal ini plugin Twitter Cards buatan Niall Kennedy kq gk ada ya.. setting’a dmn y? thx :)

    Reply
  9. mas kalo saya menggunakan twitter card untuk website code yh sama seperti yg di atas atau tidak….

    mohon pencerahnya mas

    terima kasih

    Reply
  10. Saya baru tau ni mas soal ini :D
    Kapan2 nyobain ah, kayaknya keren juga.
    Thanks infonya mas :)

    Reply
  11. Kelihatannya Blog kita bakalan keren klw pake twitter cards di Blog WordPress,,,mw coba, tapi sayang nya saya pakai Blogger Appara!

    Reply
    • Coba deh liat di dashboard WP nya, apakah ada link plugins, kalo ada link plugins berarti bisa install plugins. Saya pake wordpress.org dengan hosting sendiri, kalau domain TLD dengan hosting di wordpress saya kurang tau Nella. Tapi seperti nya bisa instal plugins deh di hosting WP kamu :-)

      Reply
  12. Makin mudah saja ini wordpress menyediakan twitter cards,sayangnya saya mau coba,tapi mau gimana saya pakai blogger :)

    Reply
    • Blogger juga bisa kog mas, temen saya pake blogger bisa masukin twitter cards. Dia pake kode html yg ditambahkan di dalam source code blogger. Coba googling dulu mas, pasti ada tutor nya :)

      Reply

Leave a Comment