Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly
Blog yang baik pada saat ini berbeda dengan masa yang dahulu, yaitu yang dapat memberikan kebutuhan informasi berdasar pada pertanyaan yang mereka ajukan. Bukan hanya dapat memberikan jawaban, tapi dapat membuat mereka kembali suatu saat ketika mereka mendapat masalah baru. Itu semua akan kita cakup dengan cara bagaimana Membuat Blog yang Ringan, Valid HTML5, dan SEO Friendly.
Satu lagi yang menjadi pertimbangan bahwa blog tersebut merupakan blog yang baik, yaitu mampu membuat pengunjung betah berlama-lama berada di blog tersebut.
Selain itu, Mesin pencari akan mencatat waktu yang dihabiskan oleh pengguna blog ketika berkunjung, hal itu diukur menjadi tingkat kepuasan pengunjung. Dan parameter yang baik oleh tingkat kepuasan pengunjung akan otomatis berpengaruh pada peringkat di mesin pencarian.
Blog yang baik akan mencakup 4 kriteria berikut :
- Tata letak Desain halaman blog yang jelas, tidak membingungkan pengguna terdiri dari struktur dan navigasi yang jelas, serta font maupun gambar mudah dilihat dan dibaca
- Kecepatan loading halaman blog, ringan dan tidak dipenuhi oleh widget yang kurang berguna bagi pengguna.
- Strukturnya valid HTML5, penulisan kode syntax nya sesuai dengan aturan dari W3C
- SEO Friendly dimata mesin pencarian, baik Google maupun yang lainnya.
Membuat Blog yang Ringan
Blog yang ringan tentu saja akan mempengaruhi pada kecepatan loading blog. Hal itu wajib diterapkan untuk meningkatkan peringkat dimata mesin pencarian dan tentu saja akan memuaskan pengunjung yang datang pada blog kita.
Yang harus kita ingat,
Kepuasan Pengunjung adalah prestasi besar dimata Search Engine
Tidak semua, bahkan hampir semua pengguna rela dengan sabar menunggu blog dengan loading yang lambat, tentu saja mereka berpotensi besar akan meninggalkan blog kita untuk menuju blog yang lebih cepat untuk menemukan jawaban permasalahan mereka.
Untuk mengetahui kecepatan blog kita gunakan : Google Page speed
Google akan menampilkan permasalahan tentang kecepatan blog kita, secara detail akan dijabarkan satu per satu apa saja yang menghambat kecepatan loading blog. Namun salah satu yang paling kursial biasanya mengenai javascript render blocking dan css.
Selain itu, terdapat juga javascript dan css bundle bawaan default blogger, yang sebenarnya tidak kita perlukan untuk blog ktia.
Untuk menghapus javascript dan css bundle, masuk ke edit HTML template blog dengan menggunakan Ctrl + F cari kode </body> kemudian ubah menjadi
<!--</body>-->
Untuk menghilangkan CSS bundle, cari kode <head> , ganti dengan
<head>
Kemudian cari kode </head> lalu ganti dengan
<!--<head/>-->Bila blog sudah terdapat adsense maka yang dipakai
<!--<head/>Cari kode <b:skin> ganti dengan
<style><!-- /*Sebagai Tambahan, hapus widget dari template blog yang tidak terpakai.
Membuat Blog Valid HTML5
Untuk meningkatkan peringkat di halaman pencarian, salah satu parameter yang dipakai adalah blog yang valid HTML5.
Untuk menguji valid tidaknya template blog kita yang sekarang, gunakan W3C Validation Service
1. Masukkan alamat url blog kolom Address
2. Klik tombol check
Dari hasil akan ditampilan elemen mana yang error dan merupakan warning. Dari hasil itu kita dapat memperbaiki satu persatu. Karena hasilnya akan sangat beragam tergantung dari template masing-masing blog maka penanganannya akan sangat bervariatif tergantung pada masalahnya.
Kali ini kita akan hanya akan membahas Meta Tag blog seo friendly yang valid HTML5.
Tambahkan kode berikut diantara kode <head></head>, bila terdapat kode
<b:include data='blog' name='all-head-content'/>Hapus dan ganti dengan
<meta charset='UTF-8'/>
<b:if cond='data:blog.pageType != "error_page"'>
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "name": "<data:blog.title/>","alternateName": "<data:blog.title/>", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term_string}", "query-input": "required name=search_term_string" } }</script>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-0PTOPKdnFLE/YBC3i_-D7cI/AAAAAAAADOs/-zVf0AElQY8gWbLDn9C0IDmcMZ5M2c4NgCLcBGAsYHQ/s320/(ganti dengan logo blog kamu)' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:view.isMultipleItems'>
<meta content='https://1.bp.blogspot.com/-0PTOPKdnFLE/YBC3i_-D7cI/AAAAAAAADOs/-zVf0AElQY8gWbLDn9C0IDmcMZ5M2c4NgCLcBGAsYHQ/s320/maIslamkreatifIndonesia.jpg' name='twitter:image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 640)' itemprop='image'/>
</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 cond='data:blog.url != data:blog.homepageUrl'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='(ganti dengan keyword blog)' name='keywords'/>
</b:if>
<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'/>Ganti parameter yang diblok warna merah, disesuaikan blog masing-masing.
Kode diatas akan menambahkan :
- Meta deskripsi dan keyword Blog
- Favicon untuk blog
- Struktur Sitelink pada Search Engine untuk halaman hasil kaya google
- feeds RSS dan Atom
- generator Blogger
- Halaman canonis untuk menghindari duplikat konten
- openid untuk berkomentar
Membuat Blog SEO Friendly
Yang diperlukan blog yang SEO Friendly sangat banyak sekali tolak ukurnya, bukan hanya bertumpu pada artikel dan riset keyword saja, tetapi juga pada struktur halaman template blog yang menjadi pertimbangan.
Bagian ini sama halnya dengan parameter diatas, banyak sekali variabelnya. Untuk mempersempitnya maka kita hanya membahas mengenai salah satu yang terpenting sebagai identitas blog artikel kita untuk mesin pencari dan pengguna. Yaitu Title Tag.
Cari kode :
<title><data:blog.title/></title>Kemudian ganti dengan kode berikut :
<b:if cond='data:view.isHomepage or (data:view.isSearch and !data:view.isLabelSearch and !data:blog.searchQuery)'>
<title><data:view.title.escaped/></title>
<meta expr:content='data:view.title' property='og:title'/>
<meta expr:content='data:view.title' property='og:image:alt'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:view.title' name='twitter:image:alt'/>
<b:elseif cond='data:view.isSingleItem or data:view.isSearch or data:view.isArchive'/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:title'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:image:alt'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:image:alt'/>
<b:elseif cond='data:view.isError'/>
<title>Page Not Found - <data:blog.title/></title>
<meta expr:content='"Page Not Found - " + data:blog.title' property='og:title'/>
<meta expr:content='"Page Not Found - " + data:blog.title' property='og:image:alt'/>
<meta expr:content='"Page Not Found - " + data:blog.title' name='twitter:title'/>
<meta expr:content='"Page Not Found - " + data:blog.title' name='twitter:image:alt'/>
<b:else/>
<title><data:view.title/></title>
<meta expr:content='data:view.title' property='og:title'/>
<meta expr:content='data:view.title' property='og:image:alt'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:view.title' name='twitter:image:alt'/>
</b:if>