Tips Buat Blog Valid HTML5! ~ EX-NO YAMI

Kali ini saya akan memberikan tips-tips SEO yg munkin URGENT banget, hanya tips tips memberikan penjelasan yang bisa buat blog anda jadi HTML5 ^_^
Apa itu HTML5? HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML5 agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.

Tips ini membahas cara membuat blog menjadi valid HTML5 dan juga cara memelihara agar tetap valid HTML5.

Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :

Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
Render browser lebih baik dan lebih cepat
DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

Para blogger bisa mengecek apakah blog sudah SEO valid HTML5 atau belum lewat CHKME dan Validator HTML 5

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 : Hapus kode ini :

<b:include data='blog' name='all-head-content'/>

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 &amp;

Langkah 11 : Hilangkan widget navbar

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else { ...sampai...
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>

Langkah 12 : Hapus widget Attribution

<b:widget id="Attribution1" locked="false" title="" type="Attribution">
<b:includable id="main">
<b:if cond="data:feedbackSurveyLink">
</b:if></b:includable></b:widget><br />
<div class="mobile-survey-link" style="text-align: center;">
<data:feedbacksurveylink>
</data:feedbacksurveylink></div>
<div class="widget-content" style="text-align: center;">
<b:if cond="data:attribution != """>
<data:attribution>
</data:attribution></b:if>
</div>
<b:include name="quickedit">
</b:include>

Langkah 13 : Hidden dir="ltr" (Number) Label
Nah terkadang nomor yang ada di label jga menggangu pemandangan ckup menghiddenkan saja. Copy CSS dibawah dan tambahkan diatas ]]></b:skin>

.Label li span {display:none;}.Label li {color:transparent;}

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/AVvXsEi7zl3IligFgKLkWnKki44QGhsAJqQyt4DbTDVDTZyhLlDJsyyvBz0XlV03rQYxt0uyJ80i_vSbCgPODOdBk9Ez8bemdJFFGaGRCu4PKRTRlD98zhJeB0jA-nkaVs-LCQPKn6Js9Y0uY_o/s1600/html5.png" />

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :