Oktober 27, 2017

WordPress : Menambah Twitter Cards Meta Tags Tanpa Plugin

Tulisan ini adalah tentang cara bagaimana menambah Twitter Cards Meta Tags WordPress tanpa plugin, agar tulisan terlihat lebih menonjol di linimasa Twitter. Kebutuhan untuk menggunakannya muncul setelah saya mencopot plugin sosial media, yang di dalamnya sudah menambahkan Facebook Open Graph Meta Tags dan Twitter Cards Meta Tags, untuk kembali lagi menggunakan tautan sosial media polos tanpa Java script.

Dengan memasang Twitter Cards Meta Tags di blog maka twit tulisan yang dibagikan di linimasa Twitter akan secara otomatis menampilkan featured image atau default image, menyertai judul dan deskripsi singkat tulisan.

Jika mau mudah memang tinggal memasang plugin dengan tampilan lebih memikat, serta bisa pamer jumlah like dan twit. Namun tampilan dan kebisaan pamer itu tak diperoleh gratis, karena selalu ada kemungkinan plugin bermasalah yang membuang waktu dan memakan pikiran, dan ada beban pada server meski Java script-nya dieksekusi secara asynchronous sekalipun.

Membutuhkan waktu sebentar untuk menemukan cara menambah Twitter Cards Meta Tags WordPress tanpa plugin, namun butuh waktu lama untuk membuatnya bekerja karena gagalnya script oleh sebab berada di luar loop di theme Twenty Fifteen yang saya gunakan. Ada solusi dengan menambah script tambahan, namun tetap tak memuaskan.

Cara Menambah Twitter Cards Meta Tags WordPress Tanpa Plugin ini saya tulis utamanya adalah referensi pribadi sebagai script aktif yang saya gunakan jika sewaktu-waktu nanti diperlukan, dan mudah-mudahan bisa bermanfaat pula bagi yang memerlukannya.

Langkah berikut adalah untuk menambah Twitter Cards Meta Tags di WordPress:
  1. Login ke cPanel, buka File Manager, dan navigasi ke wp-content > themes > nama_theme_anda
  2. Buka header.php, dan sisipkan sebelum </head>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@aroengbinang" />
    <meta name="twitter:creator" content="@aroengbinang" />
    <meta name="twitter:domain" content="<?php bloginfo('url'); ?>" />


    Ganti @aroengbinang dengan id Twitter Anda, lalu Save.
  3. Selanjutnya buka single.php dan sisipkan di bawah <?php the_content(); ?> script sebagai berikut:

    <meta name="twitter:url" content="<?php bloginfo('url'); ?>" />
    <meta name="twitter:title" content="<?php single_post_title(''); ?>" />
    <meta name="twitter:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />

    <?php
    $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb = $twitter_thumbs[0];
    if(!$twitter_thumb) {
    $twitter_thumb = 'https://www.domainanda.com/wp-content/uploads/xxxx/xx/default.jpg';
    }
    ?>
    <meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />


    Ganti alamat default image, dan Save. Jika tulisan tidak ada featured image, maka default image yang akan muncul pada twit.

Untuk menguji apakah Twitter Cards sudah berfungsi, jika menggunakan plugin cache, edit sebuah tulisan. Pasang featured image, atau lakukan perubahan kecil pada teks jika sudah ada featured imagenya, save. Langkah ini perlu untuk menghapus cache tulisan yang akan diuji Twitter Cards-nya.

Buka Twitter Card Validator, copy paste alamat tulisan yang diedit di atas, klik Preview Card. Ulangi klik Preview Card jika foto belum muncul.

Untuk menguji default image, edit tulisan lain yang tidak ada featured image-nya, atau copot dulu, lakukan perubahan kecil pada teks lalu save, dan uji di Twitter Card Validator.
Label: Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.