Rabu, 23 Januari 2019

Tutorial Memasang Kode Twitter Card Paling Mudah



Siapa di sini yang suka share blog di twitter tapi hasilnya hanya muncul linknya doang? Akuuu…akuuuu…aku…….*TunjukTanganPalingTinggi.

Kadang suka kesel kalau share artikel dari blog yang kita tulis dan menurut kita bagus, tapi munculnya malah gitu-gitu muluk. Kalau kemarin-kemarin sih, aku taunya hanya media-media yang bisa memunculkan share artikel ke twitter dengan gambar yang disertai judul yang klik-able banget, sekarang aku baru tau kalau itu bisa dipakai oleh semua blog maupun wordpres.

Aku taunya dari blog Sitta karina dan aku beranikan diri untuk bertanya. Awalnya aku mikirnya pertanyaanku nggak dibales, eee ternyata dibales. Yeayyyyy…jadinya aku tau kalau itu ternyata pakai Twitter Card. Nah….apaan tuh…..*LangsungTanyaKeEyangGugel

Jadi, Twitter Card adalah sebuah kode meta tag HTML dengan atribusi khusus yang berfungsi untuk mengambil ringkasan dari website maupun blog ketika dibagikan ke Twitter. (Sumber : igniel )


Nah, setelah tau, lalu aku mencoba menerapkannya dan sangat mudah untuk memasukkan kodenya. Kalau kalian udah memakai ini, nantinya blog kalian akan terlihat lebih menarik saat di-share di Twitter. Nggak percaya? Jadi nantinya hasilnya kayak gini.



Lalu, bagaimana cara pemasangannya? Gampang ternyata, kamu bisa ikuti tutorial berikut.

1.Yang pertama kali harus kamu lakukan adalah masuk ke akun blog kamu.



2.Kemudian masuk ke bagian ini dan cari "tema". Lalu klik yak. Jangan cuma diliatin aja. 


3.Setelah itu klik pada bagian HTML.



4.Sampai di sini, mari kita mainan kode. Pertama kamu cari <head>. Kalau udah nemu, kemudian tempelkan kode ini di bawah <head>. Tinggal copy paste aja yak. 

Ini kodenya :

<!-- [ Twitter card meta tag ] -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot;untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='&quot;Silakan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIfX0gcQxYwx2w2qVQXFGIWX_vN55IW96h9VHYfqeZ2Vk4j_5cEd0EUYhdDBpTEXHSf5JBq7kKmCIp5WYWBmDcus0ghi5gUNpgpoIlBdkLY5pGzz_rBQ2pt1R2_6Rgk_InyNj0r3s0cqY/s1600/tulisan+wortel+twitter+card.png' name='twitter:image:src'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>

<meta content='@therealnanta' name='twitter:creator'/>

Mengapa ada huruf yang aku kasih warna-warni? jadi dua poin itulah yang perlu diperhatikan. Warna hijau bisa kamu ganti dengan URL image blog yang akan kamu pakai. Untuk mencarinya bisa klik di sini.

Sedangkan untuk warna pink itu adalah username Twitter kamu. Inget ya, pakai username masing-masing. Jangan sama kayak punyaku yak.

Oiya, nanti kalau kaliam masukin kode tersebut nggak usah dikasi warna ya. Item semua aja. Itu cuma buat ngasih penjelasan aja biar enak. Heheee~






5. kalau sudah masukin kode dengan benar, setelah itu klik "simpan tema". 




6. Untuk memastikan sudah jadi apa belum. kamu bisa cek dengan Card Validator dan memasukkan link blog yang akan dishare di twitter. 


Kalau hasilnya sudah seperti maka Seeeelaaaamaaaat.....kamu berhasil membuatnya. Yeayy......*TepukTangan







Tuh kan keren? Dan hal berikutnya yang harus kamu lakukan adalah share di twitter lewat Blog. Kira-kira caranya seperti ini, 





Masuk ke blog kamu dulu, abis itu klik judul pada bagian search. Nanti akan muncul seperti itu. Jika sudah, kamu bisa klik dan akan muncul secara keseluruhan. 


Lalu, scroll-scroll ke bawah dan kamu akan menemukan ini. Abis itu, klik dan tinggal share deh. 







Nah kaaa? gampang banget caranya. Ya emang agak ribet sih, tapi kalau kamu mengerjakananya dengan tulus, pasti akan terasa mudah. Heheee~

Selamat mencoba yak, semoga tutorial ini bermanfaat buat semuanya. 


~MissAnt~




0 comments:

Popular Posts