Berikut cara yang benar untuk memaksimalkan tampilan share agar lebih profesional dan menarik perhatian bagi yang melihat.
Masukkan code berikut dibawah code <head>
<meta content='article' property='og:type'/>
<meta content='http://www.namabloagan.com' property='og:url'/>
<meta content='image/jpeg' property='og:image:type'/>
<meta content='470' property='og:image:width'/>
<meta content='246' property='og:image:height'/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@AkunTwitter"/>
<meta name="twitter:creator" content="@AkunTwitter"/>
<meta name="twitter:domain" content="Nama Blog" property='og:site_name'/>
<meta content='Title Blog' name='twitter:title' property='og:title' itemprop="name"/>
<meta content="Deskripsi Blog" name="twitter:description" property='og:description' itemprop='description'/>
<meta name="twitter:image:src" content="https://url_gambar_ukuran_470x246" property='og:image' itemprop="image"/>Code diatas merupakan penggabungan dari tiga struktur data yang dibutuhkan oleh Facebook, Twitter dan Google Plus, jadi kita tida perlu repot lagi membuat structure data masing-masing, karena pada dasarnya mereka membutuhkan data scrap yang hampir sama.
ORIGINAL SOCIAL SCRAP CODE..!
1. Google+ Data Scrap
Google merekomendasikan penggunaan Schema.org microdata agar mendapatkan hasil yang maksimal pada tampilan share, kita bisa melakukan pengetesan structure data disini :https://developers.google.com/structured-data/testing-tool
Atau generate meta data disini : https://developers.google.com/+/web/snippet
Pada dasarnya Google hanya membutuhkan 3 Data yaitu : Title, Image URL, Description
jadi secara ringkas mereka hanya membutuhkan data :
<meta content='Judul atau nama Blog' itemprop="name"/>
<meta content="Deskripsi Blog agan" itemprop='description'/>
<meta content="https://url_gambar_ukuran_470x246" itemprop="image"/>
2. Facebook Object Debugger
Facebook mempunyai tool tersendiri untuk melakukan pengecekan silahkan langsung kemari untuk mengecek blog agan : https://developers.facebook.com/tools/debug/og/object
Meta code untuk Facebook :
<meta content='article' property='og:type'/>
<meta content='http://www,webjalanan.com' property='og:url'/>
<meta content='Webjalanan' property='og:site_name'/>
<meta content='Harus sama dengan code title' property='og:title'/>
<meta content='Deskripsi Blog agan' property='og:description'/>
<meta content='image/jpeg' property='og:image:type'/>
<meta content='470' property='og:image:width'/>
<meta content='246' property='og:image:height'/>
<meta content='https://url_gambar_ukuran_470x246' property='og:image'/>
3. Twitter Card Validator
Untuk Twitter kita bisa melakukan pengecekan disini : https://cards-dev.twitter.com/validator
Meta code untuk Twitter Card :
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@WebJalanan'/>
<meta name='twitter:creator' content='@WebJalanan'/>
<meta name='twitter:domain' content='WebJalanan' property='og:site_name'/>
<meta content='Webjalanan :: Tutorial code website dan SEO' name='twitter:title'/>
<meta content='Isi dengan Deskripsi Blog agan' name='twitter:description'/>
<meta name='twitter:image:src' content='https://url_gambar_ukuran_470x246'/>
Code yang ane berikan pada bagian paling atas, sudah merupakan gabungan data yang dibutuhkan oleh 3 Social Media terbesar saat ini (Facebook, Google+, Twitter), jadi silahkan agan edit dan sesuaikan dengan data blog agan masing-masing, seperti nama blog, akun twitter, image, deskripsi dan lainnya.
0 komentar:
Post a Comment