Memasang Meta Twitter Card Markup Di Blogger

Memasang Meta Twitter Card Markup Di Blogger

Bola Hero Gawai

Memasang Meta Twitter Card Markup Di Blogger

Meta Twitter Card Markup
Memasang Meta Twitter Card Markup Di Blogger - Seperti halnya Open Graph tags yang berfungsi untuk memberikan informasi data pada robot crawler jejaring sosial seperti Facebook, Google+, dan lainnya untuk menampilkan data sebuah halaman ketika di-share, maka Twitter Card tags pun memiliki fungsi yang sama yaitu memberikan data halaman sebuah web kepada Twitter's crawler untuk ditampilkan ketika halamannya di-tweet namun harus divalidasi terlebih dahulu agar bisa berfungsi.

Sehingga dengan begitu, URL atau halaman yang di-tweet memiliki content yang lebih kaya dibanding dengan tweet biasa yang tidak menggunakan Twitter Card tags.

Dengan ini, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, penulis, url halaman, dan lain-lain pada tweet. Namun sedikit berbeda cara pemasangan Twitter Card tags ini dibanding dengan Open Graph Facebook. Meta tags Twitter Card memerlukan Card Validasi oleh Twitter untuk memastikan bahwa meta tags Twitter Card bisa dikenali robot crawl Twitter. Namun jika pada template sudah memasang Open Graph, maka pemasangan Twitter Card bisa dikombinasikan dengan Open Graph, tapi tetap harus melalui validasi Twitter agar Twitter mengenali meta tags Twitter Card dan Open Graph.

Contoh untuk tweet postingan yang menggunakan meta tags Twitter Card ini (postingan Kompi Ajaib) seperti pada embed tweet di bawah ini.


Menjadi lebih menarik tweet-nya bukan? Dengan begitu diharapkan akan membawa lebih banyak pembaca. Nah bagi yang ingin mencoba memasang meta tags Twitter Card ini, Anda perlu memerlukan beberapa hal seperti di bawah ini.

1. Memilih Card Type

Ada 7 macam card type yang bisa kita pilih sesuai dengan konten halaman web kita, di antaranya:
  1. Summary Card - Ini adalah default card untuk menampilkan judul, deskripsi, thumbnail, dan atribusi akun Twitter.
  2. Summary Card with Large Image - Mirip dengan Summary Card, tetapi dengan menampilkan gambar yang lebih besar. Pilih ini jika postingan-postingan Anda menggunakan gambar yang besar.
  3. Product Card - Hanya menampilkan photo saja.
  4. Gallery Card - Menampilkan koleksi beberapa photo.
  5. App Card - Untuk menampilkan detail aplikasi mobile dengan direct download.
  6. Player Card - Untuk menampilkan video, audio, atau media lain.
  7. Product Card - Menampilkan informasi produk.
Card Typehttps://dev.twitter.com/cards/types

2. Memasang Meta Tags Twitter Card

Di sini saya mencontohkan untuk meta tags Twitter Card yang menggunakan summary card with large image yang sudah saya gunakan. Untuk blog yang tidak memiliki atau tidak menggunakan gambar besar, Anda tinggal mengganti type/content twitter:card saja.

<meta expr:content='data:blog.title' name="twitter:site"/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &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:src"/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<meta content='http://4.bp.blogspot.com/-ZeYaf2Nu9o0/VFXGPuoitxI/AAAAAAAAeHQ/Cgn0KuW6XzA/s1600/no-image.jpg' name="twitter:image:src"/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@YourUserName' name='twitter:creator'/>
Untuk blog yang tidak menggunakan gambar besar, kode summary_large_image pada name='twitter:card' silahkan ganti dengan summary. Nantinya image yang ditampilkan berupa thumbnail di samping deskripsi postingan.

Dan @YourUserName silahkan ganti dengan user name akun Twitter Anda.

Anda juga bisa mengganti URL image pada name="twitter:image:src" yang paling bawah dengan URL gambar favicon blog Anda namun dalam ukuran yang besar untuk digunakan ketika postingan tidak memiliki gambar atau ketika halaman homepage kita di-Tweet.

Dan jika Anda sudah memasang Open Graph tags sebelumnya, maka Anda bisa menggabungkan meta tags Twitter Card ini dengan Open Graph dengan cukup menambahkan beberapa Twitter Card yang tidak ada di Open Graph. Twitter's parser akan menggunakan data dari Open Graph jika data dari Twitter Card tidak ditemkan. Di Bawah ini adalah gabungan Twitter Card dan Open Graph yang saya gunakan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<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='http://4.bp.blogspot.com/-OfeQoqmUe2E/U4LGtr7aVMI/AAAAAAAAc7g/GQB8vBxrIE8/s1600/Graphic1.png' property='og:image'/>
</b:if>
</b:if>
<meta content='100006644464463' property='fb:admins'/>
<meta content='480072895444481' property='fb:profile_id'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@KompiAjaib' name='twitter:creator'/>

Setelah semuanya selesai, silahkan save template blog Anda.

3. Card Validation

Setelah Anda memasang meta tags Twitter Card seperti langkah 2 di atas, sekarang silahkan Anda lakukan Card Validation dengan validator yang disediakan Twitter dengan login akun Twitter Anda.

Card Validator: https://cards-dev.twitter.com/validator

Silahkan akses url Card Validator di atas, kemudian masukan salah satu url postingan blog kita lalu klik tombol Preview Card. Kemudian silahkan lakukan Twitter Card approval (biasanya akan muncul tombol putih) untuk memberikan informasi hubungan akun Twitter Anda dengan website. Silahkan isikan data-data yang diminta kemudian klik Submit.

Selanjutnya jika Twitter telah menerima Twitter Card approval akan ada email masuk ke kotak masuk email Anda yang memberitahu bahwa Twitter Card Anda telah aktif. Dan perlu diperhatikan bahwa Twitter perlu waktu untuk menampilkan semua summary pada Tweet postingan-postingan blog Anda.

Pastikan juga Anda sudah memasang URL rel canonical di blog Anda, misalnya seperti kode berikut: <link expr:href='data:blog.url' rel='canonical'/>.

Selamat mencoba... dan happy blogging...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×