Code Agar Blog Tampil Keren Di Social Media

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.



Related Artikel Code Agar Blog Tampil Keren Di Social Media

2 comments:

  1. Anonymous10/22/2015

    gan, code code itu diletakkan dimana gan..?

    ReplyDelete
    Replies
    1. dibagian antara <head> dan sebelum </head> juga bisa gan

      Delete