Website yang seo frienly merupakan website yang paling disukai oleh pengguna dan juga Google.
Namun tidak semua website itu seo frienly , tergantung template blogger yang di pakai.
Manfaat website yang memiliki kualitas seo frienly yaitu mudah mendapatkan pengunjung , website tersebut akan dengan mudah menduduki di halaman pencarian google.
Secara tidak langsung ketika pengguna mengetikan sebuah kata kunci pencarian , maka halaman pertamalah yang akan menjadi patokan untuk di buka oleh pengunjung.
Lantas bagaimana agar website yang kita kelola bisa menduduki halaman pertama di mesin pencari..
Jawabanya ..
Adalah dengan membuat situs website yang seo frienly.
Buatlah website yang bersifat seo frienly di semua browser , karna pada dasarnya tidak semua pengguna mengunjungi halaman menggunakan Google Chrome ,, terkadang pengguna memakai aplikasi bawaan smartphone yang ia miliki.
Bawaan browser sejenisnya seperti :
Browser bawaan hp.
Firefox.
Opera mini.
Dan juga yang lainya.
Jika situs website yang anda buat bisa mendukung di semua browser dan bersifat seo frienly , responsive , maka situs website anda memiliki nilai yang bagus.
Pada kali ini westoiku ingin membagikan artikel agar website anda menjadi seo frienly , sebenarnya langkah terbaik tanpa ribet tanpa otak atik html adalah dengan menggunakan template blogger yang terbaik.
Cara Membuat Website SEO Frienly Dan Valid HTML 5.
Yuk simak artikel dari westoiku untuk mempelajari html5 pada blogger.
Contoh struktur valid html5
/* westoiku */
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>
Anda mungkin perlu mengecek situs anda , apakah valid html5
Cek disini : W3C Markup Validation Service.
Lalu masukan URL anda , selanjutnya klik " check"
Tag Meta Dasar Pada Template Blogger.
Susunan tag meta dasar pada template blogger adalah sebagai berikut :
Dalam template blogger biasanya akan tersusun tag meta ,,
Seperti :
/* westoiku */
<b:include data='blog' name='all-head-content'/>
Tag meta all head content mempunyai peranan penting untuk mesin pencari.
Seperti :
- Favicon.
- Canonical
- Atom.
- Description.
- Post.
- Dan Thumbnail.
Namun ketika kita menambahkan sebuah tag meta pada baris all head content ketika kita klik "save" akan mengalami error.
Coba anda taruh kode dibagian bawah kode <head>
Penerapanya sebagai berikut :
/* westoiku */
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>
Langkah selanjut supaya tidak terjadi error pada bagian all head content , anda harus mengubah tag meta seperti berikut :
/* westoiku */
<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>
Sehingga akan menjadi susunan seperti ini :
/* westoiku */
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<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>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>
Coba cek kembali melalui tool di atas , seharusnya blog anda sudah valid HTML5.
Tambahan jika anda ingin mengetahui tentang bagaimana cara memasang kode CSS,HTML,JavaScrip pada template blogger anda bisa mempelajarinya di situs westoiku , di situ sudah dibuatkan artikel dan panduanya.
Post a Comment