Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph

rumpibanget.blogspot.com - Mungkin untuk para blogger pemula seperti saya ini, Meta Twitter Card dan Facebook Open Graph merupakan hal yang baru dan mungkin anda tidak tahu, apa itu, dan gunanya untuk apa. Secara garis besar Meta Twitter Card dan Facebook Open Graph sendiri merupakan teknik dalam dunia blogging untuk Meningkatkan SEO di sisi Media Sosial Share yang berfungsi untuk memberikan informasi data pada robot crawler jejaring sosial seperti Facebook, Google+,Twitter dan lainnya untuk menampilkan data Blog/Website sebuah halaman ketika di-share ke Media Sosial.

Media Sosial Share dengan Meta Twitter Card dan Facbeook Open Graph itu penting yah, teman-teman, diamana media sosial sendiri adalah wadah untuk kita agar mendapat atau menjangkau visitor lebih luas dan lebih banyak. selain itu web/blog kita akan semakin SEO dari berbagai sisi.

Twitter Card dan Facebook Open Graph pun memiliki fungsi yang sama yaitu memberikan data halaman sebuah web kepada Twitter's maupun Facebook crawler untuk ditampilkan ketika halamannya di-tweet namun harus divalidasi terlebih dahulu agar bisa berfungsi.

Dengan Twitter Card dan Facebook Open Graph, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, penulis, url halaman, dan lain-lain pada tweet dan status facebook. Twitter Card dan Facebook Open Graph mempunyai cara pemasangan yang berbeda yah.  Namun bagi anda yang templatenya sudah terpasang Facebook Open Graph, maka pemasangan Twitter Card bisa dikombinasikan dengan Facebook Open Graph, tapi tetap harus melalui tahap validasi Twitter agar Twitter mengenali meta tags Twitter Card dan Facebook Open Graph.

Situs untuk test Twitter Card dan Facebook Open Graph.

Twitter Card Validator : https://cards-dev.twitter.com/validator
Facebook Open Graph Validator : https://developers.facebook.com/tools/debug/og/object/

Artikel yang dishare di media sosial akan terlihat lebih menarik dan profesional, sehingga membuat si pembaca, teman atau follower kita akan merasa tertarik untuk menggklik dan membaca artikel tersebut, sadar atau tidak tampilan yang cantik dan profesional akan merangsang otak sipembaca untuk membacanya.

Macam-macam Jenis Twitter Card

Ada 7 macam Twitter Card yang bisa sobat pasang di blog sobat, yang nantinya disesuaikan dengan selera masing-masing dan struktur blog sobat, di antaranya:

Summary Card - Ini adalah 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 jika postingan-postingan Anda menggunakan 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

Memasang Meta Tags Twitter Card

Berikut contoh pemasangan meta tags Twitter Card yang menggunakan summary card with large image untuk artikel blog yang menggunakan gambar berukuran besar. Untuk blog yang tidak memiliki atau tidak menggunakan gambar berukuran 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='[ganti dengan URL gambar favicon blog Anda]' name="twitter:image:src"/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='[@username twitter sobat]' 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 ganti tulisan yang terblok merah sesuai dengan keinginan dan akun sobat, tanpa tanda kurung siku "[kurung siku]"

Saran saya URL image pada name="twitter:image:src" dengan blok merah ganti 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 atau di share. Contoh salah satu artikel rumpibanget.blogspot.com yang telah divalidasi oleh Twitter Card

Memasang Facebook Open Graph

Berikut contoh pemasangan meta Facebook Open Graph yang nantinya akan membuat share dan postingan artikel sobat di status facebook akan menjadi tambah keren dan terlihat profesinal, sehingga membuat pembaca menjadi percaya bahwa blog tersebut dikelola scara profesional dan teman anda tertarik untuk membaca artikelnya. contoh pemasangannya bisa dilihat seperti dibawah ini.

<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='[ganti dengan URL gambar favicon blog Anda]'property='og:image'/>
</b:if>
</b:if>

Untuk tulisan yang terblok merah silahkan anda ganti sesuai selera anda masing-masing, saran saya sesuaikan dengan penyampaian yang ingin anda sampaikan terhadap pembaca di sosial media. silahkan test dulu contohnya seperti pada gambar dibawah.

Menggabungkan Twitter Card dan Facebook Open Graph

Dan jika Anda sudah memasang Facebook Open Graph tags sebelumnya, maka Anda bisa menggabungkan meta tags Twitter Card ini dengan Facebook Open Graph dengan cukup menambahkan beberapa Twitter Card yang tidak ada di Facebook Open Graph. Twitter's parser akan menggunakan data dari Open Graph jika data dari Twitter Card tidak ditemukan. Tambahkan Meta Tags dibawah ini tepat dibawah Meta Tags Facebook Open Graph diatas.

<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='[@username twitter sobat]' name='twitter:creator'/>

Setelah semuanya selesai, silahkan save template 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'/>.

Oke sobat, cukup mudah kan, Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph akan membantu anda dalam menjaring visitor di media sosial besar seperti Facebook, Twitter dan Google+