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)
    <!-- 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 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+"'>"+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:

Tulis komentar untuk:

Cara membuat halaman sitemap (daftar isi) blog otomatis

Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini. Dukungan tag HTML: Bold Text, Italic Text, and Link Text (Hanya jika diperlukan).

Berlangganan Artikel
Dengan berlangganan artikel kami, anda akan mendapatkan setiap update yang diterbitkan pada situs wiBlogger.com langsung melalui akun email anda. Pastikan juga anda mengkonfirmasi alamat email anda untuk dapat mengaktifkan layanan.
×
Jangan tampilkan lagi