Selasa, 24 September 2013

Cara Memperbaiki Error Validasi HTML

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 <!-- <body><div></div> -->
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:

38 komentar

in new blogger template nothing look for strict.dtd

thank you for your correction

Makasih gan atas infonya, akhirnya bisa ngilangin "img1.blogblog.com/img/icon18_wrench_allbkg.png" juga dari tampilan blog. Akhirnya seo 100% juga, thanks ya. Salam blogger!

gan gimana cara validasi buat file swf yaaa???

Mantap gan infonya, akhirnya ketemu juga nih.

gw chek di masih gan, mohon pencerahannya

tag: hkmibnu.bogspot.com

gan itu untuk setiap template blogspot atau gimana???
untuk template yang bawaan atau yang udah di ganti pake template yang lain. thanks.

@ M Rudi Pangestu, postingan tersebut untuk template yang masih bawaan blogspot, mungkin sekarang sudah tidak berlaku lagi. Saya sarankan mulai sekarang gunakanlah template yang sesuai dengan schema.org supaya lebih SEO dan mudah dikenali oleh mesin pencari. Apa itu schema.org ???
schema.org adalah kolaborasi oleh Google, Microsoft, dan Yahoo! untuk meningkatkan web dengan membuat kosakata umum untuk mendeskripsikan data di web. Jika Anda menambahkan markup schema.org ke laman HTML Anda, berbagai perusahaan dan produk—termasuk 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. Untuk informasi selengkapnya tentang schema.org, lihat FAQ di https://support.google.com/webmasters/answer/answer.py?answer=1211158

@ hkm ibnu
Artikel diatas sudah saya Update Silahkan dibaca kembali mas ibnu,,

keren infonya, sangat bermanfaat

waaahhh ,, sangat bermanfaat gan !!! Kazegdid

terima kasih gan info nya sangat membantu,soal nya blog saya ini banyak yang eror nya

sudah saya coba. dan hasilnya error validasi htmlnya berkurang.

Akhirnya dapat juga cara yang saya cari, terimakasih untuk sharingnya...! :)

sudah saya coba dan berhasil gan, makasih atas artikelnya...semoga blognya semaki berkembang :)

gan tolong periksa blog saya yg ini: http://bloginfopalingmenarik.blogspot.com/
di validasi erornya banyak,, tapi pas edit template yg error nya kok gak ketemu,, itu knp ya,, bingung,,, email aja jwbannya lewat g mail: lusipuspita93@gmail.com

Terimakasih mas, sekarang blog saya udah mulai bagus validasi html nya :)
Serta SEO nya juga semakin meningkat 10 % :)
Mohon kunjungan baliknya di kolom komentar blog saya ya, ini blognya www.posresep.com

terimakasih infonya mas, nambah pengetahuan di dunia blogger

terimakasih infonya mas, nambah pengetahuan di dunia blogger

Mantap gan :-bd infonya sangat membantu

Caranya gampang, Contoh: klik kanan Nama Anda di halaman komentar ini, pilih salin alamat tautan, jadinya seperti ini : http://www.blogger.com/profile/10708764863841888467
ID Profil Anda adalah : 10708764863841888467

https://lh4.googleusercontent.com/-BZwapTaO2m4/VHIKfIZuH3I/AAAAAAAAGEc/JPd9BZadlTw/w567-h516-no/ID%2BPROFIL.JPG

Keren gan tutorialnya, terimakasih akan saya coba langsung di blog saya perawatan wajah

Makasih infonya gan,
puyeng, blog ane: www.kafkapa.com banyak banget errornya :'(

di update terus gan info2 yang menarik dan bermanfaatnya
terimakasih banyak
sukses terus

Tapi katanya validasi html tidak terlalu penting di thn 2015 ini
makasih atas infonya gan

terimakasih atas panduanyya bang.

Saya msh blom ngeri.. maklum pemula banget tp blog saya error nya sampai 27 buah
Outbound Bogor 

Ya error tersebut kadang harus kita perhatikan juga, terimakasih artikel perbaiki error validasi html nya :)

Lumayan berkurang gan, walau ga 100%... Mantap!!

Silahkan berikan komentar Anda di laman ini.
Tautan (live links) spam dalam komentar akan terhapus secara otomatis.
Jika ingin menyisipkan tautan silakan gunakan tag: <i rel="URL">URL ANDA</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">TEKS JUDUL ANDA DI SINI</b>
Untuk menyisipkan gambar, gunakan tag <i rel="image">Tulis URL GAMBAR Anda di sini </i>
Untuk menyisipkan kode, gunakan tag <i rel="code">Tulis KODE ANDA di sini</i>
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG di sini</i>
Untuk menciptakan efek tebal gunakan tag <b>TEKS TEBAL ANDA DI SINI</b>
Untuk menciptakan efek tulisan miring gunakan tag <i>TEKS MIRING ANDA DI SINI</i>

Toko online busana muslim syar'i, cantik, elegant, stylish, trendy, murah & Grosir.