iklan banner

Cara Memasang Arahan 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 instruksi Meta Tag Twitter Card tidak terpasang di template blogger tersebut.

Buat kau 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 instruksi 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 dipakai oleh para pembaca. Istilah bekennya, Responsive or Mobile-Friendly.

Cara Membuat Tag Meta Twitter Card di Blogger


Sebelumnya pastikan di dalam template blogger kau ada instruksi 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 eksklusif 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 instruksi di atas, sempurna di atas instruksi </head> lalu simpan template blogger.

Cara Memasang Kode Twitter Card di Blog yang Baik & Benar


Selanjutnya, kau harus paham banyak sekali instruksi di atas terkait fungsi atau kegunaannya. Contohnya menyerupai ini:

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

Pada kolom xxx, kau sanggup memasangnya dengan summary, akhirnya menyerupai ini:

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

...atau sanggup juga dengan instruksi summary_large_image.

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

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

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

 dan Memasang Kode Tag Meta Twitter Card di Blogger Cara Memasang Kode Tag Meta Twitter Card di Blogger

Perhatikan lagi pada instruksi ini:

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

Boleh dipakai atau tidak, tapi saran terbaik dari kami yaitu menggunakannya semaksimal mungkin. Silakan ganti instruksi 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 saat di share ke Twitter.

Perhatikan kembali instruksi di bawah ini:

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

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

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

Praktis untuk di mengerti dan dipahami, kan? Itulah tutorial bagaimana cara membuat, mendapatkan, dan memasang instruksi Meta Tag Twitter Cards di Blogger/Blogspot. Ada yang mau ditanyakan?
Sumber http://addbloggerthemes.blogspot.com

0 Response to "Cara Memasang Arahan Tag Meta Twitter Card Di Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel