wiblogger

Cara membuat halaman sitemap (daftar isi) blog otomatis

Apa sih fungsi Halaman Sitemap ? Apakah halaman sitemap memang merupakan halaman (anggaplah) wajib untuk sebuah situs / blog ? Sebelum membahas tentang bagaimana cara membuat sitemap blog secara otomatis, sedikit akan kita tinjau mengenai apa itu Sitemap blog.

Dalam blogging, kata sitemap digunakan untuk mewakili 2 jenis konten. Pertama, Sitemap XML, yaitu sebuah file XML yang berisi URL-URL postingan blog. Lebih jauh tentang Sitemap XML telah dibahas pada modul SEO: Cara submit sitemap blog di google search console.

Selain untuk Sitemap XML, kata ini juga sering kali digunakan untuk mewakili Halaman daftar isi blog. Dengan kata lain, kata sitemap juga bisa mengarah pada halaman html yang berisi link menuju ke semua postingan blog. Halaman daftar isi blog ini bisa kita sebut sebagai Halaman Sitemap.

Antara Sitemap XML dan Halaman Sitemap jelas berbeda. Sementara Sitemap XML merupakan sebuah file XML, Halaman Sitemap tidak ubahnya seperti halaman web pada umumnya.

Dilihat dari fungsinya, sitemap xml dan halaman sitemap memiliki fungsi yang sama yaitu untuk memudahkan crawler mesin pencari dalam menjelajahi / mengindeks halaman blog.

Jika saya sudah melakukan submit sitemap xml di google search console, apakah saya juga perlu membuat halaman sitemap ?

Seperti yang telah disampaikan pada postingan cara submit sitemap di google search console, proses penambahan sitemap XML tidak akan banyak membantu untuk keperluan indeks halaman yang akan diterbitkan selanjutnya. Dengan kata lain, crawler google tidak melakukan scan ulang terhadap file sitemap XML yang ditambahkan secara berkala.

Untuk lebih jelasnya, saya misalkan blog anda memiliki 20 postingan yang belum terindeks oleh google. Ketika anda menambahkan URL sitemap XML di google search console, crawler google hanya akan membaca file sitemap ini satu kali. Postingan yang akan anda terbitkan selanjutnya tidak akan secara otomatis ditambahkan pada daftar konten yang tersubmit.


Fungsi Halaman Sitemap

Untuk keluar dari keterbatasan diatas, pembuatan halaman sitemap menjadi langkah yang sangat tepat. Sedikit mengulang apa yang telah disampaikan pada halaman utama belajar SEO, cara crawler mesin pencari dalam menemukan halaman-halaman baru adalah dengan mengikuti link-link pada suatu halaman yang akan membawa mereka pada halaman lainnya. Disinilah kekuatan Halaman sitemap bekerja. Dengan membuat halaman sitemap, kita “memberikan jalan” kepada crawler mesin pencari untuk dapat meng-crawl semua postingan / konten blog dengan lebih mudah.


Cara membuat halaman sitemap

  • Pertama, buat halaman statis baru.

    Cara membuat halaman blog
  • Beri judul "Daftar isi" atau "Sitemap" (atau apapun yang anda kehendaki). Copy dan paste semua kode dibawah ini kedalam Editor Laman dengan mode HTML.

    Kode (CSS & Javascript) - Update 16 April 2020
    <!-- Sitemap by wiBlogger.com -->
    <style>
    #w-sitemap-wrapper {font-size:13px}
    #w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 6.923em;border-top:none;border-bottom:1px solid #f6f6f6}
    #w-sitemap-wrapper span {position:absolute;left:0;color:#bd8b56}
    #w-sitemap-wrapper a {font-weight:bold}
    #w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}
    </style>

    <script>
    (function(c,m){var F=function(s){return s.replace(/&(?!(amp|gt|lt|quot|apos);)/g,function(a){return"&amp;"}).replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")};var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+F(C)+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading......");
    </script>
  • Publikasikan laman.

    cara membuat halaman daftar isi secara otomatis


Hasil

Hasil pembuatan sitemap dengan kode diatas kurang lebih seperti gambar dibawah (Warna link akan mengikuti style / CSS blog). Anda juga bisa menambahkan paragraf awal atau akhir pada konten sitemap seperti yang diterapkan pada halaman daftar isi wiBlogger.com.

membuat halaman sitemap simpel


Info:
Pada script diatas, label setiap postingan sengaja tidak saya sertakan. Hal ini untuk menghindari resiko terdeteksi spam oleh crawler mesin pencari (terlalu banyak duplikat link).


Tambahan

Pada kode diatas, beberapa bagian yang ditandai dengan warna merah bisa anda sesuaikan.

  • 13px
    Ukuran font
  • 18px
    Ukuran font text loading
  • #f6f6f6
    Kode warna HTML untuk border
  • #bd8b56
    Kode warna HTML untuk waktu publikasi
  • #bbbbbb
    Kode warna HTML untuk text loading
  • Loading......
    text yang ditampilkan pada proses loading
  • dd/mm/yyyy
    Format waktu publikasi. dd adalah tanggal, mm adalah bulan, yyyy adalah tahun. Misal, jika format ini anda ganti menjadi dd-mm-yyyy, hasil akan berupa 28-01-2018. Selain pembatas, anda juga bisa menyesuaikan urutan data.


Menambahkan sitemap pada menu navigasi blog

Agar halaman sitemap ini dapat dengan mudah ditemukan oleh crawler mesin pencari, langkah selanjutnya yang sangat penting adalah menambahkan link halaman yang telah dibuat ke navigasi blog. Sebagai contoh, link sitemap blog wiBlogger.com ini saya letakkan pada navigasi halaman dibagian bawah blog (footer).

menambahkan link sitemap ke navigasi blog

Setiap tema (template) memiliki struktur dan dukungan widget yang berbeda, ikuti panduan tema yang anda gunakan untuk menambahkan link sitemap ke navigasi blog.


Tips:
  • Untuk mempercepat proses indeks postingan, selalu luangkan waktu untuk melakukan fetch as google setiap kali anda menerbitkan postingan baru.
  • Terkait fitur Fetch as google di google search console, anda bisa melakukan fetch halaman sitemap ini dengan memilih opsi mode pengindeksan "Rayapi URL ini dan link langsungnya".

    Cara mengindeks postingan blog sekaligus

    Direkomendasikan untuk melakukan hal ini setidaknya satu bulan sekali untuk menjaga agar setiap postingan anda tetap terindek oleh google.


Rekomendasi postingan:

Bagikan ke:

6 Komentar untuk:

Cara membuat halaman sitemap (daftar isi) blog otomatis
  1. cara bikin sitemap/daftar isi terkait dengan label/categori, misal kayak label blogger ? ada sitemap/daftar isinya sendiri dalam 1 blog

    BalasHapus
    Balasan
    1. udah nemu jawabannya gan, tinggal ganti and tambah scrip deafaut/-/label

      Hapus
  2. halo mas..terima kasih atas pos ini..

    Bagaimana caranya agar SITEMAPNYA bisa diurutkan PER LABEL??

    BalasHapus
    Balasan
    1. Seperti yang diinformasikan diatas mas, sitemap ini sengaja dibuat tanpa label untuk menghindari duplikat link, takutnya terdeteksi spam.Sitemap ini dibuat untuk tujuan index mesin pencari saja, bukan untuk navigasi blog.

      Hapus
  3. hal mas, kendala saya sekarang,,

    Masalahnya begini.
    Banyak artikel di blog saya tidak muncul di daftar isi atau sitemap (KALAU DIBUAT PAKE LABEL, tp Kalau pake scriptnya mas ini yg tidak pake label, semua muncul).


    Saya ganti domain dari blogspot ke .com dan Semua artikel yang dibuat sebelum tahun 2020, (sebelum ganti domain) tidak muncul di sitemap.

    Contohnya begini: ada label blog saya nama "materi kuliah". Jumlah artikel di label itu ada 105 artikel, tetapi yang muncul di sitemap atau daftar isi dalam label itu hanya 36 artikel.

    Masalahnya lagi, setiap kali saya tambahkan artikel ke label itu, tetap saja 36, tidak bertambah. Jadi, misalnya saya buat artikel baru, lalu tambahkan ke label "Materi kuliah" tadi, bukannya bertambah,tapi tetap saja 36. Jadi artikel yang lama hilang 1, ganti dengan artikel yang baru dibuat. Begitu terus yang terjadi.

    Saya sudah cek di webmaster. Semua artikel di blog saya, sudah terindex semua.
    Saya juga sudah coba ganti script sitemap,tetapi masalah tidak bisa teratasi.

    Catatan: awalnya saya pakai domain blogspot (gratis), baru satu tahun terakhir ini sudah ganti dengan domain .com
    Dan semua artikel yang dipublikasikan sebelum tahun 2020, (sebelum ganti domain) tidak muncul di sitemap atau daftar isi.
    Bagaimana caranya. Tolong saya para master.
    Terima kasih. (nama blog saya: pegiatliterasi.com)

    BalasHapus
    Balasan
    1. Masalah: Banyak posting yang tidak muncul
      Ini karena script sitemap yang mas gunain gak support seluruh posting mas, kesalahan bukan dari blog atau domain, ini murni karena (dalam tanda kutif) ketidaksempurnaan scriptnya.

      Biasanya script model ini hanya menampilkan post sebanyak 150 buah, tepatnya adalah post terbaru, yang lama tidak akan muncul.

      Solusi
      Ganti scriptnya, cari-cari aja di google banyak yang share sitemap dengan label. Ya dicoba-coba aja mas, ambil yang bisa nampilin semua posting ^_^

      Hapus
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi