Memasang Meta Twitter Card Markup Di Blogger
Memasang Meta Twitter Card Markup Di Blogger - Seperti halnya Open Graph tags yang berfungsi untuk memperlihatkan informasi data pada robot crawler jejaring sosial menyerupai Facebook, Google+, dan lainnya untuk menampilkan data sebuah halaman saat di-share, maka Twitter Card tags pun mempunyai fungsi yang sama yaitu memperlihatkan data halaman sebuah web kepada Twitter's crawler untuk ditampilkan saat halamannya di-tweet namun harus divalidasi terlebih dahulu biar sanggup berfungsi.
Sehingga dengan begitu, URL atau halaman yang di-tweet mempunyai content yang lebih kaya dibanding dengan tweet biasa yang tidak memakai Twitter Card tags.
Dengan ini, kita sanggup 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 sanggup dikenali robot crawl Twitter. Namun bila pada template sudah memasang Open Graph, maka pemasangan Twitter Card sanggup dikombinasikan dengan Open Graph, tapi tetap harus melalui validasi Twitter biar Twitter mengenali meta tags Twitter Card dan Open Graph.
Sehingga tweet menjadi lebih menarik dan diperlukan akan membawa lebih banyak pembaca. Nah bagi yang ingin mencoba memasang meta tags Twitter Card ini, Anda perlu memerlukan beberapa hal menyerupai di bawah ini.
1. Memilih Card Type
Ada 7 macam card type yang sanggup kita pilih sesuai dengan konten halaman web kita, di antaranya:- Summary Card - Ini yakni default card untuk menampilkan judul, deskripsi, thumbnail, dan atribusi akun Twitter.
- Summary Card with Large Image - Mirip dengan Summary Card, tetapi dengan menampilkan gambar yang lebih besar. Pilih ini bila postingan-postingan Anda memakai gambar yang besar.
- Product Card - Hanya menampilkan photo saja.
- Gallery Card - Menampilkan koleksi beberapa photo.
- App Card - Untuk menampilkan detail aplikasi mobile dengan direct download.
- Player Card - Untuk menampilkan video, audio, atau media lain.
- Product Card - Menampilkan informasi produk.
Card Type: https://dev.twitter.com/cards/types
2. Memasang Meta Tags Twitter Card
Di sini saya mencontohkan untuk meta tags Twitter Card yang memakai summary card with large image yang sudah saya gunakan. Untuk blog yang tidak mempunyai atau tidak memakai 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='"Silahkan kunjungi " + data:blog.pageTitle + "untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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='"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 content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsidr7XYGF-MVQwOPbe4ePw_dJM7ysaPUXbo6OzFHrlKrlVPJa1kLVGhRzHdYHcLQ0-LZ2kowKPzIKPvLsc5wuuc2vvsZL_aC2tPf7Eo_0xHg7t-YbhZCN1_o0U_GICbtFj2xknImR6ZoS/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 memakai gambar besar, arahan
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 sanggup mengganti URL image pada
name="twitter:image:src" yang paling bawah dengan URL gambar favicon blog Anda namun dalam ukuran yang besar untuk dipakai saat postingan tidak mempunyai gambar atau saat halaman homepage kita di-Tweet. Dan bila Anda sudah memasang Open Graph tags sebelumnya, maka Anda sanggup 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 memakai data dari Open Graph bila data dari Twitter Card tidak ditemkan. Di Bawah ini yakni campuran Twitter Card dan Open Graph yang saya gunakan.
<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.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='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UFxVs0MwFztIisteafZo9BVEiLkLvXTmxrYW9b1R_D3F7QqA-6VC7wcZ0AC_llfLyC3m_7aLKYiz3y_sXCsftkTRM_kbd_vmduUzzkAzhP5_lEDgtpNd2TcuK4HPvU3R5UNyPnQYzQRk/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 menyerupai langkah 2 di atas, kini silahkan Anda lakukan Card Validation dengan validator yang disediakan Twitter dengan login akun Twitter Anda.
Card Validator: https://cards-dev.twitter.com/validator
Silahkan susukan url Card Validator di atas, kemudian masukan salah satu url postingan blog kita kemudian klik tombol Preview Card. Kemudian silahkan lakukan Twitter Card approval (biasanya akan muncul tombol putih) untuk memperlihatkan informasi korelasi akun Twitter Anda dengan website. Silahkan isikan data-data yang diminta kemudian klik Submit.
Selanjutnya bila Twitter telah mendapatkan 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, contohnya menyerupai arahan berikut:
<link expr:href='data:blog.url' rel='canonical'/>. Selamat mencoba... dan happy blogging...
Sumber https://www.kompiajaib.com/
0 Response to "Memasang Meta Twitter Card Markup Di Blogger"
Posting Komentar