Shizenku Blog

Informasi unik, populer dan menarik lainnya

Open graph facebook valid HTML5 untuk blogspot

Halo juragan kali ini saya mau membagikan sebuah meta tag open graph dari facebook yang valid HTML5 untuk blogspot. pada artikel ini saya akan menjelaskan fungsi dari meta tag open graph ini dan beberapa meta tag yang bisa dipasang di blog sahabat blogger semuanya. Berikut ini penjelasannya, Open Graph adalah sebuah protokol yang memungkinkan halaman situs web bisa menjadi objek yang bisa tampil lebih menarik di sosial media facebook. Sebagai contohnya blog atau artikel sahabat blogger bisa memiliki fungsi yang sama seperti sesuatu yang ada di facebook. Penggunaan protokol open graph ini didasarkan pada sebuah teknologi yang ada untuk memberikan para pengembang satu hal untuk dilaksanakan. Nah, supaya blog sahabat blogger bisa berubah menjadi objek grafik maka kalian harus menambahkan meta tag open graph ini ke dalam halaman situs. Beberapa meta tag open graph yang wajib atau harus ada yaitu title, type, image dan url. Protokol Open Graph awalnya diciptakan di facebook dan terinspirasi oleh Dublin core, link-rel canonical, Microformats, dan RDFa. Dan diperbaharui pada tanggal 18 November 2012. Jika kalian ingin lebih tahu lebih lanjut tentang opengraph kalian bisa mengunjungi halamannya di bawah ini.
ogp.me

Sekarang sudah paham belum tentang open graph facebook ini. Jika belum silahkan berkomentar di bawah. Berikut ini panduan cara pemasangannya :
- Pertama kalian login terlebih dahulu di blogger
- Klik menu template
- Setelah itu klik menu edit html
- Tambahkan protokol open graph di bawah ini dan taruh di bawah kode <head>
<!-- open graph -->
<meta content='id_id' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='profile id sobat' property='fb:admins'/>
<meta content='profile id sobat' property='fb:profile_id'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='website' property='og:type'/>
<meta content='Masukkan url gambar sobat disini usahakan resolusi gambarnya 200x200' property='og:image'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='Selamat datang di Shizenku Blogspot yang membahas seputar Panduan SEO dan Gaming, Tutorial Blogging, Tips n Trik, dan info menarik lainnya.' property='og:description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' property='og:description'/>
</b:if>
</b:if>
<!-- end open graph -->
Kode berwarna merah silahkan di setting sendiri.
- Lalu klik simpan template.

  Untuk mengeceknya sahabat blogger bisa mengunjungi link di bawah ini. tetapi sobat diharuskan untuk login telebih dahulu di facebook.
Debugger - Facebook Developers
Setelah kalian sudah membuka halaman di atas silahkan masukkan url blog sobat di kotak Masukkan URL, Acces Token, atau ID Tindakan Open Graph dan sobat lihat bagaimana apakah ada error atau warning. Jika ada error biasanya ada peringatan berwarna merah, jika ada warning ada peringatan berwarna orange.

Sekarang saya mau menambahkan lagi isi artikel ini yaitu cara memasang protokol twitter card valid HTML5. Fungsi dari twitter card ini hampir sama dengan open graph yaitu untuk membuat tampilan blog saat di share di twitter terlihat lebih menarik. Untuk info selanjutnya silahkan kunjungi halamannya di bawah ini, tetapi kalian harus login terlebih dahulu di twitter.
Twitter Card - Twitter Developers
Berikut ini kode meta tag Twitter Card :
<!-- Twitter Cards -->
<meta content='summary' name='twitter:card'/>
<meta content='Shizenku' name='twitter:site'/>
<meta content='@Shizenku' name='twitter:creator'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta content='Selamat datang di Shizenku Blogspot yang membahas seputar Panduan SEO dan Gaming, Tutorial Blogging, Tips n Trik, dan info menarik lainnya.' name='twitter:description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='twitter:description'/>
</b:if>
</b:if>
<!-- end Twitter Cards -->
Selesai. Selamat Mencoba sobat.

20 komentar : Open graph facebook valid HTML5 untuk blogspot

Diposting oleh 

saya baru denger open graph mas, hehe

tips yang menarik sob saya kira ini cara aman kalo memakai javascript untuk facebook dan g+ saya rasa steal cookie akun kita bisa diambil orang :) kadang saya pribadi sungkan untuk berkunjung ke blog yang pakai script konek ke akun lain tdk pake API atau opengraph

Diposting oleh 
 · Admin mengatakan...

@Intan Sudibjo : Oh gitu ya gan, .padahal dah lama lho, .tahun 2012 he he. .

@sopyan nurcahyana : Iya gan ,.bahaya juga ya, ..

Wah saya nggak tahu mas tentang open graph ini. Tambah pengetahuan baru buat saya ini :)

Diposting oleh 
 · Admin mengatakan...

@Andre Kocak : Ok gan, .sip ^_^
@Wahyu Eka Prasetiyarini : Ok mbak, .makasih atas kunjungannya, .:D

Diposting oleh 

Bagus nih, tapi bikin blog jadi berat gk ya...??? saya coba dulu aja deh...

Diposting oleh 
 · Admin mengatakan...

@Yobert Parai : Ya gx lah gan, .masak bikin berat sih, .kan sama aja seperti memasang meta content. .:D

Diposting oleh 

Wih master berbagi ilmu open graph yang berbabu HTML5 nih hehe :) nice info teman ^^

Diposting oleh 
 · Admin mengatakan...

@Muhammad Luthfi : Sama-sama. .he he. .mkcih dh berknjung, .:D

Hanya bisa nyimak mas, soalnya terlalu tinggi ilmu nya buat saya :)

Wah sekarang sudah ada iklan adsense nya ya. Luar biasa mas. Semoga bisa cepet dapat $$ ya ^^

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : iya mbak ,.alhamdulilah he he. . moga aja gx ada yg iseng ngebomb klik, .kalo ada langsung ke mbah dukun, .

Diposting oleh 

saya baru tahu ada open graph facebook, mungkin kalo dishare di facebook tampilannya jadi menarik gitu ya mas...
hmmm lumayan banyak scriptnya ya mas :)
nice sharing ^^

Diposting oleh 
 · Admin mengatakan...

@Indri Lidiawati : iya mbak biar tampil menarik di facebook ... :D

Diposting oleh 

ilmu yang bermanfaat kang,,_
saya bookmark dulu kang,,_

Diposting oleh 
 · Admin mengatakan...

@Erick Dozzis : Ok gan, silahkan kalo mo nge-bookmark... :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 
 · Admin mengatakan...

minta bantuan dong, kok di web saya timeslib, setiap klik tombol share, thumbnailnya kecil? gak bisa kayak web lain yang gede2?

@Aditya Andriansyah : aku cek nggak tuh.. thumbnailnya gede kok... :D

Diposting oleh 

iya thumbnail nya emang skarang udah gedhe tapi pas mau share artikel lewat tombol share di bawah artikenya itu gak muncul gambarnya :(

Diposting oleh 
 · Admin mengatakan...

kan yg penting di facebook thumbnailnya gede.. :bingung:

Diposting oleh 

ilmu

Posting Komentar : Open graph facebook valid HTML5 untuk blogspot

Baca dulu Peraturan Berkomentar di Blog Ini ! Supaya komentar anda tak sia-sia. Admin sangat senang jika tidak ada komentar yang mengandung spam :)

.::Peraturan Berkomentar::.

• Gunakan bahasa dan kata-kata yang sopan dan tidak menyinggung semua pihak manapun, baik ketika dilihat anak kecil maupun orang dewasa.
• Usahakan untuk tidak menggunakan kata-kata yang menyinggung RAS, SARA, dan berbau P*RNO.
• Dilarang menaruh link Aktif di dalam kotak komentar.
• Berkomentar Out Of Topic atau Oot saya perbolehkan apabila komentar tersebut berupa pertanyaan penting, asalkan tidak berlebihan dan tidak berbau SPAM!

Komentar akan dibalas paling lambat 3 hari kemudian. Terimakasih atas perhatiannya.
Widgets
Copyright © 2012 . Simo Responsive Template Design oleh . Publisher oleh Shizenku Blog.
Powered by Blogger and AMP ⚡ HTML