Membuat Sitemap Otomatis Super Keren Pada Blogger

Panduan lengkap cara membuat sitemap otomatis blogger

Bagi seorang blogger, terutama yang serius mengembangkan situs berbasis Blogger atau Blogspot, keberadaan halaman sitemap otomatis bukanlah hal yang sepele. Sitemap atau peta situs adalah elemen penting yang membantu pembaca maupun mesin pencari seperti Google, Bing, dan Yahoo memahami struktur blog secara keseluruhan. Tanpa sitemap, blog bisa saja tetap berfungsi dengan baik, tetapi potensi untuk SEO (Search Engine Optimization) tidak akan maksimal.

Sitemap pada dasarnya berfungsi sebagai daftar isi digital yang menampilkan seluruh artikel dan halaman yang ada di blog. Ia bukan hanya membantu pengunjung menemukan artikel lama dengan mudah, tetapi juga mempermudah mesin pencari dalam menelusuri (crawl) dan mengindeks setiap halaman baru yang dipublikasikan. Dengan kata lain, sitemap adalah jembatan antara blog Anda dan algoritma mesin pencari.

Banyak pemilik blog pemula yang belum memahami pentingnya fitur ini. Sebagian besar hanya fokus membuat konten dan memperindah tampilan blog, padahal sitemap otomatis bisa menjadi alat navigasi internal yang membuat pengalaman pengguna meningkat. Selain itu, sitemap juga menandakan bahwa blog Anda terstruktur rapi, profesional, dan ramah mesin pencari.

Sebenarnya, Blogger secara otomatis membuat sitemap dalam format XML, seperti:

https://namablog.blogspot.com/sitemap.xml

Namun sitemap XML ini lebih ditujukan untuk Google Search Console dan tidak memiliki tampilan menarik bagi pembaca. Oleh karena itu, Anda sebaiknya juga membuat halaman sitemap HTML otomatis, yang bisa dibuka langsung oleh pengunjung blog. Sitemap HTML ini secara dinamis menampilkan seluruh postingan blog berdasarkan label (kategori) dan waktu publikasi.

Kabar baiknya, Anda tidak perlu menambahkan setiap artikel secara manual. Dengan kode JavaScript sederhana, Anda bisa membuat halaman sitemap yang otomatis memperbarui daftar artikel setiap kali posting baru diterbitkan. Artinya, setiap kali Anda mempublikasikan konten, halaman sitemap akan langsung menambahkannya tanpa perlu sentuhan manual.

Dalam artikel ini, kita akan membahas secara lengkap:

Pengertian dan fungsi sitemap otomatis di Blogger
Perbedaan sitemap XML dan HTML
Manfaat sitemap bagi SEO dan pengunjung
Langkah-langkah lengkap membuat halaman sitemap otomatis di Blogger
Kode script sitemap otomatis terbaru (responsive dan ringan)
Tips agar sitemap tampil profesional dan cepat dimuat
Serta cara memverifikasi sitemap Anda di Google Search Console

Jika Anda ingin blog Anda terlihat profesional seperti situs berita besar, artikel ini wajib Anda ikuti sampai tuntas.

Apa Itu Sitemap Otomatis di Blogger?

Sitemap otomatis di Blogger adalah halaman khusus yang menampilkan daftar seluruh postingan yang ada di blog Anda dan akan diperbarui secara otomatis setiap kali artikel baru diterbitkan. Tidak perlu update manual, karena kode JavaScript di dalamnya akan mengambil data RSS feed blog Anda dan menampilkannya dalam bentuk daftar artikel dengan link aktif.

Contohnya, jika Anda memiliki 100 artikel di blog, maka sitemap otomatis akan menampilkan semua judulnya dalam format yang rapi dan terstruktur berdasarkan label atau tanggal.

Format umum feed Blogger yang digunakan oleh script sitemap biasanya seperti ini:

https://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999

Dari feed inilah script sitemap mengambil data judul, link, dan label artikel.

Manfaat Membuat Sitemap Otomatis di Blogger

Berikut adalah alasan mengapa setiap blog di Blogger sebaiknya memiliki sitemap otomatis:

Mempermudah navigasi pengunjung.
Pengunjung bisa dengan mudah menemukan artikel yang mereka butuhkan, terutama jika blog Anda sudah memiliki ratusan postingan.
Meningkatkan SEO.
Mesin pencari dapat memahami struktur situs Anda dengan lebih baik. Google menyukai situs dengan navigasi yang jelas.
Mempercepat pengindeksan artikel baru.
Karena sitemap otomatis memperbarui data setiap kali posting baru dibuat, bot Google bisa lebih cepat mendeteksi adanya artikel baru.
Tampilan blog terlihat profesional.
Blog dengan halaman sitemap biasanya dianggap lebih serius dan rapi dalam manajemen konten.
Mengurangi bounce rate.
Dengan adanya daftar artikel di satu halaman, pengunjung cenderung menjelajah lebih banyak konten.

Perbedaan Sitemap XML dan Sitemap HTML

Jenis Sitemap	Fungsi Utama	Dibaca oleh	Tampilan
Sitemap XML	Untuk pengindeksan mesin pencari	Bot / Crawler	Tidak tampil untuk pengunjung
Sitemap HTML	Untuk navigasi pengunjung dan SEO tambahan	Pengunjung dan mesin pencari	Tampil rapi dan bisa dikustomisasi

Untuk blog Blogger, keduanya penting.
Namun, sitemap HTML otomatis memiliki keunggulan karena dapat diakses langsung oleh pembaca dan sekaligus membantu SEO internal.

Langkah-Langkah Membuat Halaman Sitemap Otomatis di Blogger

Berikut panduan lengkap membuat halaman sitemap otomatis tanpa plugin dan bisa langsung dipasang di platform Blogger.

1. Masuk ke Dashboard Blogger

2. Buat Halaman Baru

Klik menu Halaman (Pages) → pilih Halaman Baru.
Berikan judul seperti “Sitemap”, “Daftar Isi”, atau “Peta Situs” sesuai selera Anda.

3. Ganti Mode Penulisan ke “HTML”

Klik tab HTML pada editor halaman agar Anda bisa menempelkan kode script dengan benar.

4. Tempelkan Script Sitemap Otomatis

Gunakan script berikut. Script ini ringan, valid, dan bekerja otomatis untuk semua artikel blog Anda.

<div id="sitemap-container">
  <h2>Daftar Isi Blog</h2>
  <p>Semua artikel terbaru dari blog ini ditampilkan secara otomatis berdasarkan label dan tanggal publikasi.</p>
  <div id="post-list"></div>
</div>

<script>
let feedUrl = '/feeds/posts/default?alt=json-in-script&max-results=9999';
function loadSitemap(json) {
  let posts = json.feed.entry;
  let postList = '<ul>';
  for (let i = 0; i < posts.length; i++) {
    let title = posts[i].title.$t;
    let link = posts[i].link.find(l => l.rel === 'alternate').href;
    let category = posts[i].category ? posts[i].category[0].term : 'Tanpa Label';
    postList += `<li><a href="${link}" target="_blank">${title}</a> <span>(${category})</span></li>`;
  }
  postList += '</ul>';
  document.getElementById('post-list').innerHTML = postList;
}

let script = document.createElement('script');
script.src = feedUrl + '&callback=loadSitemap';
document.body.appendChild(script);
</script>

<style>
#sitemap-container{padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,0.1);font-family:"Plus Jakarta Sans",sans-serif;}
#sitemap-container h2{font-size:22px;margin-bottom:10px;color:#333;}
#sitemap-container ul{list-style:none;padding:0;}
#sitemap-container li{margin-bottom:8px;}
#sitemap-container a{text-decoration:none;color:#1a73e8;font-weight:500;}
#sitemap-container a:hover{text-decoration:underline;}
#sitemap-container span{color:#777;font-size:13px;margin-left:6px;}
</style>

5. Simpan dan Publikasikan Halaman

Klik Publikasikan, lalu buka halaman Anda.
Dalam hitungan detik, seluruh daftar artikel akan muncul otomatis tanpa perlu Anda tambahkan satu per satu.Nanti tampilannya akan seperti berikut ini:

Demo

Selanjutnya kita buat tampilannya lebih menarik, yaitu di buat grid, dengan menampilkan foto thumbnail di sebelah kiri dan judul artikel di samping kanan foto thumbnail artikelnya.

Jika anda ingin membuat seperti itu anda bisa menggunakan kode yang ini. Maka tampilannya akan seperti ini :

Demo

Bagaimana Tips Optimasi Sitemap Agar Lebih SEO-Friendly

Gunakan judul yang mengandung kata kunci.
Misalnya: “Sitemap Radiokonoha – Daftar Lengkap Artikel Terbaru”.
Tambahkan deskripsi singkat di bagian atas.
Google menyukai halaman yang memiliki teks kontekstual sebelum daftar tautan.
Pastikan setiap tautan aktif dan tidak rusak.
Gunakan label (kategori) dengan konsisten.
Script sitemap akan menampilkan label, jadi pastikan Anda tidak memiliki label duplikat seperti “Berita” dan “Berita Terkini”.
Gunakan font ringan dan warna teks netral (#444444).
Ini sesuai dengan rekomendasi tampilan yang disukai Google agar mudah dibaca pengguna.
Tambahkan internal link ke halaman sitemap.
Misalnya, di footer atau sidebar, tambahkan link “Daftar Isi Blog”.

Menambahkan Sitemap XML ke Google Search Console

Selain halaman sitemap HTML, Anda juga wajib mendaftarkan sitemap XML ke Google agar artikel cepat terindeks.

Langkah-langkahnya:

Buka Google Search Console.
Pilih properti blog Anda.
Klik “Sitemap” di menu sebelah kiri.
Masukkan:
```
sitemap.xml
```
Klik Submit.

Tunggu beberapa saat, dan Google akan mulai mengindeks seluruh halaman blog Anda.

Apa Keunggulan Sitemap Otomatis Dibanding Manual

Kriteria	Sitemap Otomatis	Sitemap Manual
Update Artikel Baru	Otomatis langsung tampil	Harus ditulis ulang
Risiko Kesalahan Link	Sangat kecil	Cukup besar
Waktu Pembuatan	Sekali pasang	Terus diperbarui
SEO Value	Tinggi	Sedang
Kepraktisan	Sangat mudah	Cukup rumit

Jadi, bagi Anda yang menginginkan efisiensi, profesionalitas, dan SEO yang lebih baik, sitemap otomatis adalah pilihan terbaik.

Membuat Sitemap Berdasarkan Label (Kategori) Blogger

Jika Anda ingin sitemap lebih rapi, Anda bisa mengelompokkan artikel berdasarkan label. Tambahkan script berikut di bawah script utama:

<script>
function groupByLabel(json){
  let posts = json.feed.entry;
  let labels = {};
  posts.forEach(entry=>{
    let title = entry.title.$t;
    let link = entry.link.find(l=>l.rel==='alternate').href;
    if(entry.category){
      entry.category.forEach(cat=>{
        let label = cat.term;
        if(!labels[label]) labels[label]=[];
        labels[label].push(`<li><a href="${link}" target="_blank">${title}</a></li>`);
      });
    }
  });
  let html='';
  for(let label in labels){
    html+=`<h3>${label}</h3><ul>${labels[label].join('')}</ul>`;
  }
  document.getElementById('post-list').innerHTML=html;
}
let script2=document.createElement('script');
script2.src='/feeds/posts/default?alt=json-in-script&max-results=9999&callback=groupByLabel';
document.body.appendChild(script2);
</script>

Dengan kode ini, setiap label akan menjadi subjudul, diikuti daftar artikel di bawahnya.

Membuat halaman sitemap otomatis di Blogger adalah langkah penting untuk menjadikan blog Anda lebih profesional, SEO-friendly, dan mudah dijelajahi.
Tanpa bantuan plugin seperti di WordPress, Anda tetap bisa memiliki sitemap yang terupdate otomatis, ringan, dan menarik.

Dengan mengikuti langkah di atas:

Pengunjung akan lebih mudah menemukan konten,
Google akan lebih cepat mengindeks halaman,
Blog Anda akan terlihat rapi dan terpercaya.

Jika blog Anda seperti radiokonoha.com fokus pada berita daerah atau niche spesifik, sitemap otomatis juga membantu pembaca menemukan topik lama yang masih relevan dengan cepat.

Terakhir, pastikan Anda secara rutin memeriksa Search Console untuk memastikan semua artikel Anda sudah terindeks dengan baik.
Dengan begitu, performa SEO blog akan terus meningkat, dan setiap konten baru yang Anda terbitkan akan langsung dikenali Google dalam waktu singkat.

Sekarang Anda sudah memiliki halaman sitemap otomatis yang profesional dan berfungsi penuh di Blogger.
Langkah kecil ini memberi dampak besar bagi navigasi, SEO, dan pengalaman pengguna.

Gunakan sitemap sebagai fondasi penting dari struktur blog Anda, dan nikmati manfaatnya — mulai dari artikel cepat terindeks, pengunjung betah membaca lebih lama, hingga ranking yang meningkat di hasil pencarian Google.

Rate This Article

Thanks for reading: Membuat Sitemap Otomatis Super Keren Pada Blogger , Sorry, my English is bad:)

Radio Konoha