Beranda / Semua Postingan / Tips Blogger

Pentingnya Memiliki Halaman Daftar Isi (Sitemap) di Blog

Posting Komentar
Cara membuat daftar isi otomatis di Blogger berdasarkan label

Daftar isi atau sitemap blog dapat membantu pengunjung menemukan artikel dengan lebih mudah. Terutama jika blog sudah memiliki banyak konten, halaman yang berisi kumpulan artikel berdasarkan label dapat menjadi navigasi tambahan yang praktis.

Dalam artikel ini, Anda akan mempelajari cara membuat daftar isi otomatis di Blogger berdasarkan label. Dengan menggunakan HTML, CSS, dan JavaScript, halaman daftar isi dapat mengambil daftar posting dari feed Blogger dan menampilkannya dalam kelompok berdasarkan label.

Metode ini cocok untuk Blogger atau Blogspot karena kode dapat ditempatkan langsung pada halaman khusus menggunakan mode HTML view. Anda juga tidak perlu mengubah seluruh template blog hanya untuk membuat halaman daftar isi.

Apa Itu Daftar Isi atau Sitemap Blogger?

Dalam konteks artikel ini, sitemap yang dimaksud adalah halaman daftar isi yang menampilkan kumpulan artikel blog. Halaman tersebut berbeda dengan XML sitemap yang digunakan mesin pencari untuk membantu menemukan URL halaman.

Daftar isi untuk pengunjung biasanya dibuat dalam bentuk halaman HTML yang mengelompokkan artikel berdasarkan kategori atau label tertentu. Dengan begitu, pembaca dapat melihat berbagai konten yang tersedia dalam satu halaman.

Kenapa Blog Perlu Halaman Daftar Isi?

Ketika jumlah artikel semakin banyak, pengunjung mungkin kesulitan menemukan konten lama hanya melalui halaman beranda. Halaman daftar isi dapat menjadi navigasi tambahan untuk membantu mereka menjelajahi konten blog.

Beberapa manfaat yang bisa diperoleh antara lain:

  • Memudahkan pengunjung menemukan artikel berdasarkan topik.
  • Membantu memperjelas struktur konten blog.
  • Menjadi navigasi tambahan selain menu utama.
  • Membantu pembaca menemukan artikel lama.
  • Menghubungkan berbagai artikel yang memiliki topik serupa.

Halaman daftar isi bukan jaminan peningkatan ranking Google. Namun, jika dibuat dengan struktur yang baik, halaman tersebut dapat membantu pengalaman navigasi dan memudahkan pembaca menemukan konten yang relevan.

Cara Membuat Daftar Isi Otomatis di Blogger

Membuat sitemap Blogger dapat dilakukan tanpa mengubah template utama. Anda cukup membuat halaman baru kemudian memasukkan kode daftar isi menggunakan mode HTML.

1. Buka Dashboard Blogger

Login ke akun Blogger Anda, kemudian pilih blog yang ingin ditambahkan halaman daftar isi.

2. Buat Halaman Baru

Pada menu Blogger, pilih Halaman (Pages), kemudian klik Halaman Baru (New Page).

3. Beri Judul Halaman

Gunakan judul yang mudah dipahami pengunjung, misalnya: Daftar Isi, Sitemap, atau Index Artikel.

Untuk blog berbahasa Indonesia, judul Daftar Isi biasanya lebih mudah dipahami oleh pembaca.

4. Aktifkan Tampilan HTML

Pada editor halaman, ubah mode penulisan ke Tampilan HTML (HTML view). Langkah ini penting karena kode CSS dan JavaScript harus dibaca sebagai kode, bukan sebagai teks biasa.

5. Masukkan Kode Sitemap

Salin seluruh kode di bawah ini dan tempelkan ke editor HTML halaman Blogger.

Kode Daftar Isi Otomatis Blogger Berdasarkan Label

<style type="text/css">
#bm-sitemap {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 1.6;
}

#bm-sitemap .sitemap-heading {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0056b3;
  color: #222;
  font-size: 22px;
  font-weight: 700;
}

#bm-sitemap .sitemap-status {
  color: #666;
  font-size: 15px;
}

#bm-sitemap .sitemap-label {
  margin: 25px 0 8px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-left: 4px solid #0056b3;
  color: #222;
  font-size: 17px;
  font-weight: 700;
}

#bm-sitemap .sitemap-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

#bm-sitemap .sitemap-posts li {
  margin: 0;
  padding: 8px 0 8px 18px;
  border-bottom: 1px dashed #e5e5e5;
  position: relative;
}

#bm-sitemap .sitemap-posts li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  top: 8px;
  color: #0056b3;
  font-weight: 700;
}

#bm-sitemap .sitemap-posts a {
  color: #0056b3;
  text-decoration: none;
}

#bm-sitemap .sitemap-posts a:hover {
  color: #ff5722;
  text-decoration: underline;
}

#bm-sitemap .sitemap-error {
  padding: 12px;
  background: #fff3f3;
  color: #b42318;
  border-radius: 6px;
}

@media (max-width: 600px) {
  #bm-sitemap {
    margin: 15px 0;
    padding: 15px;
    border-radius: 8px;
  }

  #bm-sitemap .sitemap-heading {
    font-size: 19px;
  }

  #bm-sitemap .sitemap-label {
    font-size: 16px;
  }

  #bm-sitemap .sitemap-posts li {
    font-size: 14px;
  }
}
</style>

<div id="bm-sitemap">
  <div class="sitemap-heading">Daftar Isi Artikel</div>
  <div id="bm-sitemap-content" class="sitemap-status">
    Sedang memuat daftar artikel...
  </div>
</div>

<script type="text/javascript">
(function () {

  var sitemapContent = document.getElementById("bm-sitemap-content");

  if (!sitemapContent) {
    return;
  }

  window.bmBuildSitemap = function (json) {

    var entries = json.feed && json.feed.entry
      ? json.feed.entry
      : [];

    if (!entries.length) {
      sitemapContent.innerHTML =
        "<p>Belum ada artikel yang dapat ditampilkan.</p>";
      return;
    }

    var groups = {};

    for (var i = 0; i < entries.length; i++) {

      var entry = entries[i];
      var title = entry.title && entry.title.$t
        ? entry.title.$t
        : "Tanpa Judul";

      var url = "";

      if (entry.link) {
        for (var j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel === "alternate") {
            url = entry.link[j].href;
            break;
          }
        }
      }

      if (!url) {
        continue;
      }

      var labels = [];

      if (entry.category && entry.category.length) {
        for (var k = 0; k < entry.category.length; k++) {
          labels.push(entry.category[k].term);
        }
      }

      if (!labels.length) {
        labels.push("Tanpa Label");
      }

      for (var l = 0; l < labels.length; l++) {

        var label = labels[l];

        if (!groups[label]) {
          groups[label] = [];
        }

        groups[label].push({
          title: title,
          url: url
        });
      }
    }

    var labelsSorted = Object.keys(groups).sort(function (a, b) {
      return a.localeCompare(b, "id");
    });

    var output = "";

    for (var m = 0; m < labelsSorted.length; m++) {

      var currentLabel = labelsSorted[m];

      output +=
        '<div class="sitemap-label">' +
        escapeHtml(currentLabel) +
        '</div>';

      output += '<ul class="sitemap-posts">';

      var posts = groups[currentLabel];

      posts.sort(function (a, b) {
        return a.title.localeCompare(b.title, "id");
      });

      for (var n = 0; n < posts.length; n++) {

        output +=
          '<li><a href="' +
          escapeAttribute(posts[n].url) +
          '">' +
          escapeHtml(posts[n].title) +
          '</a></li>';
      }

      output += '</ul>';
    }

    sitemapContent.innerHTML = output;
  };

  function escapeHtml(text) {
    return String(text)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function escapeAttribute(text) {
    return String(text)
      .replace(/&/g, "&amp;")
      .replace(/"/g, "&quot;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  }

})();
</script>

<script
  src="/feeds/posts/default?alt=json-in-script&max-results=500&callback=bmBuildSitemap"
  type="text/javascript">
</script>

6. Publikasikan Halaman

Setelah kode ditempelkan, periksa kembali halaman tersebut. Jika tidak ada kesalahan pada kode, klik Publikasikan (Publish).

Setelah halaman dibuka, script akan mengambil data posting dari feed Blogger dan menampilkan artikel yang tersedia berdasarkan label.

Bagaimana Cara Kerja Sitemap Blogger Ini?

Kode tersebut menggunakan feed Blogger dalam format JSONP untuk mengambil data posting. Informasi yang diproses kemudian digunakan untuk membuat daftar artikel pada halaman sitemap.

Setiap artikel dapat memiliki lebih dari satu label. Pada versi kode ini, artikel akan dimasukkan ke dalam setiap label yang dimilikinya sehingga pembaca dapat menemukannya dari topik yang relevan.

Label kemudian diurutkan secara alfabetis, sementara artikel di dalam setiap kelompok juga diurutkan berdasarkan judul.

Keunggulan Kode Daftar Isi Ini

  • Mengelompokkan artikel berdasarkan label.
  • Mendukung artikel yang memiliki beberapa label.
  • Label diurutkan secara alfabetis.
  • Judul artikel diurutkan agar lebih mudah ditemukan.
  • Memiliki desain responsif untuk perangkat mobile.
  • Menggunakan class khusus agar risiko bentrok dengan template lebih kecil.
  • Tidak membutuhkan perubahan pada template Blogger utama.

Apakah Sitemap Blogger Ini Otomatis Update?

Daftar isi mengambil data dari feed posting Blogger ketika halaman dimuat. Karena itu, artikel yang tersedia pada feed dapat ikut muncul ketika halaman daftar isi dibuka kembali.

Namun, jumlah artikel yang dapat ditampilkan pada satu permintaan feed dipengaruhi oleh batas feed dan implementasi Blogger. Pada blog dengan jumlah posting yang sangat banyak, satu halaman sitemap dengan batas max-results tertentu mungkin tidak menampilkan seluruh artikel.

Jika blog Anda sudah memiliki ratusan atau ribuan posting, sebaiknya gunakan metode sitemap yang lebih sesuai dengan jumlah konten dan kebutuhan navigasi blog.

Tips Membuat Daftar Isi Blogger Lebih SEO Friendly

Gunakan Label yang Konsisten

Label membantu mengelompokkan konten. Gunakan nama label yang jelas dan konsisten agar struktur artikel blog lebih mudah dipahami oleh pengunjung.

Hindari Terlalu Banyak Label

Jangan membuat banyak label yang memiliki makna hampir sama. Misalnya, "SEO Blogger", "SEO Blogspot", dan "Optimasi Blogspot" mungkin dapat disusun menjadi struktur kategori yang lebih jelas sesuai kebutuhan blog.

Gunakan Internal Link

Halaman daftar isi dapat menjadi salah satu bagian dari strategi internal linking. Selain sitemap, hubungkan artikel yang saling berkaitan secara kontekstual di dalam konten.

Buat Navigasi yang Mudah Dipahami

Jangan membuat halaman sitemap hanya untuk mesin pencari. Tujuan utamanya adalah membantu pengunjung menemukan konten yang mereka butuhkan.

Daftar Isi dan XML Sitemap Itu Berbeda

Salah satu hal yang sering membingungkan pemula adalah istilah "sitemap". Halaman daftar isi yang dibahas dalam tutorial ini ditujukan terutama untuk navigasi pengunjung.

Sementara itu, XML sitemap merupakan format data yang digunakan untuk membantu mesin pencari menemukan URL yang tersedia pada sebuah situs. Keduanya memiliki fungsi yang berbeda dan tidak sebaiknya dianggap sebagai pengganti satu sama lain.

Masalah yang Mungkin Terjadi

Daftar Artikel Tidak Muncul

Jika daftar artikel tidak muncul, periksa apakah kode JavaScript ditempatkan dalam mode HTML view. Pastikan juga script feed tidak terpotong ketika ditempelkan ke editor Blogger.

Hanya Sebagian Artikel yang Muncul

Hal ini dapat terjadi karena batas jumlah posting yang diminta melalui feed. Jika jumlah artikel blog sangat banyak, satu halaman dapat membutuhkan pendekatan pagination atau beberapa permintaan feed.

Tampilan Sitemap Berantakan

Jika tampilan tidak sesuai, kemungkinan terdapat CSS dari template Blogger yang memengaruhi elemen halaman. Kode di atas menggunakan prefix bm-sitemap untuk mengurangi kemungkinan benturan dengan class template.

Script Tidak Berjalan

Pastikan kode JavaScript tidak diubah secara tidak sengaja ketika ditempelkan. Jika template atau konfigurasi Blogger Anda memiliki pembatasan tertentu, periksa juga apakah JavaScript dapat dijalankan pada halaman tersebut.

FAQ Daftar Isi Otomatis Blogger

Apakah daftar isi Blogger bisa dibuat tanpa plugin?

Ya. Blogger dapat menggunakan HTML, CSS, dan JavaScript untuk membuat halaman daftar isi seperti contoh pada tutorial ini.

Apakah sitemap ini menampilkan artikel berdasarkan label?

Ya. Script membaca label yang tersedia pada data posting dan mengelompokkan artikel berdasarkan label tersebut.

Apakah satu artikel bisa muncul di beberapa kategori?

Ya. Jika sebuah artikel memiliki beberapa label, artikel tersebut dapat ditampilkan pada masing-masing kelompok label.

Apakah kode ini harus dipasang di template Blogger?

Tidak. Untuk metode ini, kode dapat ditempatkan pada halaman Blogger menggunakan editor HTML.

Apakah sitemap ini membuat ranking Google meningkat?

Tidak ada jaminan bahwa pemasangan halaman daftar isi akan meningkatkan ranking. Fungsi utamanya adalah menyediakan navigasi tambahan bagi pembaca dan membantu mereka menemukan konten yang tersedia.

Apakah sitemap ini cocok untuk blog dengan banyak artikel?

Kode ini dapat digunakan untuk blog dengan jumlah artikel yang tidak terlalu besar. Untuk blog dengan konten dalam jumlah sangat banyak, pertimbangkan sistem sitemap dengan pagination atau pemisahan berdasarkan kategori agar halaman tetap mudah digunakan.

Kesimpulan

Cara membuat daftar isi otomatis di Blogger berdasarkan label dapat dilakukan dengan membuat halaman baru dan memasukkan kode HTML, CSS, serta JavaScript melalui mode HTML.

Halaman tersebut dapat membantu pembaca menemukan artikel berdasarkan label dan menjadi navigasi tambahan pada blog. Kode juga dapat digunakan tanpa mengubah keseluruhan template Blogger.

Agar hasilnya lebih optimal, gunakan label yang konsisten, buat struktur navigasi yang sederhana, dan tetap gunakan internal link di dalam artikel yang memang relevan.

Perlu diingat bahwa halaman daftar isi untuk pengunjung berbeda dengan XML sitemap untuk mesin pencari. Keduanya memiliki fungsi yang berbeda dan dapat digunakan sesuai kebutuhan website.

Dengan struktur yang rapi dan konten yang terorganisir, halaman daftar isi dapat menjadi bagian dari pengalaman navigasi blog yang lebih baik, terutama ketika jumlah artikel Anda terus bertambah.

Posting Komentar untuk "Pentingnya Memiliki Halaman Daftar Isi (Sitemap) di Blog"

Posting Komentar