Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id - Hallo sobat blogger yang berbahagia Home of Technology, bertemu kembali dengan saya, Posting yang saya unggah pada kali ini adalah Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tutorial-blogger, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih belajar. baiklah, selamat membaca.

Judul : Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id
link : Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id

Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id

Fitur yang satu ini tentunya akan selalu di gunakan pada setiap website / blog, yang sering digunakan untuk memberitakan informasi terbaru dan terupdate kepada pelanggannya dengan cepat dan mudah. Lalu kenapa harus di buat menarik ?

Share artikel / konten sama halnya dengan anda membuat suatu iklan yang berupa informasi, sebagian survey untuk iklan jenis Text saja, akan membuat pengunjung tidak tertarik. Tetapi bisa Artikel / konten yang anda share mempunyai Judul, Gambar , dan Deskripsi yang menarik pastinya pengunjung akan sering mengunjungi situs anda.

Apakah berguna ?, tantunya dan pasti akan sangat berguna untuk blog anda.

Secara umum tombol share yang diberikan pada template default blogger hanya mempunculkan text saat share artikel, seperti dibawah ini :

Bagaimana cara agar tampilannya terlihat menarik saat di share ?

Ikuti Petunjuk di bawah ini :

Open Graph Meta

Jawaban dari itu semua itu 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

Sejak awal 2014 ini juga telah menerapkan protokol Open Graph. dan 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;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta 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'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta 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;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta 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'/>

Script 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.

Mengecek Tampilan Artikel Saat Dibagikan di Facebook

Layanan 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.

Kunjungi Site : 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.

Berikut tampilan jika sudah berhasil agar artikel yang di share terlihat menarik di facebook.

Mudahkan ?, sekarang giliran anda yang mencobanya.

Demikianlah Artikel Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id

Sekianlah artikel Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Informasi Teknologi Cara merubah tampilan menarik share artikel ke facebook dengan open graph, homitech.blogspot.co.id dengan alamat link https://homitech.blogspot.com/2015/02/informasi-teknologi-cara-merubah.html

Tweet