Cara Membuat Sitemap di Blogger

Cara membuat sitemap untuk blog - Sitemap atau peta situs adalah suatu laman di blog yang pada umumnya berisi daftar konten atau postingan dari web tersebut. Seiring dengan berjalannya waktu, ada berbagai versi sitemap. 

Mungkin Anda sebagai blogger pemula masih awam mengenai hal ini, maka jangan khawatir karena kami akan menjelaskannya dengan baik. 

Apa fungsi dari sitemap? Tentu saja sebagai sarana untuk memperkenalkan semua postingan ketika kepada para pembaca. Jika disamakan, ini seperti sebuah daftar isi sehingga pengunjung bisa mengetahui berbagai artikel lainnya. 

Untuk SEO, sitemap juga penting. Ada dua jenis sitemap, yakni yang berbentuk XML maupun HTML. Format pertama untuk dibaca oleh robot penjelajah milik mesin pencari, misal Bing atau Google. Format kedua adalah yang akan kita buat dan tampilkan di laman blog. 

Untuk AdSense, sitemap juga sangat penting. Banyak pakar yang menganjurkan agar para blogger yang berminat menjadi calon penayang iklan Google AdSense membuat halaman khusus yang memuat daftar postingan blog. 

Jadi jika ingin punya blog yang terstruktur dengan baik, rapi dan komplit, maka wajib hukumnya membuat sitemap. Kecuali Anda tidak ingin blog yang SEO. 

Cara Membuat Sitemap

Cara Membuat sitemap untuk blogspot

Sampailah kita pada cara membuat sitemap. Sebenarnya caranya sangat mudah dan bisa dilakukan kurang dari 2 menit. Ada tiga hal yang perlu Anda lakukan : 

1. Membuat laman berisi daftar postingan atau yang disebut peta situs.
2. Menempelkan kode yang ada di sana.
3. Membuat tautan untuk ditampilkan di blog, baik itu sidebar atau top header. 

Dalam bagian selanjutnya dari artikel ini, kami akan sajikan tiga buah kode untuk membuat sitemap yang masing-masing punya penampakan berbeda dan bisa dipilih sesuai selera atau kebutuhan. 

Langkah Membuat Sitemap di Blogspot

Namun sebelum Anda menyalin kode tersebut, ketahuilah alur dalam membaut sitemap di blogspot, caranya sama dengan ketika membaut halaman baru. 

1. Buka blogspot.
2. Masuk ke dashboard.
3. Masuk ke halaman.
4. Buat halaman baru. 
5. Tulis judul. Misalkan Daftar Isi atau Peta Situs.
6. Masuk ke menu tampilan HTML.
7. Salin dan sematkan salah satu dari kode di bawah ini ke sana dengan tepat.
8. Tekan Publikasikan.
9. Pilih dimana Anda meletakkan sitemap itu, bisa di top header, bottom line, sidebar kanan, atau di dalam menu. 
10. Selesai.

Daftar Kode Sitemap SEO

Kenapa hanya ada tiga kode saja? Sebetulnya ada puluhan dan mungkin ratusan, namun menurut hemat kami pribadi, tiga kode di bawah ini sudah cukup mumpuni dan memenuhi syarat, yakni : 

• Aman.
• Ringan.
• SEO.
• Rapi.
• Enak dilihat.

Jikalau Anda ingin mencoba kode lainnya, silahkan saja. Namun coba perhatikan faktor-faktor di atas yang sudah kami tuliskan agar tidak mencelakakan blog Anda. Oke langsung saja, ini dia daftar kode sitemap SEO terbaru. 

Sitemap Ringan dan Simpel

<div id="sitemap">Loading...</div>

<script> //<![CDATA[

var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}

elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();

//]]> </script>

Dalam kode di atas, hasilnya adalah sebuah daftar isi yang terdiri dari judul postingan saja dan diurutkan mulai dari yang pertama publish. Jadi bisa dikatakan ini adalah sitemap paling ringan dan simpel.  

Cocok untuk blog dengan postingan sedikit maupun yang sudah puluhan ribu. Karena di sini tidak ada elemen seperti tanggal ataupun dipisahkan berdasarkan kategori, melainkan hanya judul saja. 

Sitemap Postingan Berdasarkan Label

Dalam versi yang ini, akan muncul daftar artikel yang dipisahkan berdasarkan label atau tag dari masing-masing postingan. Ini adalah versi yang dipakai oleh sitemap Koloni Digital yang bersumber dari blog Pena Indigo. Silahkan gunakan ini jika artikel Anda kurang dari 100 sehingga daftarnya tidak terlalu panjang. 

<style type="text/css">

#toc{width:99%;margin:5px auto;border:1px solid #FF5F00;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;

padding:1px 0 2px 11px;background: #FF5F00;

border:1px solid #FF5F00;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>  

<div id="toc">

<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script> <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Sitemap AMP

Selanjutnya adalah kode sitemap khusus untuk AMP. Ingat, blog AMP bukan seperti blog biasa karena ada fitur dan kelebihan khusus. Untuk itu perlu kode khusus juga yang tidak akan bekerja di blog biasa. Silahkan ganti kalimat berwarna merah dengan alamat blog milik Anda. 

<amp-iframe title="Sitemap"

              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url="https://namablog/"

              height="750"

              layout="fixed-height"

              frameborder="0"

              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">

    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kGhs6QUf4WOyAsr2OZiOF3PfIITNzejF-dpuu7yimLSS4Ux87raBDyTI1qQvAoVFjVQSifgut3Q9YW0Ud5KP9QCtGO90RvU2F6smypnzSdz28CRHfJDDAZuQcIZzuFvMmacI_oI1qSA/s1600/placeholder.png"

             layout="fixed-height"

             height="360"

             width="auto"

             placeholder>

    </amp-img>

  </amp-iframe>

Silahkan ganti tulisan yang berwarna merah dengan alamat blog Anda sendiri. Kode ini adalah milik dari Kompi Ajaib yang sudah sangat terkenal kepiawaiannya dalam membuat kode-kode bermanfaat untuk blog. 

Kenapa Gagal Memasang Sitemap?

Ada beberapa alasan fundamental kenapa sitemap di atas gagal Anda pasang di blog. Beberapa diantaranya adalah masalah umum, antara lain : 

Salah Kode

Periksa kembali kode yang ada. Harusnya ini mudah karena sudah kami pilihkan yang tanpa mengutak-atik CSS. Tinggal pasang di halaman baru. Bahkan sebenarnya kodenya juga tinggal salin, jadi tolong periksa lagi ya sobat. 

Pasang di Mode HTML

Ketika membuka laman atau new page, ingatlah satu hal : pasang di mode HTML bukan compose atau mode menulis. Setelah dipasang silahkan langsung publish.

Seharusnya tidak ada masalah lain, semisal bertabrakan dengan kode dari template. Namun jika masih ada yang kurang jelas, silahkan tulis di kolom komentar, kami akan bantu semampu kami. 

Demikian, semoga bermanfaat. Sekarang silahkan baca artikel tentang Tutorial Menulis Artikel Berpotensi Viral yang tentu saja sangat baik untuk meningkatkan lalu lintas trafik. 

Blog Koloni Digital