Code Agar Blog Tampil Keren Di Social Media

Code Agar Blog Tampil Keren Di Social MediaShare on FacebookTwitterTwitter
Mau tampilan blog agan keren saat ada yang sharing ke Facebook, Twitter atau Google+,...?
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

Structure Data Webjalanan

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

Facebook Scrap Webjalanan
 
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

Webjalanan Twitter Card 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.