Cara Mudah Membuat Blog Valid HTML5
•
Membuat Blog Valid HTML5
Membuat blog menjadi valid HTML5 memang bukanlah sesuatu yang wajib untuk tampil di SERP, tetapi itu adalah praktik terbaik yang sangat dianjurkan. Kode yang valid membantu meningkatkan crawlability, kecepatan halaman, responsifitas, dan aksesibilitas semua faktor yang memengaruhi peringkat di SERP. Dengan mengikuti standar HTML5 dan memastikan kode Anda valid, Anda dapat meningkatkan peluang website Anda untuk mendapatkan peringkat yang lebih baik di hasil pencarian.
Kode HTML5 yang valid membantu mesin pencari memahami konten halaman dengan lebih baik. Ini dapat meningkatkan kemungkinan halaman Anda diindeks secara akurat dan mendapatkan peringkat yang lebih baik. Sementara kesalahan HTML yang signifikan (misalnya, tag yang tidak tertutup atau struktur yang rusak) dapat menyebabkan masalah teknis yang memengaruhi crawlability atau rendering halaman. Maka langkah untuk membuat blog menjadi valid HMTL5 dipandang sangatlah penting.
Cara Agar blog valid HTML5
Baik, sebelum kita menuju ke Membuat blog valid HTML5 atau merubah template alangkah baiknya kita Cek dulu validasi template blog kita ke website validator.w3.org untuk mengetahui apakah blog anda sudah valid HTML5.
Jika Sudah di cek validasi template blog sobat kemudian ikuti langkah-langkah pembenahan berikut ini.
A. Ganti
1. Untuk penulisan DOCTYPE pada template default Blogger biasanya seperti dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>
Hapus semua kode diatas dan ganti dengan kode di bawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<title><data:blog.pageName/> - Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.searchLabel'>
<title>Artikel pada Label - <data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.searchQuery'>
<title><data:blog.searchQuery/> - Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.pageName/> - Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageName == ""'>
<title><data:blog.pageTitle/></title>
</b:if>
<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>jangan lupa untuk penutupnya pada template paling bawah sendiri juga ubah Tag </html> menjadi </HTML>
2. Ganti <b:skin><![CDATA[ dengan kode berikut
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>3. Ganti ]]></b:skin> dengan </style>
4. Hapus dan ganti kode CSS yang menggunakan "----------" atau "=====" biasanya sebagai penanda CSS di bagian <b:skin>, misalnya : /*--------- header ---------*/ silakan hapus tanda tersebut sehingga menjadi /*header*/
B. Hapus
1. Hapus semua kode <b:include data='blog' name='all-head-content'/>
2. Hapus kode kode <b:include name='quickedit'/>
3. Hapus semua kode <a expr:name='data:post.id'/>
4. Cari <b:includable id='postQuickEdit' var='post'>,
<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>hapus, ubah menjadi
<b:includable id='postQuickEdit' var='post'/>5. Tambahkan kode <!-- <body><div></div> --> diatas kode <body>
C. Harap diperhatikan
1. Didalam postingan apabila menyisipkan gambar, selalu tambahkan attribute "alt" contoh kodenya seperti ini <img src="http://gambar.jpg" /> tambahkan alt menjadi seperti ini <img alt="kode gambar" src="http://gambar.jpg" />
2. Selalu gunakan attribute title untuk link yang anda gunakan dalam postingan. Misal <a href="/p/about.html"> tambahkan title menjadi <a href="/p/about.html" title="about me">
3. Pada kode javascript onClick (jika ada), silahkan ganti dengan onclick
4. Apabila menggunakan iFrame, hapus kode frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya deklarasikan di CSS pada <b:skin> menjadi
iframe{border:none;overflow:hidden}5. Hindari penggunaan CSS inline, sebagai gantinya gunakan CSS deklarator. Contoh kode <span class='kode' style='padding:5px;font-family:monospace) sebaiknya untuk CSS style dihapus sehingga hanya menjadi <span class='kode'> dan tulis kembali stylenya ke dalam bagian CSS pada <b:skin> menjadi
kode{padding:5px;font-family:monospace}Jika sudah melakukan semua pembenahan di atas, coba anda cek lagi menggunakan http://validator.w3.org dan sekarang lihat hasilnya.
Demikianlah cara Membuat blog valid HTML5
Agung Jaka Nugraha
Seorang yang suka perkembangan teknologi, blogwalking, dan mendokumentasikannya ke self-library dalam bentuk postingan di blog sejak 2012.