Sitemap Blogger

Ada dua macam sitemap. Pertama sitemap XML yang ditujukan untuk robot mesin pencari, kedua sitemap HTML yang ditujukan untuk pengunjung blog. Tentunya Desain Blog akan memberikan panduan lengkap untuk membuat kedua sitemap tersebut.

Kenapa dua-duanya? Supaya menghemat waktu sobat. Sobat tidak perlu repot mecari ke postingan atau blog berbeda, untuk dua hal yang hampir sama. Cukup di sini saja.

Tentang Sitemap

Diantara sobat blogger mungkin ada yang sudah paham apa itu sitemap dan ada juga yang baru pertama mendengar kata sitemap. Untuk itu akan saya jelaskan sedikit.

Sitemap dalam bahasa Indonesia disebut juga Peta Situs (menurut Google). Namun menurut beberapa blogger Indonesia Sitemap juga bisa disebut Daftar Isi, meskipun ini sedikit membingungkan karena maknanya ambigu. Kenapa demikian?

Biasanya, di dalam sebuah postingan blog juga ada yang namanya daftar isi, terutama untuk postingan yang jumlah katanya tergolong banyak. Daftar isi pada sebuah postingan berfungsi untuk menunjukkan kepada pembaca hal-hal apa saja yang akan dibahas di postingan itu.

Daftar isi di dalam postingan tentunya berbeda dengan daftar isi yang berarti sitemap.

Meskipun begitu, istilah daftar isi itu juga lumayan ada benarnya, karena sitemap memang berisi daftar seluruh postingan yang ada di sebuah blog. Tapi walaupun bisa dibilang benar, tetap saja agak sedikit membingungkan. Terutama bagi blogger pemula.

Untuk itu, di tutorial ini kita akan menyebutnya Sitemap atau Peta Situs saja bukan daftar isi.

Sitemap XML

Sitemap XML berguna untuk mempercepat index oleh mesin pencari. Sobat bisa mengirimkan sitemap XML blog lewat Search Console.

Sitemap XML yang sudah dikirimkan biasanya akan diproses oleh Google dalam waktu beberapa hari.

Tutorial Sitemap XML

Berikut tutorial pengiriman Sitemap XML lewat Google Search Console:

#1: Untuk mengirimkan sitemap XML ke Google sobat klik link berikut ini Google Search Console.

#2: Jika sobat sudah login ke akun Google sobat, maka akan langsung dibawa ke halaman dashboard Search Console. Tapi jika belum maka sobat perlu login dulu, masukkan alamat gmail lalu masukkan password gmail sobat.

#3: Pada dashboard Search Console, pilih Properti, kemudian klik properti blog yang ingin dikirimkan sitemap XMLnya. Tentu saja blog tersebut harus sudah diverifikasikan ke Search Console sebelumnya.

#4: Jika sudah, pada panel yang tersedia klik Peta Situs/Sitemap. Kemudian sobat akan dibawa ke halaman pengiriman sitemap.

#5: Pada kolom yang tersedia masukkan alamat sitemap seperti contoh pada gambar di bawah ini (ganti "tutorialnyablogger.blogspot.com" dengan alamat blog sobat). Setelah itu klik kirim.

#6: Jika berhasil maka sobat akan melihat pesan bahwa sitemap/peta situs telah berhasil dikirim. Jika mengikuti semua langkah-langkah di atas dengan benar kemungkinan besar pasti berhasil.

Sitemap HTML

Sitemap HTML adalah sebuah halaman blog yang berisi link seluruh postingan yang ada di sebuah blog atau situs web, biasanya disusun berdasarkan label, tanggal penerbitan atau alfabetis.

Ketika pengunjung ingin mencari postingan spesifik bisa menggunakan fasilitas widget search. Namun bagaimana jika pengunjung ingin melihat semua postingan blog dengan membuka satu halaman saja, tanpa harus berlama-lama? Disinilah ketika sitemap HTML diperlukan.

Misalnya seorang penunjung datang ke blog sobat, melalui search engine atau link di sosial media. Lalu sobat menyambutnya dengan suguhan konten yang menarik dan bermanfaat.

Pengunjung pasti akan berpikir "Wah kok bagus ya? Jangan-jangan masih banyak lagi yang bagus. Coba cari lagi ah"

Biasanya pengunjung yang terkesan dengan salah satu postingan sobat akan mencari cara untuk menemukan postingan-postingan bermanfaat lainnya. Nah, salah satu caranya adalah dengan menggunakan sitemap HTML.

Selain itu, sitemap HTML adalah salah satu fitur yang wajib dimiliki oleh setiap blog atau situs web, sebagai salah satu syarat kelengkapan mendaftar Google Adsense.

Tutorial Sitemap HTML

Untuk sitemap HTML yang akan saya bagikan berikut ini, disusun berdasarkan label dan juga secara alfabetis. Jadi lebih memudahkan pengunjung. Selain itu juga scriptnya tidak dihosting ditempat lain, jadi loadingnya lebih cepat. Berikut tutorialnya:

#1: Login ke akun Blogger sobat.

#2: Dari dashboard Blogger klik Halaman, kemudian pilih tambahkan halaman baru.

#3: Setelah Editor Posting terbuka pastikan sobat memilih mode HTML.

#4: Copy semua kode di bawah ini lalu pastekan pada kolom yang tersedia.

<div id="sitemap">
<script type='text/javascript'>
var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}
function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}
function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}
function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}
function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
        firsti = a;
        do {
            document.write("<p>");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div></div>");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}
</script>
<script src="https://desainblog.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript">
</script>
</div>

<style>
h1 {margin-bottom:.5em;}
h4 {color:#444;text-align:center;border-top:1px solid #887;background:#eaeaea;margin:.5em 0;padding:.3em 0;}
p a:link {color:#777;}
strong {color:#08FF00;}
#comments{display:none;margin:0;padding:0;}
</style>
Catatan: Jangan lupa, ganti tulisan yang berwarna merah dengan alamat blog sobat.

#5: Setelah selesai semua, jangan pindah dari mode HTML ke mode Compose karena akan mengubah kode. Tetap di mode HTML, lalu klik publikasikan.

#6: Untuk menaruh link sitemap di menu navigasi, caranya dari menu halaman, klik lihat dari halaman sitemap.

#7: Pada address bar akan terlihat alamat sitemap blog sobat, copy dan pastekan pada menu navigasi blog sobat. Selesai.

Kesimpulan

Dengan terkirimnya sitemap xml dan terpasangnya sitemap html, sekarang blog sobat sudah menjadi lebih cepat diindex dan juga lebih ramah pengunjung.

Setiap kali pengunjung ingin mengetahui postingan apa saja yang ada di blog sobat, bisa dengan mudah menggunakan fasilitas sitemap.