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 Ninura saat link artikel-nya di Tweet ke Twitter.
Jika kamu tertarik untuk memasangnya juga di blog kamu, silahkan ikuti panduan singkat berikut ini.
Cara Memasang Twitter Card SEO Friendly di Blogger
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 + " - " + 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/AVvXsEi7JwiQhfekEfIi_U6XzJc_37DH_mYBsR_Mvn_tAZPfFoQpBOWI-fJnOfpkEzCIpEBWHEiz29IVvfLHTrKvLyo-XkmxYSUCkjtQkNm2A-w-zjRpaDqi67B81XKvZSUu5Rkrfu9I1LqZegjj/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 + " - " + 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 + " - " + data:blog.title + " - " + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:image:alt'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7JwiQhfekEfIi_U6XzJc_37DH_mYBsR_Mvn_tAZPfFoQpBOWI-fJnOfpkEzCIpEBWHEiz29IVvfLHTrKvLyo-XkmxYSUCkjtQkNm2A-w-zjRpaDqi67B81XKvZSUu5Rkrfu9I1LqZegjj/s0-rw/android-chrome-512x512.png' name='twitter:image'/><b:elseif cond='data:view.isSingleItem'/><meta expr:content='data:blog.pageName + " - " + 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 + " - " + data:blog.title + " - " + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:blog.pageName + " - " + 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/AVvXsEi7JwiQhfekEfIi_U6XzJc_37DH_mYBsR_Mvn_tAZPfFoQpBOWI-fJnOfpkEzCIpEBWHEiz29IVvfLHTrKvLyo-XkmxYSUCkjtQkNm2A-w-zjRpaDqi67B81XKvZSUu5Rkrfu9I1LqZegjj/s0-rw/android-chrome-512x512.png' name='twitter:image'/></b:if><b:elseif cond='data:view.isError'/><meta expr:content='data:messages.theresNothingHere + " - " + 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 + " - " + data:blog.title + " - " + data:blog.homepageUrl' name='twitter:description'/></b:if><meta expr:content='data:messages.theresNothingHere + " - " + data:blog.title' name='twitter:image:alt'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7JwiQhfekEfIi_U6XzJc_37DH_mYBsR_Mvn_tAZPfFoQpBOWI-fJnOfpkEzCIpEBWHEiz29IVvfLHTrKvLyo-XkmxYSUCkjtQkNm2A-w-zjRpaDqi67B81XKvZSUu5Rkrfu9I1LqZegjj/s0-rw/android-chrome-512x512.png' name='twitter:image'/></b:if><meta content='summary_large_image' name='twitter:card'/><meta content='@ninuraofficial' name='twitter:site'/><meta content='@ninuraofficial' name='twitter:creator'/>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.
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.
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.
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.
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
Sebenarnya script diatas hanyalah hasil modifikasi yang saya buat untuk blog Ninura 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.
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.