Cara Memasang Twitter Card SEO Friendly di Blogger

Twitter Card adalah meta tag yang berfungsi untuk memberikan detail pada link saat di share ke Twitter atau disematkan di sebuah tweet. Kalau kamu sudah pernah dengar tentang Open Graph Facebook, maka bisa dikatakan bahwa fungsi Twitter Card ini sama, hanya saja dikhususkan untuk Twitter.

Untuk lebih jelasnya, seperti inilah hasil dari Twitter Card blog Asibuka saat link artikel-nya di Tweet ke Twitter.

Jika kamu tertarik untuk memasangnya juga di blog kamu, silahkan ikuti panduan singkat berikut ini.

Alat

1. Komputer / Laptop

Bahan

1. Koneksi Internet
2. Akun Google

Lainnya

Estimasi Waktu: 5 menit.

Biaya: Rp0

Panduan

Langkah 1 - Copy script meta tag ini

Pertama-tama, silahkan kamu copy script di bawah ini lalu taruh di Notepad atau Text Editor yang kamu punya.

<b:if cond='data:view.isHomepage'><meta expr:content='data:blog.title' name='twitter:title'/><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:blog.title' name='twitter:image:alt'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh8d1mXItccKJWaf2UXoGEFY73BvzwzPtetL64Vr2Kfb6p1Z3SK_4OinEC2mVMYkdHfoeJm0R-UvQzHGyTkTAy7e6JOAbWgGccmuu1bus0hLfRmh0HuRGw9rFtksAXVjckVeyq_ThmtHn/s0-rw/android-chrome-512x512.png' name='twitter:image'/><b:elseif cond='data:view.isMultipleItems and !data:view.isHomepage'/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:title'/><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh8d1mXItccKJWaf2UXoGEFY73BvzwzPtetL64Vr2Kfb6p1Z3SK_4OinEC2mVMYkdHfoeJm0R-UvQzHGyTkTAy7e6JOAbWgGccmuu1bus0hLfRmh0HuRGw9rFtksAXVjckVeyq_ThmtHn/s0-rw/android-chrome-512x512.png' name='twitter:image'/><b:elseif cond='data:view.isSingleItem'/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:title'/><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/><b:if cond='data:view.featuredImage'><meta expr:content='data:view.featuredImage' name='twitter:image:alt'/><b:elseif cond='data:blog.postImageUrl'/><meta expr:content='data:blog.postImageUrl' name='twitter:image'/><b:elseif cond='data:blog.postImageThumbnailUrl'/><meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/><b:else/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh8d1mXItccKJWaf2UXoGEFY73BvzwzPtetL64Vr2Kfb6p1Z3SK_4OinEC2mVMYkdHfoeJm0R-UvQzHGyTkTAy7e6JOAbWgGccmuu1bus0hLfRmh0HuRGw9rFtksAXVjckVeyq_ThmtHn/s0-rw/android-chrome-512x512.png' name='twitter:image'/></b:if><b:elseif cond='data:view.isError'/><meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title' name='twitter:title'/><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:else/><meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnh8d1mXItccKJWaf2UXoGEFY73BvzwzPtetL64Vr2Kfb6p1Z3SK_4OinEC2mVMYkdHfoeJm0R-UvQzHGyTkTAy7e6JOAbWgGccmuu1bus0hLfRmh0HuRGw9rFtksAXVjckVeyq_ThmtHn/s0-rw/android-chrome-512x512.png' name='twitter:image'/></b:if><meta content='summary_large_image' name='twitter:card'/><meta content='@asibukaofficial' name='twitter:site'/><meta content='@asibukaofficial' name='twitter:creator'/>

Langkah 2 - Modifikasi Script Sesuai Ketentuan

Langkah selanjutnya, silahkan kamu edit terlebih dahulu script yang sudah kamu copy dengan ketentuan sebagai berikut:

• Warna Kuning: Ubah dengan URL gambar logo atau gambar blog kamu. Jika bisa, URL Gambar yang berukuran 16:9.
• Warna Biru: Ubah dengan format card yang diinginkan. Kamu bisa ganti dengan salah satu opsi di bawah ini atau tetap dengan format yang sudah ada.
• summary: Card tanpa thumbnail gambar. Hanya Judul, deskripsi dan link.
• summary_large_image: Card dengan thumbnail.
• Warna Hijau: Ubah dengan username Twitter kamu.

Langkah 3 - Masuk ke Edit HTML

Jika script tersebut sudah kamu edit, silahkan kamu masuk ke Blogger.com. Lalu silahkan masuk ke menu Theme dan buka menu Edit HTML.

Langkah 4 - Letakkan Script di Atas </head> atau di Bawah <head>

Selanjutnya silahkan cari tag pembuka <head> lalu paste-kan script yang sudah dimodifikasi tepat di bawah tag tersebut. Atau, cari tag penutup </head> atau </head> lalu letakkan script yang sudah dimodifikasi tepat di atas tag tersebut.

Langkah 5 - Simpan Template

Terakhir, silahkan kamu simpan template kamu lalu kamu coba share link artikel atau blog kamu ke Twitter dan lihat apakah Twitter Card kamu sudah bekerja dengan benar.

Kelebihan

Sebenarnya script diatas hanyalah hasil modifikasi yang saya buat untuk blog Asibuka ini. Saya tidak akan katakan bahwa format ini adalah yang paling SEO Friendly atau terbaik dilihat dari aspek apapun.

Kalau boleh, jika kamu punya format lain dari Twitter Card, boleh di share disini.

Manfaat

Beberapa manfaat dari memasang script tersebut:

• Ringan - karena menggunakan conditional tag yang sudah diatur sedemikian rupa sehingga penayangannya tidak akan bertabrakan ataupun menimbulkan error.
• Otomatis - script di atas sudah di setting sehingga kamu nggak perlu khawatir lupa menambahkan gambar secara manual seperti halnya plugin pada Wordpress.
• Semua halaman sudah tercover oleh script ini, bahkan halaman Error.

Penutup

Mungkin itu saja yang bisa saya sampaikan pada kesempatan kali ini. Jika ada yang kurang jelas atau ingin ditambahkan, silahkan sampaikan saja melalui kolom komentar di bawah. Terima kasih, semoga bermanfaat, dan sampai jumpa di tulisan saya lainnya.