Cara Membuat Twitter Card: Summary with Larger Image

Kamis, November 30, 2017


Kalo doyan main twitter, udah pasti pernah lihat tweet yang isinya kek gini:




Gimana sih bikinnya?

Untuk awam seperti gue, kalau manual bikinnya agak susah-susah gampang karena jujur aja gue gak ngerti bahasa html, xml, atau apapun itulah pokoknya. Tapi masih bisa dikerjain kok.
Yang akan gue jelasin adalah cara manual untuk share konten blog, artikel dll ke dalam twitter dengan twitter card khususnya summary with larger image.

Apa sih untungnya pakai twitter card?

Biar keren. Gak. Dari hasil pengamatan gue, tweet dengan text, picture dan hashtag itu potensi dilihat manusia makin banyak. Ada datanya gak? Mungkin ada. Ha Kalau gue secara pribadi cuma ngamatin aja perkembangan tweet viral di dunia… k-pop. wkwk

Percaya gak percaya.. visual is important. Berapa banyak media yang sekarang pakai infografik buat nyebar berita? Berapa banyak media yang bikin video pendek buat nyebarin konten? Semua orang berlomba-lomba bikin konten visual yang menarik dan bagus karena jaman sekarang emang begitu pasarannya. Cerita lewat gambar dan video. Sebentar… Kok jadi melebar…

Gini aja deh, lebih menarik mana? 

                             
 

Tweet berisi link panjang yang ujungnya cuma titik-titik atau tweet yang ada gambarnya dan link yang rapi? Gue bakal pilih yang rapi sih.

Biar lebih paham kenapa lo harus pake twitter card: about twitter cards

Jadi, gimana buat manualnya. Ini khusus buat blogger ya, gue gatau kalau wordpress gimana, belom nyoba soalnya. Dan ini adalah tutorial buat bikin Summary With Larger Image

1. Kalau udah punya Blogger, LOGIN, lalu klik THEME, klik EDIT HTML.

2. Di kotak HTML, cari </head> lalu tempel kode ini sebelum kode </head>

<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='link photo yang mau dipake' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if></b:if>


Perhatian:
-          Ganti @username dengan username twitter lo
-          Di meta content untuk twitter image, ganti dengan link foto yang mau ditampilin.

Abis itu save. Kalau ada error, cek dan ubah aja. 
Boleh preview dulu buat ngecek meta tags nya berhasil apa gak. Kode diatas ini pake b:if yang artinya gue lupa apaan. Hehehehehehehe  Tapi kalau gak salah sih ntar kalo dalam post lo ada foto, yang nampil di twitter itu foto dalam post. Kalau dalam post lo gak ada foto, maka yang dipake adalah foto yang lo pake dalam html ini.


edit HTML


Ini kode nyari di google dan gue utak-atik sampe gak ada yang error. Jadi itu emang kode yang gue pakai saat ini. Setelah edit, jangan lupa save.

3. Kalau berhasil save, lalu ke halaman card validator
Disitu lo bisa cek.
Kalau udah whitelisted, berarti berhasil. Blog lo udah siap.




4. Abis dari card validator, coba copy url salah satu entry dari blog ke twitter, lalu tweet. Dan tadaaaaa.. twitter card lo udah siap. Sekarang bisa share konten dari blog ke dalam twitter dengan lebih kece! Wk



K






Share This Story

Tags: , , , , , , , ,

You Might Also Like

0 komentar