Tampilkan Navigasi Ponsel

Kamis, 21 Agustus 2014

, , , , , ,

Cara Menampilkan Ringkasan Artikel Blogger di Facebook

Habib Bin Hilal - 09.18
Pernahkah anda melihat teman atau kolega anda membagikan tautan sebuah artikel di Facebook dan tertampilkan tidak hanya alamat URL saja tetapi juga ringkasan artikel tersebut pada timeline anda? Ada judul artikel, gambar dan ringkasan isinya. Enak dipandang dan membuat kita tahu apa kira-kira isinya. Jika gambar dan judulnya menarik, biasanya akan mengundang orang untuk meng-klik dan membaca artikel tersebut.

Ketika membuat blog ini, saya juga mencari tahu bagaimana artikel atau pos di blog kita bisa tampil dengan elegan di Facebook (atau media sosial lainnya) dengan manis lengkap dengan ringkasan judul, gambar dan isinya.

Open Graph Meta


Jawaban dari itu semua terletak pada kode meta html yang mengikuti skema protokol OpenGraph. Kode ini harus ada pada bagian head (kepala) kode html dari artikel kita. Intinya, kode inilah yang memberitahu Facebook, twitter atau Google+ atau media sosial lainnya apa yang menjadi ringkasan dari setiap halaman web. Kode tersebut biasanya dimulai dengan og:. Penjelasan lengkap mengenai kode meta OpenGraph bisa dilihat di situs resmi: http://OGP.me/

Blog Blogger Menerapkan Protokol Open Graph


Blog Blogger sendiri, sejak awal 2014 ini juga telah menerapkan protokol Open Graph. Alhasil, para pengguna Blogger di blogspot.com bisa menambahkan kode yang akan membuat artikel mereka tampil manis di Facebook saat dibagikan tautannya.

Berikut ini adalah contoh kode meta yang bisa disisipkan pada bagian head dari template situs Blogger anda. Anda bisa menyunting kode html dari template situs Blogger melalui menu pengelolaan: Template > Edit HTML yang ada pada bagian bawah dari preview Live on Blog.

Kode Meta Open Graph untuk Cetakan Blogger 

<link href='URL_Halaman_Google_Plus_Anda' rel='author'/>
<meta content='en' http-equiv='Content-Language'/>
<meta content='Kata_Kunci_Sini' name='keywords'/>
<meta content='Nama_Pembuat_Blog_Sini' name='author'/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
expr:content='data:blog.pageTitle' property='og:title'/>
expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
expr:content='data:blog.pageName' name='twitter:title'/>
expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta content='
URL_Halaman_Twitter_Anda_Sini' name='twitter:domain'/>
expr:content='data:blog.canonicalUrl' property='og:url'/>
expr:content='data:blog.canonicalUrl' name='twitter:url'/>
expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='
URL_Gambar_Ikon_Blog_Sini' property='og:image'/>
<meta content='
URL_Gambar_Ikon_Blog_Sini' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
expr:content='data:blog.metaDescription' name='og:description'/>
expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta content='
Nomor_FB_App_ID_Anda_SiniYour_FB_App_ID_Here' property='fb:app_id'/>
<meta content='summary' name='twitter:card'/>
<meta content='@
Nama_Pengguna_Twitter_Blog_Sini' name='twitter:site'/>
<meta content='@
Nama_Pengguna_Twitter_Pembuat_Blog_Sini' name='twitter:creator'/> 


Kode di atas adalah untuk tampilan di Facebook, Twitter dan Google+. Facebook dan Google+ menggunakan kode Open Graph yang sama, sementara Twitter berbeda. Jika anda tidak memiliki akun twitter, anda bisa menghilangkan dua kode meta terakhir. Nomor FB App ID juga tidak harus dicantumkan jika anda tidak memilikinya.


Berikut ini adalah tangkapan layar yang menunjukkan di mana kode tersebut harus disisipkan pada kode HTML template Blogger anda:


Mengecek Tampilan Artikel Saat Dibagikan di Facebook


Facebook memiliki layanan untuk mengecek validasi atau keabsahan dari kode meta Open Graph yang ada pada setiap situs web. Dengan layanan ini, kita bisa mengecek artikel dan keberhasilan kita menambahkan kode meta OGP di atas.

Silakan kunjungi: Open Graph Object Debugger dan masukkan alamat URL artikel atau situs anda. Klik tombol: Fetch New Scrape Information dan data meta OGP yang terbaca oleh Facebook akan tertampilkan. Facebook akan menampilkan peringatan atau error jika terjadi kesalahan. Ditampilkan juga pada hasil debug tersebut tampilan jika kita membagikan URL halaman artikel atau situs tersebut lewat Facebook. Anda juga bisa mencoba men-share-nya secara langsung.


5 comments:

  1. kok di blog saya gk kedetek "Apkbaru.net does not have Facebook Open Graph Meta Tags!"!!!
    itu kenapa ya bang???

    BalasHapus
  2. bisa anda jelaskan tentang cara lengkapnya??????????????

    BalasHapus
  3. Nah ini yang saya cari.
    Kadang tampilan preview saat share ke sosmed suka aneh-aneh yang muncul, bikin gak pede lagi nulis artikel.

    Makasih mas, saya coba.

    BalasHapus
  4. saya mengalaminya mas, akan saya coba semoga berhasil yaaa

    BalasHapus
  5. Artikel anda sangat menarik, sangat memberikan informasi penting
    saya sangat menunggu artikel anda yang selanjutnya
    Bandar togel Hongkong

    BalasHapus