Minggu, 01 Oktober 2017

Memasang twitter card di blogger

Kali ini saya akan membahas tentang bagaimana memasang twitter card di blog. Twitter card biasanya digunakan untuk membagikan blog atau artikel ke twitter agar tidak hanya terlihat linknya saja, tetapi ada sedikit preview tentang blog atau artikel yang dibagikan. Terlihat seperti pada gambar dibawah ini beberapa contoh twitter card.

Twitter card laman utama

Twitter card untuk tiap artikel 


Untuk menambahkannya tidak terlalu sulit, berikut cara pemasangannya.

1. Buka dasboard blogger. pilih tema pada tab kiri pengaturan blog, seperti pada gambar dibawah ini

Pilih tema pada menu tab kiri

2. Akan muncul pengaturan tema, pilih pada tombol edit html seperti pada gambar dibawah ini.

Pilih Edit HTML

3. Setelah dipilih edit html akan muncul pengeditan tema seperti pada gambar dibawah ini.



Setelah muncul seperti pada gambar diatas, pastekan code ini tepat dibawah code <head> seperti pada gambar diatas. Berikut kode untuk twitter cardnya:

<!-- [ Meta Tag Twitter Card ] -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta content='Link image blog' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
<meta content='summary' name='twitter:card'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<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 ini, Cerita baru dari &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'/>
<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 image alternatif' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
</b:if>
<meta content='@uunnurdiyanto' name='twitter:creator'/>
<meta content='@uunnurdiyanto' name='twitter:site'/>
<!-- [ Meta Tag Twitter Card ] -->

Keterangan:
1. "Link Image Blog" ganti dengan url gambar blog anda.
2. "Silakan baca ini, Cerita baru dari" ganti dengan kalimat pengganti, apabila Artikel tidak memiliki deskripsi khusus
3. "link image alternatif" ganti dengan url gambar sebagai pengganti apabila Artikel yang dibuat tidak disertai dengan gambar. dapat disamakan dengan url gambar blog
4. "@UunNurdiyanto" ganti dengan id twitter anda.

Contoh url gambar blog: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGpKJbaOlsLb8CGWvju-kDaVm4QVHMi8vGFTLC0sqIuVdtLiZSP1jz0azCBrwBL34lhtxZtSW5GIbHcz8vB1mHl-1dOvs0-ZblMBnxrSWcTdY74VHn-DXYefx96CXw8fhDY7aQiddfIILQ/s1600/logo.png

Sekian informasi tentang bagaimana memasang twitter card pada blog. semoga bermanfaat.

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.

Entri Populer