Cara Memasang Kode Tag Meta Twitter Card di Blogger

Tutorial: Tips & Trik Cara Membuat, Mendapatkan, dan Memasang Kode Tag Meta Twitter Card di Blogger/Blogspot

Ketika sebuah artikel dibagikan ke Twitter, akan tetapi tampilannya menjadi tidak rapi, gambar tidak muncul, judulnya yang menghilang, deskripsi tidak ada; dipastikan kode Meta Tag Twitter Card tidak terpasang di template blogger tersebut.

Buat kamu yang belum tahu apa itu Meta Tag Twitter Card, berikut penjelasannya.

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Arti dan maknanya, dengan terpasangnya kode Twitter Cards ini; maka judul artikel, deskripsi, foto, video, dan gambarnya akan tertata rapi menjadi lebih baik lagi dari sebelumnya.

Selain itu, ukuran gambarnya juga akan mengikuti sebagaimana ukuran layar dari barang teknologi yang digunakan oleh para pembaca. Istilah bekennya, Responsive or Mobile-Friendly.

Cara Membuat Tag Meta Twitter Card di Blogger

Sebelumnya pastikan di dalam template blogger kamu ada kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;Yuk! Baca artikel terbaru kami dengan judul &quot; + data:blog.pageName + &quot; ini langsung di situs resminya! &quot; + data:blog.title + &quot;&quot;' name="twitter:description"/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name="twitter:image:src"/>
<b:else/>
<meta name="twitter:image:src" content='URL-Image-Thumbnail-Default' />
</b:if>
</b:if>
<meta name='twitter:card' content='xxxxxxxxxxxxx'/>
<meta name='twitter:creator' content='@username' />

Jika tidak ada, Copas kode di atas, tepat di atas kode </head> kemudian simpan template blogger.

Cara Memasang Kode Twitter Card di Blog yang Baik & Benar

Selanjutnya, kamu harus paham berbagai kode di atas terkait fungsi atau kegunaannya. Contohnya seperti ini:

<meta name='twitter:card' content='xxxxxxxxxxx'/>

Pada kolom xxx, kamu bisa memasangnya dengan summary, hasilnya seperti ini:

<meta name='twitter:card' content='summary'/>

...atau bisa juga dengan kode summary_large_image.

Buat yang belum paham, ada perbedaan tugasnya di sini. Jika kode yang di pasang adalah kode summary, berarti yang ditampilkan nantinya hanya gambar Thumbnail saja.

Kalau menggunakan kode summary_large_image, artinya gambar Thumbnail agak sedikit membesar disertai dengan judul artikel dan deskripsi singkat dari artikel tersebut.

Untuk mengujinya sendiri, -- bisa di bilang untuk mengecek sebagaimana tampilannya ketika postingan blog di share ke Twitter, gunakan tool gratis ini: Card Validator Twitter Developers.

Perhatikan lagi pada kode ini:

<meta name="twitter:image:src" content='URL-Image-Thumbnail-Default' />

Boleh digunakan atau tidak, tapi saran terbaik dari kami yaitu menggunakannya semaksimal mungkin. Silakan ganti kode tersebut, dengan URL dari gambar milik kamu.

Gambar ini nantinya akan ditampilkan di situs Twitter. apabila di dalam artikel tersebut tidak ada gambar. Bahasa mudahnya, gambar inilah yang akan mewakili dari postingan blog tersebut ketika di share ke Twitter.

Perhatikan kembali kode di bawah ini:

<meta expr:content='&quot;Yuk! Baca artikel terbaru kami dengan judul &quot; + data:blog.pageName + &quot; ini langsung di situs resminya! &quot; + data:blog.title + &quot;&quot;' name="twitter:description"/>

Kode di atas merupakan kode yang akan menampilkan deskripsi artikel secara otomatis ketika postingan blog tsb di share ke Twitter.

Selayaknya gambar Thumbnail yang dimaksudkan di atas, deskripsi inilah yang akan mewakili apabila postingan blog tersebut tidak memiliki (terpasang) deskripsi.

Mudah untuk di mengerti dan dipahami, kan? Itulah tutorial bagaimana cara membuat, mendapatkan, dan memasang kode Meta Tag Twitter Cards di Blogger/Blogspot. Ada yang mau ditanyakan?

Labels: Tutorial Blogger

Thanks for reading Cara Memasang Kode Tag Meta Twitter Card di Blogger. Please share this article.

Share this post