Cara Membuat Sitemap Super Keren di Blog



Membuat laman sitemap atau daftar isi untuk Blog adalah salah satu cara terbaik untuk meningkatkan kualitas SEO. Seperti yang dijelaskan oleh Google pada halaman websitenya, bahwa keberadaan sitemap dapat memberitahukan mesin pencari seperti google atau mesin pencari lainnya atas keberadaan isi konten suatu website.


Pengertian Sitemap

Sitemap atau daftar isi adalah halaman yang berisi seluruh postingan pada situs yang memuat banyak URL atau daftar semua link/Url yang ada. Dengan adanya sitemap di Blog akan membuat pengunjung bisa dengan mudah mencari artikel yang diinginkan.

Fungsi Sitemap

Sitemap sendiri berfungsi sebagai peta untuk search engine agar cepat mengindeks url baru yang ada di dalam website. Mesin pencari seperti Google, Bing,Yandex atau mesin pencari lainnya akan lebih mudah menemukan setiap Link yang ada di dalam blog, yang nantinya akan berdampak pada cepat atau tidaknya pengindeksan konten di halaman pencarian. Oleh sebab itu Sitemap sangatlah penting untuk optimasi SEO (Search Engine Optimization).

Demo

Cara Membuat Sitemap di Blog

Seperti biasa sebelum ketahap pembuatan, alangkah baiknya sobat cek terlebih dahulu tampilan sitemap yang akan dipasang pada Blog melalui link demo di atas, atau silahkan klik menu navigasi sitemap yang ada di blog infonetmu.com pada bagian footer. Bagaimana sudah dicek?, jika tertarik mari kita lanjut ke cara pembuatan atau lebih tepatnya pemasangan sitemap di blog.

1. Masuk di halaman Blog sobat, kemudian pilih Theme ⇒ EDIT HTML dan simpan CSS dibawah ini dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>

.sitemaps .sitemap-box {
    margin: 20px 15px;
    font-size: 14px;
    line-height: 1.5em;
    padding: 15px 18px;
    border-radius: 8px;
    background-color: rgb(251 251 251 / 8%);
    box-shadow: 0 4px 12px 0 rgba(9, 32, 76, .035)
}
.sitemaps .judul {
    margin-top: 0;
    font-size: 1.1rem
}
.sitemaps ol {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    counter-reset: panduan-count;
    font-size: 14px
}
.sitemaps li {
    display: flex;
    align-items: normal;
    padding: 5px 0
}
.sitemaps li:before {
    display: inline-flex;
    content: counter(panduan-count)'.';
    counter-increment: panduan-count;
    flex-shrink: 0;
    width: 40px;
    font-size: 26px;
    line-height: 1em;
    color: #767676;
    text-align: center;
    padding-right: 12px
}
.sitemaps li a {
    display: inline-block;
    color: #161617;
    font-size: 17px
}
.sitemaps li a:after {
    content: "Selengkapnya";
    display: block;
    color: #767676;
    font-size: 11px;
    line-height: 1.3em
}
.blog-pager .js-loading::after,
.blog-pager a.blog-pager-older-link::after,
.blog-pager::after {
    content: ""
}
.sitemaps li a:hover:after {
    text-decoration: underline
}

2. Selanjutnya letakkan code JavaScript di bawah ini di atas code </head> atau </body>

<script>
/*<![CDATA[*/
var toc_config = {
    containerId: "sitemaps",
    showNew: 0,
    sortAlphabetically: {
        thePanel: !0,
        theList: !0
    },
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: "sitemaps",
    delayLoading: 0
};
window.onload = function() {
    ! function(e, o) {
        var n = o.getElementById(toc_config.containerId),
            t = o.getElementsByTagName("head")[0],
            i = [];
        e[toc_config.jsonCallback] = function(e) {
            for (var o, t, l = e.feed.entry, c = e.feed.category, a = "", s = 0, d = c.length; d > s; ++s) i.push(c[s].term);
            for (var f = 0, r = l.length; r > f; ++f)(toc_config.showNew || toc_config.showNew > 0) && f < toc_config.showNew + 1 && (l[f].title.$t += " %new%");
            l = toc_config.sortAlphabetically.theList ? l.sort(function(e, o) {
                return e.title.$t.localeCompare(o.title.$t)
            }) : l, toc_config.sortAlphabetically.thePanel && i.sort();
            for (var g = 0, u = i.length; u > g; ++g) {
                a += '<div class="sitemap-box"><h4 class="titlemaps">' + i[g] + "</h4>", a += "<ol>";
                for (var h = 0, p = l.length; p > h; ++h) {
                    o = l[h].title.$t;
                    for (var w = 0, _ = l[h].link.length; _ > w; ++w)
                        if ("alternate" == l[h].link[w].rel) {
                            t = l[h].link[w].href;
                            break
                        }
                    for (var k = 0, m = l[h].category.length; m > k; ++k) i[g] == l[h].category[k].term && (a += '<li><a href="' + t + '" title="' + o.replace(/ \%new\%$/, "") + '">' + o.replace(/ \%new\%$/, "") + "</a></li>")
                }
                a += "</ol></div></div>"
            }
            n.innerHTML = a, "undefined" != typeof jQuery && $("#" + toc_config.containerId + " .titlemaps").click(function() {
                $(this).hasClass("active") || (toc_config.clickCallback(this), $("#" + toc_config.containerId + " .titlemaps").removeClass("active").next().slideUp(toc_config.slideSpeed.up, toc_config.slideEasing.up, toc_config.slideCallback.up), $(this).addClass("active").next().slideDown(toc_config.slideSpeed.down, toc_config.slideEasing.down, toc_config.slideCallback.down))
            }).eq(toc_config.activePanel - 1).addClass("active").next().slideDown(toc_config.slideSpeed.down, toc_config.slideEasing.down, toc_config.slideCallback.down)
        };
        var l = o.createElement("script");
        l.src = "/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=" + toc_config.jsonCallback, "onload" == toc_config.delayLoading ? e.onload = function() {
            t.appendChild(l)
        } : e.setTimeout(function() {
            t.appendChild(l)
        }, toc_config.delayLoading)
    }(window, document)
};
/*]]>*/
</script>

3. Simpan

4. Langkah terkhir, buat laman baru kemudian paste code pemanggilnya di bawah ini, di halaman HTML atau Code bukan di laman Compose

<div class="sitemaps" id="sitemaps"><div class="loading">Please wait....</div></div>

5. Publish.

Demikian Cara Membuat Sitemap Super Keren di Blog, jika ada pertanyaan terkait hal ini silahkan tinggalkan komentar pada kolom komentar yang sudah kami sedikan.

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments