Kamis, 20 Agustus 2015

Mengubah Template Blogger Agar Valid HTML5 (Bagian Pertama)

Kamis, 20 Agustus 2015
Mengubah Template Blogger Agar Valid HTML5 (Bagian Pertama) - Template yang saya pakai ini valid HTML5 100%, tidak ada satu error-pun yang dibiarkan ada. Dan itu saya lakukan hanya karena ketertarikan, bukan karena menganggap bahwa HTML5 telah menjadi sesuatu yang penting. Bagaimana mungkin saat ini saya menganggap HTML5 penting sedangkan widget-widget Blogger saja masih banyak yang belum valid HTML5.

 Memang, ada beberapa referensi yang menjelaskan tentang pentingnya menggunakan HTML5 ini. Intinya sebagai berikut :
  1. Membantu Search Engine mengindeks dokumen website/blog lebih baik.
  2. Render browser lebih baik dan lebih cepat
  3. Document Object Model (DOM) menjadi lebih stabil dan konsisten
  4. Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
  5. Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
  6. Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari HTML5 ini.
Template-template Blogspot atau Blogger yang dibuat menggunakan sintaks html4 ke bawah tentu tidak akan valid atau akan muncul notifikasi error bila dicek oleh situs-situs HTML5 Validation Checker. Jadi harus dilakukan modifikasi atau konversi bila ingin berformat HTML5. Dan pada artikel bagian pertama ini saya akan menjelaskan hal-hal yang umum terlebih dahulu.
Karena penggunaan HTML5 belum menjadi sesuatu yang penting, maka saya menyarankan agar anda melakukannya lebih karena dorongan ingin bereksperimen atau mengeksplorasi. Jadi siapkan saja satu atau dua blog baru sebagai dummy. Pada blog dummy itulah anda melakukan berbagai eksperimen modifikasi hingga dicapai hasil maksimal. Dan setelah itu baru diterapkan pada blog utama.

Modifikasi 1
Cari dan ubahlah sintaks berikut :

<?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>

menjadi :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

Modifikasi 2

Cari dan ganti sintaks ini :

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

menjadi :

<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<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.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='isi dengan deskripsi blog anda' name='description'/>
<meta content='isi dengan keyword blog anda' name='keywords'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='ID-BT' name='geo.region'/>
<meta content='-0.789275;113.921327' name='geo.position'/>
<meta content='-0.789275, 113.921327' name='ICBM'/>
<meta content='isi dengan nama anda' name='author'/>
<meta content='index,follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>

Catatan : Ini bagian yang sangat penting untuk SEO OnPage. Saya mencantumkan yang menjadi standar minimalnya saja. Nanti anda bisa menambahi sendiri meta tag yang lain sesuai kebutuhan.

Modifikasi 3

Cari dan ganti sintaks berikut :

<b:skin><![CDATA[

menjadi :

&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]

Modifikasi 4

Hapus semua kode berikut : <b:include name='quickedit'/> dan <a expr:name='data:post.id'/>

Modifikasi 5

Cari dan ganti sintaks ini :

<b:include data='post' name='postQuickEdit'/>

menjadi :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + 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>

Modifikasi 6

Cari dan hapus sintaks ini bila ditemukan : <div class='post-share-buttons goog-inline-block'>...hingga...</div>

Modifikasi 7

Ganti semua code & dengan &amp;

Modifikasi 8

Ganti </html> menjadi </HTML>

Sampai di sini anda telah mem-validasi area homepage blog anda hingga valid HTML5. Bila divalidasi di sini mungkin masih akan ditemukan beberapa error untuk komentar, gambar, thumbnail, dan video. Nanti akan kita lanjutkan pembahasannya pada tulisan bagian kedua.



Demikianlah artikel dari Kontakmedia yang berjudul Mengubah Template Blogger Agar Valid HTML5 (Bagian Pertama), semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.