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>
- 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 :
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 -->Kode berwarna merah silahkan di setting sendiri.
<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 == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title' property='og:description'/>
</b:if>
</b:if>
<!-- end open graph -->
- 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 -->Selesai. Selamat Mencoba sobat.
<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 == "item"'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title' name='twitter:description'/>
</b:if>
</b:if>
<!-- end Twitter Cards -->
Halo juragan kali ini saya mau membagikan sebuah meta tag open graph dari facebook yang valid HTML5 untuk blogspot. pada artikel ini saya ak...
