Cara Memperbaiki Error Validasi HTML

Tuesday 24 September 2013

Cara Memperbaiki Error Validasi HTML

Untuk mengetahui validasi template blog yang anda gunakan, silahkan gunakan tool markup validation milik W3C di http://validator.w3.org. Masukan URL blog anda pada kolom address kemudian klik check, dan lihat hasil error validasi kode html anda. Berikut ini salahsatu cara untuk memperbaiki error validasi HTML yang sudah saya lakukan:

Masuk ke edit HTML kemudian untuk berjaga-jaga kesalahan saat mengedit template. sebaiknya backup dulu template anda. Tekan tombol Ctrl+f untuk mempermudah anda mencari kode-kode yang nantinya akan di ubah.

Ganti DOCTYPE bawaan blogger, cari kode seperti ini:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

lalu ganti dengan kode ini

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cari kode seperti ini (opsional)

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

lalu hapus kode tersebut dan ganti dengan kode ini:

<!-- Blogger Default Meta -->
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/IDPROFILEANDA' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGGERANDA' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGGERANDA/posts/default' rel='service.post' title='NAMABLOG - Atom' type='application/atom+xml'/>

<link href='http://www.URLBLOG.com/feeds/posts/default' rel='alternate' title='NAMABLOG - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->

Keterangan:
*IDPROFILEANDA= ganti dengan id profil anda.
*IDBLOGGERANDA= ganti dengan id blogger anda.
*URLBLOG= ganti dengan url blog anda
*NAMABLOG= ganti dengan nama blog anda.

Gunakan atribut alt pada setiap penggunaan gambar

Contoh: <img alt='Keterangan Gambar' src='Url Gambar'/>

Temukan semua kode:

 <b:include name='quickedit'/>

kemudian hapus semua kode seperi itu, kode tersebut salah satu penyumbang error yang besar. kode ini yang menampilkan quickedit, dengan gambar simbol obeng dan tang yang biasanya ada di sudut kanan bawah widget blog. Kode <b:include name='quickedit'/> salah satu penyebab Images missing descriptions dan missing titles, ketika anda menambah widget baru, kembali ke edit html dan hapus lagi kode seperti diatas, kalau sudah dihapus semua otomatis link http://img1.blogblog.com/img/icon18_wrench_allbkg.png akan ikut hilang semua semua. Hal ini sudah saya buktikan dan saya cek di chkme.com/page-seo-tools ternyata setelah kode <b:include name='quickedit'/> di template html saya hapus semua Images missing descriptions dan missing titles jadi Zero missing descriptions dan Zero missing titles, sehingga SEO Score for ngabidin.web.id saat ini jadi 100%.

Lakukan tips diatas setiap kali anda menambahkan widget baru, memang cara ini belum begitu efektif. Terkadang dicek di SEOquake Diagnosis maupun chkme.com/page-seo-tools masih sering missing. Alternatif lainnya adalah dengan memasang ALT IMAGE Otomatis di template blog anda.

Caranya:
Copy kode berikut ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[$(document).ready(function() {$('img').each(function(){var $img = $(this);var filename = $img.attr('src')$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});//]]></script><script type='text/javascript'>//<![CDATA[$(document).ready(function() {$('img').each(function(){var $img = $(this);var filename = $img.attr('src')$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});//]]></script>

lalu letakkan tepat diatas kode </body>

Catatan:Jika template Anda sudah ada javascript jquery.min.js versi berapapun maka kode
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> di atas tidak perlukan lagi.

( Script ALT IMAGE Otomatis ini dibuat otomatis berdasarkan nama file asli milik anda sebelum anda upload/posting, maka supaya gambar relevan dengan katakunci (query) hasil pencarian di google maka sebelum upload/posting gambar/foto yang di upload harus di rename sesuai query yang anda inginkan. )

Selanjutnya cari kode </head>
lalu letakan kode 
tepat di bawahnya </head> .
Untuk langkah ini, tidak dapat di lakukan pada tampilan blogger baru, jika anda mencobanya akan terjadi error, template tidak dapat di simpan. jadi anda harus pindah sementara ke tampilan blogger lawas, setelah itu masukan kode diatas. kode diatas berfungsi untuk menghapus navbar blogger, ketika muncul konfirmasi untuk menghapus, klik hapus. setelah itu anda dapat pindah kembali ke tampilan baru blogger.

Hapus post icon, cari kode ini

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>

kemudian ganti dengan kode ini

 <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if> 
</span>
</div>

Kurangi penggunaan dash/strip (-) pada kode html maupun css,

Contoh pada html:

<!--------------- Blogger Default Meta --------------->

Ganti dengan

<!--End Blogger Default Meta-->

/*--------------- Navbar ---------------*/
Ganti dengan

/*Navbar*/

+++++++++++++++++++++++++++++++++
Up Date
bulan Februari 2014
+++++++++++++++++++++++++++++++++

Cara Memperbaiki Error Validasi HTML dengan cara menambahkan markup schema.org
Saat ini mesin penelusuran Google, Microsoft, dan Yahoo! sudah berkolaborasi untuk meningkatkan web dengan membuat kosakata umum untuk mendeskripsikan data di web dengan cara menambahkan markup schema.org ke laman HTML.

Dengan menambahkan markup schema.org kedalam template HTML anda maka mesin penelusuran Google akan memahami data di situs Anda. Demikan juga, apabila Anda menambahkan markup schema.org ke email dengan format HTML, produk email lain sebagai tambahan GMail mungkin akan memahami data tersebut. Anda dapat menggunakan jenis markup yang berbeda untuk mendeskripsikan data dengan kosakata schema.org. Pemandu Markup dapat menunjukkan kepada Anda cara menggunakan microdata dan JSON-LD.

Contoh kerangka dasar template schema.org:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title> <!--judul blog -->
<b:skin><![CDATA[
/* -----------------------------------------------
Blogger Template Style
Name: Kerangka template schema.org
Designer: Ngabidin
URL: http://www.ngabidin.web.id/
----------------------------------------------- */
/*AWAL KODE CSS / SKIN*/
body { kode CSS untuk body */}
#outer-wrapper { /* kode css untuk outer wrapper */}
#header-wrapper {/* kode css header wrapper*/}
#sidebar {/* css untuk block sidebar*/}
#main-wrapper {/*kode css untuk main wrapper dan post*/}
#footer {/* Awal kode css footer wrapper*/}
]]></b:skin><!-- batas akhir css / skin -->
<!-- kode javascripts bisa diletakkan disini -->
</head>
<body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id='outer-wrapper'> <!-- Awal dari Outer Wrapper -->
<header class='header' id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<!-- Judul dan keterangan Blog diletakan disini -->
</header><!-- Akhir dari header -->
<div id='main-wrapper' itemprop='mainContentOfPage'>
<!-- Posting, komentar atau kontent lainnya -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<!-- Ini untuk widget blog sidebar -->
</aside><!-- Akhir dari sidebar -->
<div class='clear'>&#160;</div>
<div class='clear'/> <!-- batas ruang dari outer -->
<footer class='clear' id='site-footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<!-- Ini untuk isi dari footer -->
</footer><!-- Akhir dari footer -->
</div><!-- Akhir dari Outer Wrapper -->
</body><!-- Akhir dari body -->
</HTML><!-- Akhir dari html -->

Supaya valid pada bagian posting (html) pun ikut di rubah, umumnya potongan kode nya seperti ini

<b:includable id='post' var='post'> <div class='post' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>Kode html postinganmu yang sangat panjaaaaaaang sekali ditaruh di sini</div> </b:includable>

Artikel Cara Memperbaiki Error Validasi HTML ini saya posting untuk catatan sebagai pengingat dan koreksi blog pribadi ini.

Sumber:

dari berbagai sumber

Tuesday 24 September 2013

Cara Memperbaiki Error Validasi HTML

70 komentar