Membuat Sitemap (Daftar Isi) Otomatis di Blogspot

By
Prabowo
-
0
130

Sitemap atau daftar isi merupakan bagian penting dalam sebuah blog. Dengan sitemap, pengunjung dan mesin pencari dapat lebih mudah menemukan konten yang kamu buat. Di Blogspot, kamu bisa membuat sitemap otomatis yang akan memperbarui daftar isi secara dinamis sesuai dengan postingan terbaru.

Pada artikel ini, kamu akan belajar cara membuat sitemap otomatis di Blogspot, mulai dari pengertian, manfaat, hingga langkah lengkap membuatnya tanpa ribet.

Apa Itu Sitemap (Daftar Isi) di Blogspot?

Sitemap adalah sebuah halaman yang menampilkan daftar lengkap artikel atau postingan di blog. Fungsi utamanya:

  • Memudahkan pengunjung mencari artikel

  • Membantu mesin pencari (Google, Bing) mengindeks konten secara lebih cepat dan lengkap

  • Menyajikan struktur konten blog dengan rapi

Manfaat Membuat Sitemap Otomatis di Blogspot

Berikut beberapa manfaat utama sitemap otomatis:

Manfaat Penjelasan
Mudah diakses Pengunjung bisa melihat seluruh artikel tanpa harus scroll homepage
SEO friendly Mesin pencari lebih mudah menemukan dan mengindeks semua postingan
Update otomatis Sitemap akan menampilkan artikel baru tanpa kamu harus mengedit manual
Navigasi lebih baik Pengunjung bisa langsung memilih kategori atau judul yang diminati

Cara Membuat Sitemap Otomatis di Blogspot

Blogspot sebenarnya sudah menyediakan fitur Feed RSS yang bisa dimanfaatkan untuk membuat sitemap. Tapi untuk membuat sitemap yang rapi dan bisa diakses pengunjung, kita perlu membuat halaman khusus yang memuat daftar isi secara otomatis.

Langkah 1: Buat Halaman Baru untuk Sitemap

  1. Login ke Blogger

  2. Klik Halaman > Halaman Baru

  3. Beri judul misalnya: Sitemap atau Daftar Isi

  4. Pilih mode HTML (bukan Compose)

Langkah 2: Tambahkan Kode Script Sitemap

Salin dan tempelkan kode berikut di editor HTML halaman tersebut:

html
<div id="sitemap"></div>

<script type="text/javascript">
var sitemap_url = "/feeds/posts/default?max-results=9999";

fetch(sitemap_url)
.then(response => response.text())
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(data => {
var entries = data.getElementsByTagName("entry");
var sitemapDiv = document.getElementById("sitemap");
var listHTML = "<ul>";

for (var i = 0; i < entries.length; i++) {
var title = entries[i].getElementsByTagName("title")[0].textContent;
var link = entries[i].getElementsByTagName("link")[0].getAttribute("href");
listHTML += "<li><a href='" + link + "'>" + title + "</a></li>";
}

listHTML += "</ul>";
sitemapDiv.innerHTML = listHTML;
})
.catch(err => {
document.getElementById("sitemap").innerHTML = "Gagal memuat sitemap.";
});
</script>

Penjelasan:

  • Kode ini mengambil data feed posting terbaru (maksimal 9999 artikel)

  • Mengambil judul dan link tiap posting

  • Membuat daftar isi secara otomatis dalam bentuk list

Langkah 3: Simpan dan Publikasikan Halaman

Setelah menempel kode di atas, klik Publikasikan. Sekarang halaman sitemap kamu sudah otomatis menampilkan daftar semua artikel blog.

Cara Menambahkan Sitemap ke Menu Navigasi Blog

Agar pengunjung mudah menemukan sitemap, tambahkan tautan ke menu:

  1. Masuk ke Tata Letak (Layout)

  2. Cari widget Menu atau Link List

  3. Tambahkan link baru dengan URL sitemap, misalnya:

  4. Simpan pengaturan

Tips Mempercantik Tampilan Sitemap

Agar sitemap terlihat menarik dan mudah dibaca:

  • Tambahkan CSS sederhana pada halaman sitemap, misalnya:

html
<style>
#sitemap ul {
list-style-type: none;
padding-left: 0;
}

#sitemap li {
padding: 5px 0;
}

#sitemap a {
text-decoration: none;
color: #1a73e8;
}

#sitemap a:hover {
text-decoration: underline;
}
</style>

  • Jika ingin mengelompokkan berdasarkan label/kategori, perlu script tambahan yang lebih kompleks, tapi untuk pemula, daftar isi sederhana sudah sangat membantu.

Alternatif: Menggunakan Sitemap XML untuk Google Search Console

Selain sitemap untuk pengunjung, kamu juga bisa membuat sitemap XML untuk membantu Google mengindeks blog. Blogspot secara otomatis membuat sitemap XML di:

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

Atau kamu bisa submit link berikut di Google Search Console:

ruby
https://namablog.blogspot.com/feeds/posts/default?orderby=UPDATED

Ini sudah otomatis dan tidak perlu diubah.

Kesimpulan

Membuat sitemap (daftar isi) otomatis di Blogspot adalah langkah penting untuk meningkatkan navigasi blog dan SEO. Dengan menggunakan kode JavaScript sederhana, kamu bisa membuat halaman sitemap yang selalu update otomatis tanpa harus repot mengedit manual.

Ringkasan:

  • Buat halaman baru dengan judul Sitemap

  • Tempelkan kode JavaScript untuk mengambil feed posting

  • Publikasikan halaman dan tambahkan ke menu navigasi

  • Gunakan sitemap XML bawaan untuk Google Search Console

Dengan sitemap yang rapi, blogmu akan lebih mudah diakses dan disukai pengunjung maupun mesin pencari.

RELATED ARTICLESMORE FROM AUTHOR