Melanjutkan pembahasan pada artikel sebelumnya tentang Mengatasi Masalah Not valid HTML5 pada kesempatan ini saya akan mengulas lebih jauh dan jelas lagi tentang cara Membuat Blog Menjadi Valid HTML5. Banyak template blogger yang tidak valid dengan markup HTML5. yang sebabkan oleh beberapa faktor salah satunya adalah penempatan kode yang tidak benar.
Dan tahukah anda beberapa orang mengatakan kalau template blog kita valid, maka akan berpengaruh terhadap SEO. apa benar..?? saya kurang tahu karena saya bukan ahli SEO. Disini kita hanya akan belajar mengurangi eror template agar valid dengan HTML5. Sebelum berlanjut coba kita periksa dulu seberapa besar eror template anda, silahkan check dulu disini.
Template yang saya pakai pun tidak cocok dengan validasi HTML5 masih banyak pesan kesalahan, apalagi harus valid CSS3 mungkin ratusan error yang ditemukan. Tapi tidak ada salahnya kita mencoba mempelajarinya sebagai penambahan ilmu.
Perlu diketahui Template Blogger yang valid hanya pada halaman homepage atau halaman depan blog. dan tutorial ini hanya untuk mengurangi sebagian belum sepenuhnya di semua halaman.
Faktor penyebab:
- Meta tag yang berlebihan yang tidak semua metag di terima HTML5
- Widget standar blogger (terutama follower).
- Posting yang tampil di homepage.dengan snippet.
- Gambar post atau home page.
- Pemasangan CSS kurang tepat. Bisa anda baca DISINI
- dan lain-lain
Bagaimana cara mengatasi permasalahan tersebut di atas dan agar blog kita Valid HTML5. Ikutilah tahap-tahapan nya berikut ini :
Tahap Pertama :
Mengedit HTML di dalam Post,1. Tambahkan "Alt" di dalam gambar agar bisa dibaca oleh search engine robots.
Bungkus kode image dan berikan atrribut Tag />
contoh :
<a href="URL Anda"><img alt="caption pictures"
src="http://ajatshare.blogspot.com/gambar.png"/></a>
2. Hilangkan kode imageanchor pada tag img.
Hilangkan kode border pada tag img.
3. Sebelum melakukan perubahan pada template, backup dulu template anda beserta widgetnya.
4. Untuk sementara hapus dulu semua widget anda.
Hal ini dilakukan agar tidak terjadi kesalahan pada saat di check oleh validator.
Tahap Kedua :
Mengganti kode template lamaGanti Code HTML
1. Ganti Kode:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
<head>
dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
2. Ganti kode :
<b:include name='nextprev'/>
dengan,
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
3. Ganti kode :
</html> dengan </HTML>
4. Ganti semua garis yang ada dalam kode css
/*-----Header------*/ menjadi /* Header */
Tahap Ketiga :
Menghapus kode yang ada dalam templateHapus Code HTML
1. Hapus kode ini:
<div class='post-share-buttons goog-inline-block'>
kode lain...
</div>
2. Hapus Kode ini:
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a>
</span>
</b:if>
</b:includable>
3. Hapus Kode ini:
<body><div></div>
4. Hapus Kode ini:
<b:include name='quickedit'/>
<b:include data='blog' name='all-head-content'/>
Tahap Keempat :
Hindari penggunaan widget berikut ini
1. Hindari Tag <center> karena HTML 5 tidak Support 5.
2. Hindari pemasangan widget :
- Google+ Followers
- Pengikut
- Share Button
- Statistic (Penghitung jumlah pengunjung)
Itulah 4 (empat) tahapan Membuat Blog jadi Valid HTML5, semoga berhasil
Catatan :
Check Validasi agar template valid HTML5 hanya untuk halaman utama (homepage) saja.
Dan tidak bisa dilakukan pada template yang homepage berisi halaman penuh artikel.
0 comments:
Post a Comment