Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / BLOGGING

Cara Membuat Sitemap Blogger dengan Gambar Mini Posting (Thumbnail) Otomatis

Oleh SABILISLOW Posting Komentar

Cara Membuat Sitemap Blogger dengan Gambar Mini Posting (Thumbnail) Otomatis

Cara membuat sitemap Blogger dengan gambar mini posting dapat dilakukan dengan menambahkan halaman khusus yang menampilkan daftar artikel secara otomatis, lengkap dengan thumbnail, judul, kategori, pencarian, dan navigasi halaman. Fitur ini membantu pengunjung menemukan artikel lama maupun baru dengan lebih mudah. Dalam panduan ini, Anda akan mempelajari cara membuat sitemap visual di Blogger menggunakan HTML, CSS, dan JavaScript tanpa harus memasang plugin tambahan.

Bagi pemilik blog, navigasi yang baik merupakan bagian penting dari pengalaman pengguna. Ketika jumlah artikel semakin banyak, pengunjung membutuhkan cara praktis untuk menemukan informasi yang mereka cari tanpa harus membuka halaman satu per satu.

Salah satu solusinya adalah membuat halaman sitemap visual atau daftar isi blog. Berbeda dari sitemap XML yang digunakan untuk membantu mesin pencari menemukan URL, sitemap visual dirancang untuk dibaca dan digunakan langsung oleh pengunjung.

Apa Itu Sitemap Blogger dengan Gambar Mini Posting?

Sitemap Blogger dengan thumbnail adalah halaman daftar artikel yang menampilkan gambar mini, judul posting, dan tautan menuju setiap artikel. Dalam implementasi yang lebih interaktif, halaman ini juga dapat dilengkapi pencarian, filter kategori, pengurutan artikel, serta pagination atau pembagian daftar ke beberapa halaman.

Thumbnail membantu pembaca mengenali topik artikel secara visual. Sementara itu, judul dan tautan memberikan informasi yang lebih jelas mengenai halaman yang akan dibuka.

Misalnya, blog Anda memiliki ratusan artikel tentang pendidikan, teknologi, blogging, pengetahuan umum, dan Islam. Dengan sitemap visual, pembaca dapat menjelajahi artikel berdasarkan kategori tanpa harus menelusuri arsip blog satu per satu.

Sitemap visual berfungsi sebagai peta navigasi untuk pengunjung, sedangkan sitemap XML merupakan berkas teknis yang membantu mesin pencari memahami URL yang tersedia pada sebuah website.

Manfaat Sitemap Visual untuk Blog

1. Mempermudah pengunjung menemukan artikel

Pengunjung tidak selalu datang melalui halaman beranda. Sebagian datang dari Google, media sosial, atau tautan eksternal dan mungkin ingin mencari artikel lain yang berkaitan dengan topik yang sedang dibaca.

Halaman sitemap memberikan alternatif navigasi yang membantu mereka menjelajahi konten blog dengan lebih praktis.

2. Membantu menemukan artikel lama

Artikel yang sudah lama diterbitkan sering kali tidak lagi muncul pada halaman depan. Dengan sitemap visual yang mengambil daftar posting secara otomatis, artikel lama yang masih tersedia dapat ditemukan melalui daftar tersebut.

3. Membuat navigasi blog lebih terstruktur

Pengelompokan berdasarkan label atau kategori membantu pengunjung memahami topik utama blog. Struktur seperti ini sangat berguna untuk blog dengan banyak tema dan jumlah artikel yang terus bertambah.

4. Memberikan pengalaman membaca yang lebih menarik

Daftar artikel yang dilengkapi thumbnail memberikan petunjuk visual mengenai isi posting. Tampilan ini dapat membuat halaman daftar isi lebih informatif daripada daftar tautan biasa.

5. Mendukung penemuan konten dan internal linking

Tautan menuju artikel yang tersedia dalam sitemap dapat membantu pengunjung menemukan halaman lain di blog. Halaman ini juga dapat menjadi bagian dari struktur navigasi internal website.

Namun, sitemap visual tidak menjamin peningkatan peringkat Google atau otomatis mempercepat pengindeksan. Hasil SEO tetap bergantung pada kualitas konten, struktur website, kemampuan perayapan, dan berbagai faktor lainnya.

Persiapan Sebelum Membuat Sitemap di Blogger

Sebelum memasang kode, pastikan Anda memiliki akses ke dashboard Blogger dan dapat membuat halaman statis.

  • Siapkan akun Blogger yang mengelola blog.
  • Pastikan blog dapat diakses melalui URL publik.
  • Periksa apakah artikel memiliki gambar thumbnail atau gambar di dalam konten.
  • Pastikan posting yang ingin ditampilkan telah dipublikasikan.
  • Cadangkan tema Blogger sebelum mengubah kode tema, jika Anda berencana mengeditnya.

Catatan: Kode pada tutorial ini dirancang sebagai satu blok mandiri untuk halaman statis Blogger. Dengan demikian, Anda tidak harus menambahkan CSS ke template atau mengedit file tema hanya untuk membuat halaman sitemap.

Kode Sitemap Blogger dengan Thumbnail Otomatis

Berikut kode HTML, CSS, dan JavaScript untuk membuat sitemap visual. Kode ini mengambil daftar posting dari feed Blogger, kemudian menampilkannya dalam bentuk kartu artikel dengan gambar mini, judul, label, fitur pencarian, pengurutan, dan navigasi halaman.

Implementasi ini tidak bergantung pada pustaka JavaScript eksternal yang tidak diperlukan. Hal tersebut membantu mengurangi ketergantungan pada layanan pihak ketiga.

Kode lengkap sitemap visual

Salin seluruh kode berikut. Tempelkan pada halaman baru Blogger menggunakan mode HTML, bukan mode Tampilan Menulis atau Compose.

<style>
#mz-sitemap {
  --mz-border: #e5e7eb;
  --mz-text: #202124;
  --mz-muted: #666;
  --mz-accent: #1769aa;
  color: var(--mz-text);
  font-size: 15px;
  line-height: 1.6;
}
#mz-sitemap * {
  box-sizing: border-box;
}
#mz-sitemap .mz-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
#mz-sitemap input,
#mz-sitemap select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--mz-border);
  border-radius: 6px;
  background: #fff;
  color: #222;
  font: inherit;
}
#mz-sitemap .mz-status {
  margin: 12px 0;
  color: var(--mz-muted);
}
#mz-sitemap .mz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#mz-sitemap .mz-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--mz-border);
  border-radius: 8px;
  background: #fff;
}
#mz-sitemap .mz-thumb {
  display: block;
  flex: 0 0 104px;
  width: 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 5px;
  background: #f1f3f4;
}
#mz-sitemap .mz-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mz-sitemap .mz-info {
  flex: 1;
  min-width: 0;
}
#mz-sitemap .mz-title {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#mz-sitemap .mz-title:hover {
  text-decoration: underline;
}
#mz-sitemap .mz-meta {
  color: var(--mz-muted);
  font-size: 12px;
}
#mz-sitemap .mz-label {
  display: inline-block;
  margin-top: 6px;
  color: var(--mz-accent);
  font-size: 12px;
}
#mz-sitemap .mz-pages {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0;
}
#mz-sitemap .mz-pages button {
  padding: 7px 11px;
  border: 1px solid var(--mz-border);
  border-radius: 5px;
  background: #fff;
  color: var(--mz-text);
  cursor: pointer;
  font: inherit;
}
#mz-sitemap .mz-pages button[aria-current="page"] {
  background: var(--mz-accent);
  border-color: var(--mz-accent);
  color: #fff;
}
#mz-sitemap .mz-pages button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
#mz-sitemap .mz-empty {
  padding: 18px;
  border: 1px solid var(--mz-border);
  border-radius: 6px;
}
@media (max-width: 600px) {
  #mz-sitemap .mz-controls {
    grid-template-columns: 1fr;
  }
  #mz-sitemap .mz-grid {
    grid-template-columns: 1fr;
  }
  #mz-sitemap .mz-thumb {
    flex-basis: 92px;
    width: 92px;
  }
}
</style>

<div id="mz-sitemap">
  <div class="mz-controls">
    <select id="mz-sort" aria-label="Urutkan artikel">
      <option value="published">Artikel terbaru</option>
      <option value="updated">Terakhir diperbarui</option>
      <option value="oldest">Artikel terlama</option>
    </select>

    <select id="mz-category" aria-label="Filter kategori">
      <option value="">Semua kategori</option>
    </select>

    <input id="mz-search"
      type="search"
      placeholder="Cari judul artikel..."
      aria-label="Cari judul artikel" />
  </div>

  <p id="mz-status" class="mz-status" role="status">
    Memuat daftar artikel...
  </p>

  <ul id="mz-grid" class="mz-grid"></ul>
  <div id="mz-pages" class="mz-pages"
    aria-label="Navigasi halaman"></div>
</div>

<script>
(function () {
  "use strict";

  var root = document.getElementById("mz-sitemap");
  if (!root || root.dataset.initialized === "true") return;
  root.dataset.initialized = "true";

  var grid = document.getElementById("mz-grid");
  var status = document.getElementById("mz-status");
  var search = document.getElementById("mz-search");
  var category = document.getElementById("mz-category");
  var sort = document.getElementById("mz-sort");
  var pages = document.getElementById("mz-pages");

  var posts = [];
  var page = 1;
  var perPage = 12;
  var maxPagesToLoad = 20;
  var batchSize = 150;

  function getText(value) {
    var el = document.createElement("div");
    el.innerHTML = value || "";
    return (el.textContent || "").trim();
  }

  function getAlternateLink(entry) {
    var links = entry.link || [];
    for (var i = 0; i < links.length; i++) {
      if (links[i].rel === "alternate" && links[i].href) {
        return links[i].href;
      }
    }
    return "";
  }

  function getThumbnail(entry) {
    if (entry.media$thumbnail && entry.media$thumbnail.url) {
      return entry.media$thumbnail.url;
    }

    var html = entry.content && entry.content.$t
      ? entry.content.$t
      : (entry.summary && entry.summary.$t
        ? entry.summary.$t : "");

    var doc = new DOMParser().parseFromString(html, "text/html");
    var image = doc.querySelector("img");
    return image ? image.getAttribute("src") || "" : "";
  }

  function getDate(entry, field) {
    var raw = entry[field] && entry[field].$t;
    var date = raw ? new Date(raw) : new Date(0);
    return isNaN(date.getTime()) ? new Date(0) : date;
  }

  function formatDate(date) {
    if (!date || date.getTime() === 0) return "";
    return new Intl.DateTimeFormat("id-ID", {
      day: "numeric",
      month: "short",
      year: "numeric"
    }).format(date);
  }

  function normalizeUrl(url) {
    try {
      var parsed = new URL(url, location.href);
      if (parsed.protocol !== "https:" &&
          parsed.protocol !== "http:") return "";
      return parsed.href;
    } catch (e) {
      return "";
    }
  }

  function makePost(entry) {
    var labels = (entry.category || []).map(function (item) {
      return item.term || "";
    }).filter(Boolean);

    return {
      title: getText(entry.title && entry.title.$t),
      url: normalizeUrl(getAlternateLink(entry)),
      image: normalizeUrl(getThumbnail(entry)),
      labels: labels,
      published: getDate(entry, "published"),
      updated: getDate(entry, "updated")
    };
  }

  function addOptions() {
    var labels = new Set();
    posts.forEach(function (post) {
      post.labels.forEach(function (label) {
        labels.add(label);
      });
    });

    Array.from(labels).sort(function (a, b) {
      return a.localeCompare(b, "id");
    }).forEach(function (label) {
      var option = document.createElement("option");
      option.value = label;
      option.textContent = label;
      category.appendChild(option);
    });
  }

  function createElement(tag, className, text) {
    var el = document.createElement(tag);
    if (className) el.className = className;
    if (text !== undefined) el.textContent = text;
    return el;
  }

  function renderPosts() {
    grid.replaceChildren();
    pages.replaceChildren();

    var keyword = search.value.trim().toLocaleLowerCase("id");
    var selectedCategory = category.value;
    var selectedSort = sort.value;

    var filtered = posts.filter(function (post) {
      var matchTitle = post.title
        .toLocaleLowerCase("id").includes(keyword);
      var matchCategory = !selectedCategory ||
        post.labels.includes(selectedCategory);
      return matchTitle && matchCategory;
    });

    filtered.sort(function (a, b) {
      if (selectedSort === "oldest") {
        return a.published - b.published;
      }
      if (selectedSort === "updated") {
        return b.updated - a.updated;
      }
      return b.published - a.published;
    });

    var totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    page = Math.min(page, totalPages);

    var start = (page - 1) * perPage;
    var visible = filtered.slice(start, start + perPage);

    status.textContent = filtered.length
      ? "Menampilkan " + (start + 1) + "–" +
        (start + visible.length) + " dari " +
        filtered.length + " artikel."
      : "Artikel tidak ditemukan.";

    if (!visible.length) {
      grid.appendChild(createElement(
        "li", "mz-empty",
        "Coba kata kunci atau kategori lain."
      ));
      return;
    }

    visible.forEach(function (post) {
      if (!post.url) return;

      var li = createElement("li", "mz-card");
      var link = createElement("a", "mz-thumb");
      link.href = post.url;
      link.setAttribute("aria-label", post.title);

      if (post.image) {
        var img = document.createElement("img");
        img.src = post.image;
        img.alt = "";
        img.loading = "lazy";
        img.decoding = "async";
        img.onerror = function () {
          link.remove();
        };
        link.appendChild(img);
      } else {
        link.style.display = "none";
      }

      var info = createElement("div", "mz-info");
      var title = createElement("a", "mz-title", post.title);
      title.href = post.url;

      var date = createElement(
        "div", "mz-meta", formatDate(post.published)
      );

      info.appendChild(title);
      if (date.textContent) info.appendChild(date);

      if (post.labels.length) {
        var label = createElement(
          "div", "mz-label", post.labels.join(", ")
        );
        info.appendChild(label);
      }

      li.appendChild(link);
      li.appendChild(info);
      grid.appendChild(li);
    });

    var previous = createElement("button", "", "Sebelumnya");
    previous.type = "button";
    previous.disabled = page <= 1;
    previous.addEventListener("click", function () {
      page--;
      renderPosts();
    });
    pages.appendChild(previous);

    for (var i = 1; i <= totalPages; i++) {
      var button = createElement("button", "", String(i));
      button.type = "button";
      button.setAttribute("aria-label", "Halaman " + i);

      if (i === page) {
        button.setAttribute("aria-current", "page");
      }

      (function (targetPage) {
        button.addEventListener("click", function () {
          page = targetPage;
          renderPosts();
        });
      })(i);

      pages.appendChild(button);
    }

    var next = createElement("button", "", "Berikutnya");
    next.type = "button";
    next.disabled = page >= totalPages;
    next.addEventListener("click", function () {
      page++;
      renderPosts();
    });
    pages.appendChild(next);
  }

  function loadBatch(startIndex) {
    var feedUrl = "/feeds/posts/default?alt=json&max-results=" +
      batchSize + "&start-index=" + startIndex;

    return fetch(feedUrl, { credentials: "same-origin" })
      .then(function (response) {
        if (!response.ok) {
          throw new Error("Feed tidak dapat diakses.");
        }
        return response.json();
      })
      .then(function (data) {
        var feed = data.feed || {};
        var entries = feed.entry || [];
        posts = posts.concat(entries.map(makePost).filter(function (post) {
          return post.title && post.url;
        }));

        var total = Number(
          feed.openSearch$totalResults &&
          feed.openSearch$totalResults.$t
        ) || posts.length;

        var nextIndex = startIndex + entries.length;

        if (entries.length && nextIndex <= total &&
            nextIndex <= batchSize * maxPagesToLoad) {
          return loadBatch(nextIndex);
        }
      });
  }

  search.addEventListener("input", function () {
    page = 1;
    renderPosts();
  });

  category.addEventListener("change", function () {
    page = 1;
    renderPosts();
  });

  sort.addEventListener("change", function () {
    page = 1;
    renderPosts();
  });

  loadBatch(1).then(function () {
    addOptions();
    renderPosts();
  }).catch(function (error) {
    status.textContent =
      "Daftar artikel gagal dimuat. Periksa URL feed Blogger, " +
      "akses publik blog, atau coba kembali nanti.";
    if (window.console) console.error(error);
  });
})();
</script>
```

    
Catatan sebelum menggunakan kode


    
    
      
  • Kode menggunakan feed posting Blogger yang dapat diakses secara publik.
    • 
      
  • Daftar artikel dimuat bertahap dengan ukuran 150 posting per permintaan, hingga batas 20 permintaan pada implementasi ini.
    • 
      
  • Jumlah artikel yang ditampilkan bergantung pada ketersediaan feed dan pengaturan blog.
    • 
      
  • Posting yang tidak memiliki gambar tetap ditampilkan, tetapi tanpa thumbnail.
    • 
      
  • Jika blog memiliki ribuan artikel, pertimbangkan penyesuaian batas pemuatan agar halaman tidak membutuhkan waktu terlalu lama.
    •

Cara Memasang Sitemap di Blogger Langkah demi Langkah

Langkah 1: Masuk ke dashboard Blogger

Buka Blogger, kemudian masuk menggunakan akun Google yang mengelola blog Anda.

Langkah 2: Buka menu Halaman

Pilih blog yang ingin dikelola, lalu klik menu Halaman pada sidebar dashboard Blogger.

Langkah 3: Buat halaman baru

Klik tombol untuk membuat halaman baru. Berikan judul yang mudah dipahami, misalnya Sitemap, Daftar Isi, atau Semua Artikel.

Langkah 4: Beralih ke mode HTML

Di editor halaman, pilih tampilan HTML. Jangan menempelkan kode pada mode penulisan biasa karena editor dapat memperlakukan sebagian kode sebagai teks atau mengubah strukturnya.

Langkah 5: Tempelkan kode lengkap

Salin seluruh kode sitemap yang tersedia pada bagian sebelumnya dan tempelkan ke editor HTML halaman baru.

Pastikan seluruh bagian kode tersalin, mulai dari tag <style> sampai tag penutup </script>.

Langkah 6: Pratinjau halaman

Gunakan fitur pratinjau jika tersedia. Periksa apakah kontrol pencarian, daftar artikel, gambar mini, kategori, dan tombol halaman muncul dengan benar.

Jika daftar artikel belum muncul, jangan langsung memublikasikan halaman sebagai hasil akhir. Periksa bagian pemecahan masalah di bawah.

Langkah 7: Publikasikan halaman sitemap

Jika tampilan sudah sesuai, klik Publikasikan. Setelah itu, buka halaman sitemap dari alamat publik blog untuk memastikan hasilnya berfungsi bagi pengunjung.

Langkah 8: Tambahkan tautan sitemap ke navigasi blog

Agar pengunjung mudah menemukannya, tambahkan tautan halaman sitemap ke menu navigasi atau widget halaman Blogger jika sesuai dengan desain tema.

Untuk panduan membuat halaman statis, Anda dapat membaca artikel Maznara.com Cara Membuat Halaman Statis.

Fitur Sitemap Blogger yang Dibuat

1. Thumbnail otomatis

Kode mencoba mengambil gambar mini dari metadata thumbnail pada feed Blogger. Jika metadata tersebut tidak tersedia, kode mencoba mencari gambar pertama dalam konten artikel.

Karena gambar di setiap posting bisa berbeda, beberapa artikel mungkin tidak memiliki thumbnail. Untuk hasil yang konsisten, gunakan gambar utama yang relevan pada setiap posting.

2. Pencarian berdasarkan judul

Kolom pencarian memungkinkan pengunjung menyaring daftar berdasarkan kata yang terdapat dalam judul artikel. Hasil diperbarui ketika pengguna mengetik kata kunci.

3. Filter berdasarkan label

Daftar kategori dibuat dari label posting yang tersedia pada feed. Pengunjung dapat memilih satu label untuk mempersempit daftar artikel.

Jika blog menggunakan label yang terlalu banyak atau tidak konsisten, menu kategori dapat menjadi kurang praktis. Karena itu, gunakan label yang jelas dan sesuai dengan struktur topik blog.

4. Pengurutan artikel

Pengunjung dapat mengurutkan posting berdasarkan tanggal publikasi terbaru, tanggal pembaruan, atau tanggal publikasi terlama.

5. Pagination

Artikel dibagi ke dalam beberapa halaman, masing-masing berisi hingga 12 posting. Pembagian ini membantu menjaga tampilan agar tidak terlalu panjang.

6. Desain responsif

Tampilan menggunakan CSS Grid dan media query agar kartu artikel menyesuaikan ukuran layar. Pada layar yang lebih sempit, daftar artikel berubah menjadi satu kolom sehingga lebih nyaman dibaca melalui ponsel.

Meskipun desain sudah dibuat responsif, hasil akhir tetap perlu diperiksa pada tema Blogger yang digunakan karena CSS global tema dapat memengaruhi tampilan halaman.

Cara Menyesuaikan Tampilan Sitemap

Anda dapat mengubah tampilan sitemap sesuai dengan identitas visual blog tanpa harus mengganti logika JavaScript.

Mengubah jumlah artikel per halaman

Temukan baris berikut pada kode JavaScript:

var perPage = 12;

Ganti angka 12 sesuai kebutuhan. Misalnya, gunakan 8 untuk menampilkan delapan artikel per halaman atau 16 untuk menampilkan lebih banyak kartu. Semakin banyak kartu yang ditampilkan, semakin panjang halaman yang perlu dirender.

Mengubah lebar thumbnail

Cari bagian CSS berikut:

#mz-sitemap .mz-thumb {
  flex: 0 0 104px;
  width: 104px;
}

Anda dapat mengubah ukuran 104px menjadi nilai lain sesuai desain. Pastikan ukuran desktop dan ponsel tetap proporsional.

Mengubah warna utama

Pada bagian awal CSS, ubah variabel berikut:

#mz-sitemap {
  --mz-border: #e5e7eb;
  --mz-text: #202124;
  --mz-muted: #666;
  --mz-accent: #1769aa;
}

Variabel --mz-accent digunakan untuk warna aksen seperti tautan label dan tombol halaman aktif. Sesuaikan warnanya dengan identitas visual blog Anda.

Mengubah jumlah posting yang dimuat

Kode awal menggunakan pengaturan berikut:

var maxPagesToLoad = 20;
var batchSize = 150;

Pengaturan tersebut membatasi pemuatan hingga sekitar 3.000 entri dalam kondisi normal. Angka ini merupakan batas implementasi, bukan jaminan bahwa semua posting akan selalu tersedia dalam feed. Jika jumlah posting jauh lebih banyak, Anda perlu menyesuaikan strategi pemuatan dan mempertimbangkan performa halaman.

Cara Mengatasi Sitemap Blogger Tidak Berfungsi

1. Daftar artikel terus menampilkan pesan memuat

Periksa apakah halaman sudah dipublikasikan dan feed Blogger dapat diakses. Pastikan juga kode JavaScript tersalin secara lengkap dan tidak mengalami perubahan saat disimpan.

2. Muncul pesan gagal memuat daftar artikel

Pastikan feed publik dapat diakses melalui browser. Anda dapat mencoba membuka alamat berikut dengan domain blog Anda sendiri:

https://ALAMAT-BLOG-ANDA/feeds/posts/default?alt=json&max-results=10

Ganti ALAMAT-BLOG-ANDA dengan domain blog yang sebenarnya. Jika feed tidak dapat diakses, periksa pengaturan feed dan akses publik blog.

3. Thumbnail tidak muncul

Periksa apakah posting memiliki gambar. Beberapa gambar mungkin tidak tersedia pada metadata feed, atau URL gambar tidak dapat diakses. Pastikan gambar utama benar-benar disimpan dan ditampilkan pada artikel.

4. Label tidak muncul di filter kategori

Menu kategori dibuat dari label yang tersedia pada feed. Jika posting tidak menggunakan label atau feed tidak menyediakan data label yang diharapkan, menu mungkin hanya menampilkan pilihan semua kategori.

5. Sitemap tidak menampilkan seluruh posting

Implementasi ini memiliki batas pemuatan untuk menjaga performa. Jika blog mempunyai banyak sekali artikel, jumlah yang ditampilkan dapat dibatasi oleh kode, feed, atau konfigurasi Blogger.

6. Tampilan berantakan setelah dipasang

Periksa kemungkinan konflik dengan CSS tema Blogger. Kode menggunakan awalan mz- dan pembungkus #mz-sitemap untuk membatasi gaya, tetapi beberapa aturan global tema tetap dapat memengaruhi hasil.

7. JavaScript tidak berjalan di halaman Blogger

Pastikan kode ditempelkan melalui mode HTML. Jika masalah tetap terjadi, periksa konsol browser untuk melihat pesan kesalahan. Fitur keamanan, perubahan editor, atau aturan tema tertentu dapat memengaruhi cara kode dijalankan.

Hindari menambahkan banyak skrip eksternal yang tidak diperlukan karena ketergantungan tersebut dapat menambah risiko gangguan ketika layanan pihak ketiga berubah atau tidak tersedia.

Perbedaan Sitemap Visual dan Sitemap XML

Istilah sitemap sering digunakan untuk dua jenis halaman atau berkas yang memiliki tujuan berbeda. Memahami perbedaannya penting agar Anda tidak mengandalkan halaman yang salah untuk kebutuhan SEO.

Aspek Sitemap Visual Sitemap XML
Tujuan utama Membantu pengunjung menemukan artikel Membantu mesin pencari menemukan URL
Format HTML, CSS, dan JavaScript XML atau format sitemap yang didukung
Thumbnail Dapat ditampilkan sebagai gambar mini Bukan fitur utama sitemap XML standar
Pencarian dan filter Dapat ditambahkan secara interaktif Tidak ditujukan untuk interaksi pengunjung
Pengguna utama Pembaca website Mesin pencari dan sistem yang memproses sitemap

Jika tujuan Anda adalah menyediakan daftar artikel yang nyaman digunakan pengunjung, sitemap visual merupakan pilihan yang sesuai. Jika ingin membantu Google menemukan URL, gunakan sitemap XML yang sesuai dengan platform Blogger dan kirimkan melalui Google Search Console jika diperlukan.

Perlu diingat bahwa pengiriman sitemap XML tidak menjamin semua URL akan diindeks atau mendapat peringkat tertentu di Google.

FAQ: Pertanyaan Umum tentang Sitemap Blogger

1. Apakah sitemap visual Blogger gratis?

Ya. Kode pada panduan ini dapat dipasang pada halaman Blogger tanpa biaya lisensi tambahan. Anda hanya perlu memiliki blog dan akses untuk membuat halaman.

2. Apakah saya harus mengedit HTML tema Blogger?

Tidak untuk kode yang digunakan dalam tutorial ini. Kode CSS dan JavaScript ditempatkan langsung pada halaman statis melalui mode HTML, sehingga Anda tidak harus mengubah template utama.

3. Apakah sitemap ini menampilkan posting secara otomatis?

Ya, kode mengambil daftar posting melalui feed Blogger. Namun, hasilnya bergantung pada ketersediaan feed, jumlah posting, dan batas pemuatan yang ditentukan dalam kode.

4. Mengapa beberapa artikel tidak memiliki thumbnail?

Posting tersebut mungkin tidak memiliki gambar yang dapat ditemukan melalui metadata thumbnail atau gambar pertama dalam kontennya. Tambahkan gambar utama yang relevan agar tampilan daftar lebih konsisten.

5. Apakah sitemap visual membantu SEO?

Sitemap visual dapat membantu navigasi dan penemuan konten oleh pengunjung. Tautan internal yang dapat dirayapi juga dapat membantu mesin pencari menemukan halaman, tetapi sitemap visual tidak menjamin peningkatan peringkat.

6. Apakah sitemap visual menggantikan sitemap XML?

Tidak. Keduanya memiliki fungsi berbeda. Sitemap visual ditujukan untuk pengunjung, sedangkan sitemap XML digunakan untuk membantu mesin pencari memahami daftar URL.

7. Bisakah kode ini digunakan pada semua tema Blogger?

Kode dirancang agar dapat digunakan pada halaman statis Blogger, tetapi kompatibilitas akhir dapat dipengaruhi oleh tema, pengaturan feed, dan perubahan editor. Lakukan pratinjau dan pengujian setelah pemasangan.

8. Apakah saya bisa mengubah warna dan ukuran gambar?

Bisa. Ubah variabel warna dan aturan CSS yang mengatur ukuran thumbnail, jarak antarkartu, serta tampilan responsif.

9. Mengapa halaman sitemap terasa lambat?

Waktu pemuatan dapat dipengaruhi jumlah posting, ukuran gambar, kecepatan jaringan, dan proses pengambilan feed. Jika blog sangat besar, kurangi batas pemuatan atau gunakan pendekatan yang memuat data secara lebih bertahap.

10. Bagaimana cara menampilkan tautan sitemap di menu blog?

Anda dapat menambahkan halaman sitemap melalui widget Halaman atau menambahkan tautannya ke menu navigasi tema, sesuai fitur yang tersedia pada template Blogger Anda.

Kesimpulan

Membuat sitemap Blogger dengan gambar mini posting merupakan salah satu cara untuk meningkatkan kemudahan navigasi blog. Dengan daftar artikel yang dilengkapi thumbnail, judul, kategori, pencarian, pengurutan, dan pagination, pengunjung dapat menjelajahi konten secara lebih praktis.

Kode pada panduan ini dirancang agar dapat dipasang langsung melalui halaman statis Blogger tanpa mengharuskan Anda mengedit template utama. Meski demikian, pengujian tetap diperlukan karena feed, tema, dan konfigurasi setiap blog dapat berbeda.

Ingat bahwa sitemap visual bukan pengganti sitemap XML. Gunakan keduanya sesuai kebutuhan: sitemap visual untuk membantu pembaca, dan sitemap XML untuk mendukung penemuan URL oleh mesin pencari.

Semoga panduan ini membantu Anda membuat halaman daftar isi blog yang lebih menarik, terstruktur, dan mudah digunakan.

Referensi

  1. Blogger. Platform Blogger. Platform untuk mengelola blog dan menerbitkan halaman.
  2. Google Search Central. Learn about sitemaps. Dokumentasi resmi tentang fungsi dan penggunaan sitemap untuk mesin pencari.
  3. Maznara.com. Cara Membuat Halaman Statis. Panduan internal terkait pembuatan halaman pada Blogger.

Catatan: Tampilan dashboard Blogger dapat berubah. Jika terdapat perbedaan antarmuka, ikuti opsi yang tersedia pada akun Blogger Anda.

Posting Komentar untuk "Cara Membuat Sitemap Blogger dengan Gambar Mini Posting (Thumbnail) Otomatis "

Silahkan Berkomentar Dengan Bijak