Cara Memasukkan Twitter Card di Blog WordPress

5 307

Ini ada artikel blogger tamu oleh Syaiful Bahri. Jika Anda ingin menjadi blogger tamu di blog ini, silahkan cek ketentuan submit artikel saya.

Tutorial ini menjelaskan bagaimana menggunakan Twitter Card di blog Anda. Jika Anda ingin menerapkannya di blog Anda, pastikan Anda membackup-nya terlebih dahulu. Hasil akhir dari tutorial ini akan terlihat seperti ini:

twitter-card

Kenapa Menggunakan Twitter Card

Apa itu twitter card? (baca juga dokumentasinya). Seperti yang Anda lihat di gambar, dengan menggunakan Twitter Card, tweet yang berisi link blog atau website Anda akan berbeda dengan tweet biasa. Tweet tersebut memiliki tanda [Lihat Ringkasan]. Kemudian jika diklik akan keluar ringkasan artikel beserta gambar di sampingnya.

twitter-card-actions

Sebenarnya fitur ini sudah diumumkan oleh pihak Twitter di bulan Juni 2012. Tapi saya baru mengetahuinya bulan lalu, karena penasaran dengan tweet orang lain yang menggunakannya. Contohnya: Gizmodo, Lifehacker, dll.

Fitur yang dikembangkan oleh tim developer Twitter ini hampir sama dengan Facebook Opengraph. Yang memungkinkan pemilik website menampilkan artikelnya yang dishare atau dilike di Facebook terlihat lebih menarik. Saya juga menggunakannya di blog pribadi saya dan artikel saya yang berisi video, ternyata bisa ditonton dari share artikel tersebut.

Jadi, intinya memakai Twitter Card akan membantu strategi social media Anda. Sejak saya memakainya, traffik blog saya dari Twitter meningkat.

Anda juga bisa menggunakan Twitter Card bersamaan dengan Facebook Opengraph. Tapi sekarang saya akan fokus dengan tujuan artikel ini ditulis. Barangkali lain waktu saya akan membahas Facebook Opengraph.

Bagaimana Memasang Twitter Card?

Sebenarnya ada banyak cara mengimplementasikannya. Prinsipnya Anda harus memasukkan meta data yang diperlukan di tag <head> website Anda dan sebelum tag </head>. Anda tidak bisa memasukkan meta data itu di footer. Tenang saja, itu tidak akan menurunkan kecepatan loading blog Anda.

Jika Anda menggunakan WordPress, maka berbahagialah! Sangat gampang mengimplementasikannya. Meski pun begitu, saya akan membimbing Anda pelan-pelan. Jadi tetap duduk dengan tenang. Sebelumnya mari kita pelajari struktur meta datanya.

<meta name=”twitter:card” content=”summary”> <!– Card type: summary, photo or video player !–>
<meta name=”twitter:site” content=”@pengunjungblog”> <!– Twitter ID Pemilik Blog !–>
<meta name=”twitter:creator” content=”@pengunjungblog”> <!– Twitter ID Penulis !–>

Jika Anda telah menggunakan Facebook Opengraph, maka Anda hanya harus menambah tag tersebut. Dan spider Twitter akan mengambil data lain dari tag Opengraph yang Anda pasang. Terlihat mudah, bukan? Jika Anda tidak memasang Opengraph, maka tag di bawah ini juga harus Anda masukkan.

<meta name=”twitter:url” content=”http://example.com”> <!– URL Kontent !–>
<meta name=”twitter:title” content=”Example Post”> <!– Judul Konten !–>
<meta name=”twitter:description”content=”This is an example post”> <!– Deskripsi singkat konten !–>
<meta name=”twitter:image” content=”http://example.com/image.png”> <!– URL gambar yang ada di konten tersebu !–>
<meta name=”twitter:image:width” content=”400″> <!– Lebar Gambar !–>
<meta name=”twitter:image:height” content=”300″> <!– Tinggi Gambar !–>

Kini Anda sudah tahu struktur meta datanya. Jika Anda sudah familiar dengan hook di WordPress, maka Anda sudah bisa mengira-ngira bagaimana mengimplementasikannya. Seperti yang sudah saya katakan, ada banyak cara memasukkan meta data Twitter Card di WordPress. Mari kita lihat satu per satu.

Cara I: Menggunakan Functions.php

Cara ini gampang diimplementasikan, cukup buka file funcitons.php theme Anda kemudian copy-paste kode berikut. Jika theme yang Anda pakai tidak memiliki file itu, maka buatlah sendiri file php dan beri nama functions.

Jika sudah dibuka maka copy-paste kode ini:

//Add Twitter Cards Meta Data

function pengunjungblog_add_twittercard()  {
if  (is_single() || is_page())  {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb)  {
$twitter_thumb = ‘http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75′;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:url” content=”<?php echo $twitter_url; ?>” />
<meta name=”twitter:title” content=”<?php echo $twitter_title; ?>” />
<meta name=”twitter:description” content=”<?php echo $twitter_desc; ?>” />
<meta name=”twitter:image” content=”<?php echo $twitter_thumb; ?>” />
<meta name=”twitter:site” content=”@pengunjungblog” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}  }
add_action( ‘wp_head’,  ‘pengunjungblog_add_twittercard’ );

Cara II: Mengedit header.php

Meski pun cara ini tidak saya suka, karena di sampaing repot jika theme yang dipakai update hilanglah kerja keras Anda. Tapi saya tampilkan di sini, dengan alasan tutorial/education. Jadi buka file header.php Anda dan masukkan kode ini sebelum tag.

<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = ‘http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75′;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:url” content=”<?php echo $twitter_url; ?>” />
<meta name=”twitter:title” content=”<?php echo $twitter_title; ?>” />
<meta name=”twitter:description” content=”<?php echo $twitter_desc; ?>” />
<meta name=”twitter:image” content=”<?php echo $twitter_thumb; ?>” />
<meta name=”twitter:site” content=”@pengunjungblog” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}
?>

Cara III: Menggunakan Plugin

WordPress memiliki banyak plugin. Jadi gunakan plugin jika Anda tidak ingin repot memasukkan kode di atas. Jika Anda menggunakan plugin WordPress SEO by Yoast, Anda tinggal klik [SEO] > [Social]

wpseo-twitter

Selain plugin WordPress SEO, ada plugin lain yang bisa Anda gunakan. Seperti Plugin Twitter Card yang ditulis oleh Niall Kennedy.

Silakan memilih salah satu cara yang saya tulis di atas. Ingat! Hanya pilih satu cara, jangan dipakai semua. Jika sudah, untuk memastikan, kita bisa testing di alat yang disediakan pihak Twitter.

Bonus Tips:

Perhatikan juga robots.txt blog Anda, jangan memblokir spider twitter dengan robots.txt atau pun meta robots. Jadi jika artikel Anda tidak bisa tampil seperti contoh di atas di alat testing. Maka Anda butuh memasukkan ini di robots.txt blog Anda:

User-agent: Twitterbot
Disallow:

Oke, ada pertanyaan? Silakan berkomentar. Saya akan menjawabnya dengan senang hati. :)

 

Seorang part time blogger dan Konsultan Website Traffic. Anda bisa mengenalnya lebih lanjut dan melihat bagaimana dia membantu klien-nya membangun lalu lintas blog yang tinggi di Pengunjung Blog

5 KOMENTAR

  1. Bagus sekali infonya. Tapi agak mumet nich memahaminya. Oke dech saya akan simpan dulu informasi ini. Terima kasih mas. Eh ya, contoh blog yang memakai Twitter Card yang mana ? Kasih contoh ya mas…

Berikan Komentar