1. Pengertian Sitemap
Sitemap adalah salah satu alat bantu untuk mempermudah google menjelajahi dan meraih halaman-halaman yang ada di dalam sebuah blog atau website. Dengan kata lain sitemap membantu mesin pencari mendeteksi konten dalam sebuah blog dengan mudah.
Dalam sistem sitemap ini pengguna dapat melakukan submit sitemap berbasis XML langsung ke Search Engine Google yang akan membantunya mengindeks halaman blog/web dengan mudah.
Jika sobat masih bingung, istilah sederhana sitemap adalah daftar isi sebuah blog. Semua artikel/konten yang telah sobat buat akan terlihat dalam sitemap dalam tampilan lebih simpel. Daftar isi ini sangat penting agar pengunjung ataupun mesin pencari tidak kesulitan dalam menemukan konten sebuah blog.
Sitemap itu berupa file XML yang berisi URL sebuah situs beserta medata masing-masing. Medata inilah yang akan memudahkan search engine untuk meng-crawl atau melakukan perayapan website/blog.
Sitemap yang sobat tambahkan di google webmaster tools memudahkan google untuk peng-indeks-an. Namun belum tentu setiap halaman akan terindex Google. Webmaster juga bahkan bisa membantu Sobat untuk mendeteksi jika ada url yang error sehingga bisa cepat diperbaiki. Laksana asisten pribadi sobat dalam urusan ngeblog.
2. Manfaat Sitemap
Telah disinggung diatas bahwa sitemap memiliki peran yang cukup penting dalam sebuah blog, yaitu sebagai berikut:
3. Membuat Sitemap
Sebenarnya di blogger itu sendiri sudah dilengkapi dengan widget Archive. Widget ini mirip daftar isi yang memuat seluruh artikel berdasarkan waktu publish. Namun karena dikemas dalam bentuk widget, estetikanya kurang dan kustomisasinya terbatas.
Oleh karena itu, KupasAbis akan berbagi tutorial tentang bagaimana cara membuat sebuah halaman khusus sitemap (daftar isi) blog yang keren tampilannya dan mudah dikustomisasi.
Beberapa kelebihan sitemap yang akan kita buat:
Sitemap adalah salah satu alat bantu untuk mempermudah google menjelajahi dan meraih halaman-halaman yang ada di dalam sebuah blog atau website. Dengan kata lain sitemap membantu mesin pencari mendeteksi konten dalam sebuah blog dengan mudah.
Dalam sistem sitemap ini pengguna dapat melakukan submit sitemap berbasis XML langsung ke Search Engine Google yang akan membantunya mengindeks halaman blog/web dengan mudah.
Jika sobat masih bingung, istilah sederhana sitemap adalah daftar isi sebuah blog. Semua artikel/konten yang telah sobat buat akan terlihat dalam sitemap dalam tampilan lebih simpel. Daftar isi ini sangat penting agar pengunjung ataupun mesin pencari tidak kesulitan dalam menemukan konten sebuah blog.
Sitemap itu berupa file XML yang berisi URL sebuah situs beserta medata masing-masing. Medata inilah yang akan memudahkan search engine untuk meng-crawl atau melakukan perayapan website/blog.
Sitemap yang sobat tambahkan di google webmaster tools memudahkan google untuk peng-indeks-an. Namun belum tentu setiap halaman akan terindex Google. Webmaster juga bahkan bisa membantu Sobat untuk mendeteksi jika ada url yang error sehingga bisa cepat diperbaiki. Laksana asisten pribadi sobat dalam urusan ngeblog.
2. Manfaat Sitemap
Telah disinggung diatas bahwa sitemap memiliki peran yang cukup penting dalam sebuah blog, yaitu sebagai berikut:
- Memudahkan pengunjung dalam mencari konten. Dalam hal ini sitemap berperan sebagai alat navigasi yang membantu pengunjung untuk menemukan artikel dengan lebih cepat.
- Memudahkan pengunjung untuk mencari artikel yang berkaitan, atau related post. Pasalnya, di dalam sitemap biasanya sudah dikelompokkan berdasarkan kategori atau label masing-masing konten.
- Blog disukai google. Blog yang dilengkapi sitemap sangat disukai google, pasalnya konten mudah di indeks dan mudah dirayapi atau di crawl.
Mengingat pentingnya peran sitemap, maka sobat wajib membuatnya untuk melengkapi blog sobat.
Caranya gimana? Tenang sob, simak aja penjelasan selanjutnya.
3. Membuat Sitemap
Sebenarnya di blogger itu sendiri sudah dilengkapi dengan widget Archive. Widget ini mirip daftar isi yang memuat seluruh artikel berdasarkan waktu publish. Namun karena dikemas dalam bentuk widget, estetikanya kurang dan kustomisasinya terbatas.
Oleh karena itu, KupasAbis akan berbagi tutorial tentang bagaimana cara membuat sebuah halaman khusus sitemap (daftar isi) blog yang keren tampilannya dan mudah dikustomisasi.
Beberapa kelebihan sitemap yang akan kita buat:
- Responsif dan Update otomatis
- Tampilan bisa pilih simpel dan keren
- Ringan, tidak memberatkan loading blog
- Fast Loading
- Artikel dikelompokkan per label
- 100% SEO friendly
- Valid HTML 5
- Valid CSS
- Tanda tulisan "new" pada postingan paling baru
Cara Membuat Sitemap atau Daftar Isi Blog
Kita akan membuat sitemap berupa halaman atau page statis. Berikut adalah tutorial membuat halaman khusus untuk sitemap blog.
1. Login ke Dashboard Blogger, pilih Pages atau halaman, kemudian pilih New Page atau halaman baru, agar tampil jendela halaman baru
2. Ketik sitemap atau daftar isi pada kolom Judul.
3. Pada kolom post editor klik mode HTML. Kemudian masukkan script sitemap berikut ini pada Post Editor. Script dibawah ini saya kutip dari duarupa.blogspot.co.id. Jika sudah beres, klik Publish untuk merilis halaman.
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/teknomia/sitemap/95c4a4a6/sitemap-blogtoc.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Script Sitemap Keren Mas Tamvan
<div class='jontor'>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
Setelah script pilihan sobat di paste, kemudian di publish. Sobat bisa langsung melihatnya.
Sampai disini sobat telah berhasil membuat sitemap yang keren. Selanjutnya tinggal submit sitemap ke webmaster tools. Selamat ngeblog sob.
Kita akan membuat sitemap berupa halaman atau page statis. Berikut adalah tutorial membuat halaman khusus untuk sitemap blog.
1. Login ke Dashboard Blogger, pilih Pages atau halaman, kemudian pilih New Page atau halaman baru, agar tampil jendela halaman baru
2. Ketik sitemap atau daftar isi pada kolom Judul.
- Script Sitemap Sederhana Abu Farhan
Karena desainnya yang sangat sederhana dan ringan, waktu load sitemap ini pun sangat cepat.
<script style="text/javascript" src="https://cdn.rawgit.com/teknomia/sitemap/eded6943/sitemap-sederhana.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
- Sitemap (Daftar Isi) BlogToC Arlina Design
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/teknomia/sitemap/95c4a4a6/sitemap-blogtoc.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
- Sitemap Blog Keren Fast Responsive Mas Tamvan
Script Sitemap Keren Mas Tamvan
<div class='jontor'>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
Setelah script pilihan sobat di paste, kemudian di publish. Sobat bisa langsung melihatnya.
Sampai disini sobat telah berhasil membuat sitemap yang keren. Selanjutnya tinggal submit sitemap ke webmaster tools. Selamat ngeblog sob.
Post a Comment
Post a Comment