Pada awalnya saya malas menulis artikel ini untuk sobat karena panjang tapi setelah dipikir - pikir akhirnya saya tulis juga artikel ini. Sebenarnya artikel yang berjudul Cara Membuat Blog Valid Html5 sudah sangat banyak di pencarian google, akan tetapi yang satu ini tidak kalah hebat dengan artikel Cara Membuat Blog Valid Html5 di blog lain. Saya akan menjelaskan tentang html5 terlebih dahulu sebelum masuk ke tahap membuat blog valid html5.
Apa itu HTML5? HTML5 adalah pengembang html dari html yang sebelumnya. html5 ini dibuat dengan tujuan untuk memperbaiki teknologi html agar didukung oleh multimedia yang terbaru, mudah dibaca oleh anusia dan juga sangat mudah dimengerti oleh oleh mesin pencari contohnya googlebot, jadi inti dari dibangunnya html5 adalah agar web/blog terbaca sempurna di semua browser dan mudah dipergunakan.
Apa saja keuntungan bagi web/blog jika memvalidasikan html5?
- Membantu seacrh engine mengindeks dokumen blog dengan baik dan benar
- Render browser lebih baik dan cepat
- DOCUMENT OBJECK MODEL ( DOM ) lebih stabil dan konsisten
- Future Proof, yang berarti HTML lebih komplatible, backward complatible terhada browser terbaru
- Mengetahui kondisi web/blog lebih detail ( broken link )
- Lebih disukai browser - browser dan masih banyak lagi keuntungannya
Baguskah validasi Blogspot untuk SEO? Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO.
Cara Membuat Blog 100% Valid HTML5
Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :
<?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>
ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)
Langkah 4 : ganti kode ini :
<b:include data='blog' name='all-head-content'/>
dengan kode di bawah ini :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
Langkah 6 : Hapus semua kode ini :
<b:include name='quickedit'/>
Setiap kali menambahkan widget baru, hapus kode di atas.
Langkah 7: Hapus semua kode ini (opsional)
<a expr:name='data:post.id'/>
Langkah 8 : hapus kode seperti ini :
<b:include data='post' name='postQuickEdit'/>
atau seperti 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>
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>
Langkah 10 : Ganti semua code & dengan &
Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.
Harap Diperhatikan
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :
1. Selalu gunakan tag alt pada gambar, contoh :
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg89dxUDnpyrCX7_DaaHMr58OSP4j9K6atM5q7nhx58Zmly6AwHrX9cLsvu6HM_UKsHvE8LiCjxLAGK4I7X9qwb0ZSJ-VGnO-agyXho0d9Y9L2LBCNahyphenhyphenWhWh7ATQPhX43s1JpOgqXLkF8/s1600/html5.png" />
2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :
atau CSS terpisah seperti
3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti
iframe{border:none;overflow:hidden}
4. Pada tag a jangan menggunakan tag name seperti :
sebagai gantinya gunakan id seperti :
5. Jangan ada dua id pada template.
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.
