Twitter sebagai salah satu jaringan gosip yang sangat terkenal di dunia sanggup menjadi salah satu media yang sanggup kita gunakan untuk membantu mempopulerkan halaman blog yang kita miliki, caranya dengan share atau membuatkan halaman blog ke twitter, sehingga halaman blog mempunyai kesempatan untuk dikunjungi oleh pengguna twitter.
sebagai salah satu situs profesional twitter menyediakan aba-aba khusus yang sanggup dipakai untuk memfasilitasi halaman blog semoga lebih gampang sanggup dishare ke twitter, aba-aba tersebut dikenal dengan nama twitter card, berupa aba-aba perintah meta tag HTML dengan hukum khusus yang sanggup dipasang atau diletakan di template blog, baik blog berflatform blogspot, wordpress maupun flatform blog lainnya.
Baca Juga:
Cara Memasang Facebook Open Graph di blogspot.
Ketika pengunjung blog melaksanakan share artikel blog yang kita miliki ke twitter melalui tombol share twitter yang kita sediakan di halaman blog yang kita miliki, maka twitter akan membaca dan berusaha untuk menemukan aba-aba twitter card yang terpasang pada blog tersebut, kalau gosip twittercard ditemukan maka artikel blog akan dishare dihalaman twitter yang share dengan tampilan sesuai pengaturan aba-aba twitter card yang kita pasang.
Mengenal Kode Meta Tag Twitter Card
Berikut beberapa aba-aba meta tag twitter card yang sanggup di pasang pada blog anda untuk menyimpan gosip yang diharapkan oleh mesin twitter untuk data share:
#1- twitter : card
Untuk menentukan jenis card yang ingin digunakan, ini akan menentukan jenis tampilan share sesuai dengan jenis card type yang kita pilih:
Format:
<'meta name='twitter:card' content='jenis_card'/>
Jenis_card yang sanggup anda gunakan ialah sebagai berikut:
a.
Summary, menampilkan share dengan thumbnail.
Jenis card ini cocok untuk share artikel postingan blog dengan thumbnail, kalau anda menentukan card ini maka tampilan share akan terlihat kurang lebih akan terlihat ibarat gambar dibawah ini:
b.
Summary_large_image, menampilkan share dengan large image.
Jenis card ini sangat cocok untuk share artikel blog dengan gambar besar, Jika anda menentukan card jenis ini maka tampilan hampir ibarat dengan summary namun menampilkan gambar yang lebih besar ibarat gambar dibawah ini:
c.
photo, untuk menampilkan photo saja,
Jenis card ini cocok sekali dipakai untuk share photo saja, tampilan twitter photo card terlihat ibarat gambar dibawah ini:
d.
gallery, sanggup menampilkan beberapa koleksi photo
Sama halnya dengan sumary lager image namun menampilkan beberapa foto gallery.
e.
app, Untuk share applikasi mobile dengan direct download.
f.
Product Card, Untuk Share product
Contoh Penggunaan:
<'meta name='twitter:card' content='summary_large_image'/>
#2 - twitter : url
Digunakan untuk menyimpan gosip url artikel blog anda yang dishare
Contoh Penggunaan:
<meta name="twitter:url" content="https://titipteknologi.blogspot.com"/>
#3 - twitter : description
Digunakan untuk menyimpan gosip descripsi share, anda sanggup mengisinya dengan descripsi dari artikel yang dishare. atau descripsi apapun yang mewakili isi artikel yang akan dishare.
Contoh Penggunaan:
<meta name="
twitter:description" content="
ini diisi degan deskripsi yang mewakili artikel secara keseluruhan"/>
#4 - twitter : title
Digunakan untuk menyimpan gosip judul yang mewakili artikel yang dishare
teladan penggunaan:
<meta name="twitter:title" content="letakan judul disini"/>
#5 - twitter : image
Digunakan untuk menyimpan gosip gambar yang akan ditampilkan di halaman share twitter, anda sanggup mengisinya dengan gambar yang sesuai dengan gambar yang anda pasang pada artikel blog anda.
Contoh penggunaan:
<meta name="twitter:image" content="url gambar"/>
Untuk lebih detail anda sanggup baca disini:
https://dev.twitter.com/cards/types Cara Memasang Meta Tag Twitter Card di Blogspot
Untuk share artikel blog ke halaman twitter, twitter card yang paling cocok dipakai ialah summary atau summary_large_image, kalau menentukan summary maka share akan menampilkan judul, deskripsi, thumbnail image dan juga atribusi twitter, kalau menentukan summary_large_image, maka tampilan share ibarat dengan summary namun dengan tampilan gambar yang lebih besar.
Summary cocok sekali dipakai kalau artikel mengandung gambar yang tidak terlalu besar, sedangkan summary_large_image akan cocok sekali dipakai kalau artikel mengandung gambar dengan ukuran yang besar.
Berikut aku akan contohkan cara memasang meta tag twitter card untuk blogspot dengan memakai card summary_large_image, langkah-langkahnya ialah sebagai berikut:
a. Masuk ke Edit HTML Blog anda
c. Cadi aba-aba </head
d. letakan aba-aba twitter card dibawah ini diatas aba-aba </head
<b:if cond='data:blog.pageType == "item"'>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name="twitter:title" expr:content='data:blog.pageName'/>
<b:if cond='data:blog.metaDescription'>
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' 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 name="twitter:image:src" content='alternatif_image_url' />
</b:if>
</b:if>
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:creator' content='@TwitterUserName' />
Kode diatas akan menghasilkan tampilan share dengan gambar lebih besar, silahkan ganti
alternatif_image_url, dengan alamat url gambar yang anda inginkan, ini ialah gambar yang akan dipakai kalau didalam artikel yang dishare tidak mengandung gambar.
Jika anda menginginkan gambar memakai thumbnail anda sanggup ubah text
summary_large_image dengan
summary.
kemudian silahkan ganti juga
@TwitterUserName dengan user name twitter anda untuk identitas creator. Anda juga sanggup mengganti goresan pena berwarna biru diatas dengan deskripsi apapunyang anda inginkan, goresan pena warna biru ialah alternatif deskripsi share yang akan ditampilkan kalau meta deskripsi artikel blog tidak diaktifkan atau artikel blog tidak mempunyai meta deskripsi.
e. Jangan lupa simpan Template blog anda. Kolaborasi Twitter Cards Versus Facebook Open Graph
Mesin twitter ternyata sanggup membaca perintah facebook open graph, Jika di dalam template blogspot anda kebetulan anda sudah memasang facebook open graph anda sanggup menggabungkan facebook open graph dengan suplemen sedikit meta tag twitter card, sehingga sanggup dipakai untuk facebook share dan juga twitter share dengan aba-aba yang lebih singkat. Mesin twitter akan membaca gosip yang terdapat didalam perintah meta tag open graph untuk digenerate menjadi konten share twitter kalau twitter tidak menemukan perintah meta tag twitter card. Contoh Berikut ialah kerja sama antara aba-aba meta tag facebook open graph dan aba-aba meta twitter card memakai summary large image, langkah-langkahnya ialah sebagai berikut: a. Masuk ke Edit HTML Blog anda
c. Cadi aba-aba </head
d. letakan aba-aba twitter card dibawah ini diatas aba-aba </head
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Alternatif_image_url' property='og:image'/>
</b:if>
</b:if>
<meta content='fb_saya admin' property='fb:saya admins'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@Twitter_User_Name' name='twitter:creator'/>
Kode diatas sanggup dipakai untuk share facebook dan juga share twitter dengan summary_large image,
Silahkan anda ganti goresan pena warna biru diatas dengan deskripsi yang anda inginkan atau biarkan saja, goresan pena warna biru untuk alternatif deskripsi kalau didalam artikel yang anda share tidak terdapat meta deskripsi.
Alternatif_image_url, silahkan anda ganti dengan url gambar pengganti kalau didalam artikel yang anda share tidak menyertakan gambar apapun.
fb_saya admin, anda sanggup ganti dengan id facebook anda, untuk mendapat id Facebook anda sanggup masuk ke halaman facebook anda, pada sajian dengan goresan pena nama anda yang letaknya disamping kiri sajian beranda, silahkan anda klik kanan kemudian pilih sub sajian salin lokasi tautan, anda akan mendapat seperti https://facebook.com/ajidin, silahkan anda gunakan dengan menghilangkan https://facebook.com/ untuk mengganti fb_saya admin, sebagai teladan untuk id facebook aku adalah: <meta content='ajidin' property='fb:saya admins'/>
@Twitter_User_Name anda sanggup ganti dengan user name twitter anda atau halaman twitter yang mewakili halaman blog diteitter sebagai identitas creator. e. Jangan lupa simpan template anda Validasi Twitter Card Anda
Setelah anda berhasil memasang meta tag twitter card di template blogspot anda, langkah selanjutnya ialah melaksanakan card validasi dengan memakai card validator yang disediakan oleh twitter. tujuannya ialah memastikan bahwa twitter card yang anda pasang sudah benar dan sesuai dengan tampilan share yang anda inginkan
langkah-langkahnya ialah sebagai berikut:
a. Masuk ke halaman twitter card validator.
b. Silahkan masukan salah satu url artikel blog anda,
c. Tekan tombol "Preview Card", anda akan melihat tampilan share dari artikel blog anda, disertai dengan gosip log, apakah aba-aba perintah twitter card yang anda gunakan sudah benar atau tidak, kalau terdapat warning silahkan anda perbaiki sesuai dengan petunjuk yang diberikan.
Demikian artikel mengenai Cara Memasang Meta Tag Twitter Card di Blogspot : lengkap, semoga bermanfaat.
Posting Komentar
Posting Komentar