Cara Membuat Halaman Sitemap (Daftar Isi) Blog Otomatis

MATERI PENDUKUNG

PENGANTAR
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. Ketika kita menambahkan URL sitemap XML di google search console, crawler google hanya akan membaca file sitemap ini satu kali. Postingan yang akan diterbitkan selanjutnya tidak akan secara otomatis ditambahkan pada sitemap XML yang sudah disubmit.

Berkaitan dengan keterbatasan diatas, pembuatan halaman sitemap menjadi langkah yang sangat tepat. Sedikit mengulang apa yang telah disampaikan pada halaman 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

  1. Buat Halaman Statis baru - (Lihat).
  2. Beri judul "Daftar isi" atau "Sitemap" (atau apapun yang anda kehendaki). Letakkan semua kode Script Auto Sitemap di bawah ke dalam Laman Editor dengan Mode HTML - (Lihat).

    SCRIPT AUTO SITEMAP
                
    <div id='w-sitemap' class='w-sitemap' data-sort='newest' data-date='DD/MM/YYYY' data-list-number='start-index' data-text-loading='Loading...' data-text-error='Terjadi kesalahan!' data-start-index='1' data-max-results=''>
    <!-- Auto Sitemap by wiBlogger.com (https://www.wiblogger.com/2018/03/cara-membuat-sitemap-daftar-isi-blog-otomatis.html) -->
    <style>
    .w-sitemap{position:relative}.w-sitemap ol{list-style:none;display:table;width:100%;box-sizing:border-box}.w-sitemap ol>li{position:relative;display:table-row}.w-sitemap ol>li>*{display:table-cell}.w-sitemap ol>li>span{padding-right:15px;font-family:monospace}.w-sitemap ol>li>a{width:100%}.w-sitemap ol time{opacity:.5;letter-spacing:1px;font-family:monospace;padding-right:15px}.w-sitemap-loading,.w-sitemap-error{padding:50px 0;letter-spacing:2px;font-family:monospace;opacity:.5;text-align:center}
    </style>
    <script>
    (()=>{let e="WiSitemap",t="w-sitemap",r=t+"-loading",l=t+"-error",n=window,a=document,i=a.getElementsByTagName("head")[0],d=e=>"number"==typeof e&&!isNaN(e),u=(()=>{let e=/\r?\n|\r/g,t=/\s\s+/g;return r=>r.replace(e," ").replace(t," ").trim()})(),o=(()=>{let e=["true","yes"];return t=>!!t&&-1!==e.indexOf(t)})(),s=(()=>{let e=u;return(t,r,l=!0,n=null)=>{let a=t.getAttribute("data-"+r);return a&&(l&&t.removeAttribute("data-"+r),a=e(a))?a:n}})(),p=((()=>{let e=u,t=o,r=["true","false","yes","no"];return(l,n,a=!0,i=null)=>{let d=l.getAttribute("data-"+n);return d&&(a&&l.removeAttribute("data-"+n),d=e(d),-1!==r.indexOf(d))?t(d):i}})(),(()=>{let e=u,t=(t,r,l,n,a)=>{let i=t.getAttribute("data-"+r);return i&&(l&&t.removeAttribute("data-"+r),i=e(i),-1!==a.indexOf(i))?i:n};return t})()),m=(()=>{let e=u,t=d;return(r,l,n=!0,a=null)=>{let i=r.getAttribute("data-"+l);if(i&&(n&&r.removeAttribute("data-"+l),i=e(i))){let d=parseInt(i);if(t(d))return d}return a}})(),h=(e,...t)=>{for(let r of t)e.classList.add(r)},c=(()=>{let e=/D/g,t=/DD/g,r=/M/g,l=/MM/g,n=/YY/g,a=/YYYY/g,i=(i,d)=>{let u=i.substring(0,4),o=u[2]+u[3],s=i.substring(5,7),p="0"!==s[0]?s:s[1],m=i.substring(8,10),h="0"!==m[0]?m:m[1];return parseInt(s),parseInt(m),d.replace(a,u).replace(n,o).replace(l,s).replace(r,p).replace(t,m).replace(e,h)};return i})(),g=(()=>{let t=n,r=a,l=i,d=t.location,u=d.hostname,o=d.protocol,s=o+"//"+u,p={};t[e]=p;let m=(t,n,a,i)=>{let d=t,u=n,o=c();p[o]=a;let m=s+"/feeds/posts/summary";m+="?alt=json-in-script&start-index="+d+"&max-results="+u+"&callback=window."+e+"."+o;let h=r.createElement("script");h.async=!0,h.src=m,h.onload=e=>{h.parentNode.removeChild(h)},i&&(h.onerror=e=>{i()}),l.appendChild(h)},h=(()=>{let e=e=>{let l=e.feed.entry;if(l&&l.length>0){let n=[];for(let a of l){let i={};i.id=a.id.$t.substring(a.id.$t.indexOf("post-")+5),i.title=a.title.$t,i.url=t(a),i.img=a.media$thumbnail?a.media$thumbnail.url:null,i.authorName=a.author[0].name.$t,i.authorProfileUrl=a.author[0].uri?a.author[0].uri.$t:null,i.published=a.published.$t,i.lastUpdated=a.updated.$t,i.labels=r(a),n.push(i)}return n}return null},t=e=>{let t=e.link;for(let r of t)if("alternate"===r.rel)return r.href;return null},r=e=>{let t=e.category||[],r=[];for(let l of t)r.push(l.term);return r};return e})(),c=(()=>{let e=0,t=()=>{e+=1;let r="loadFeed"+e;return p[r]?t():r};return t})();return{load:m,JSONToPostsArray:h}})();(()=>{let e=c,n=h,i=a,d=s,u=p,o=m,f=i.getElementById(t),b=f,$=o(b,"start-index",!1,1),_=o(b,"max-results",!1,null),x=u(b,"sort",!1,"newest",["newest","oldest"]),C=d(b,"date",!1,""),y=u(b,"list-number",!1,"start-index",["no","yes","start-index"]),A=d(b,"text-loading",!1,"Loading..."),E=d(b,"text-error",!1,"Terjadi kesalahan!"),v=[],N,T=$,w=()=>{A&&((N=i.createElement("div")).innerHTML=A,n(N,r),f.appendChild(N)),M(T,L,Y)},M=(e,t,r)=>{g.load(e,150,t,r)},L=e=>{let t=g.JSONToPostsArray(e);t?(v=v.concat(t),parseInt(e.feed.openSearch$totalResults.$t),_&&v.length<_?M(T+=maxResults,L,Y):O()):D()},Y=()=>{D()},O=()=>{let t=i.createDocumentFragment(),r=i.createElement("ol");r.setAttribute("data-formatting","no"),t.appendChild(r);let l="oldest"===x,a="no"!==y,d=a&&"start-index"===y?$:1,u=v.length,o=_&&_<u?_:u;v.length=o;let s;if(l){s=[];let p=o-1;for(let m=p;m>=0;m--)s.push(v[m])}else s=v;for(let h=0;h<o;h++){let c=s[h],g=i.createElement("li");if(a){let f=i.createElement("span");f.innerHTML=d+h+".",g.appendChild(f)}if(C){let A=c.published,E=e(A,C),T=i.createElement("time");T.innerHTML=E,T.setAttribute("datetime",A),g.appendChild(T)}let w=i.createElement("a");w.href=c.url,w.textContent=c.title,w.title=c.title,g.appendChild(w),r.appendChild(g),n(b,"w--"+x),n(b,"w--"+(a?"":"no-")+"list-number")}let M=b.getElementsByTagName("script")[0];M.parentNode.replaceChild(t,M),N&&N.parentNode.removeChild(N)},D=()=>{if(E){let e=i.createElement("div");e.innerHTML=E,n(e,l),N?N.parentNode.replaceChild(e,N):f.appendChild(e)}};w()})()})();
    </script>
    </div>
                
    		  


    KONFIGURASI Pada script auto sitemap di atas, terdapat beberapa konfgurasi yang bisa disesuaikan. Konfigurasi ini didefinisikan melalui atribut data-nama-konfigurasi='nilai' pada elemen kontainer.

                
                <div id='w-sitemap' class='w-sitemap' data-sort='newest' .....>
                
              

    sort
    Urutan daftar. Nilai default adalah newest

    Nilai Keterangan
    newest Urutan dimulai dari yang terbaru
    oldest Urutan dimulai dari yang terlama

    date
    Nilai adalah berupa format tanggal. Berikut adalah daftar keyword yang bisa digunakan:

    Keyword Keterangan
    D Tanggal 1 digit
    DD Tanggal 2 digit
    M Bulan 1 digit
    MM Bulan 2 digit
    YY Tahun 2 digit
    YYYY Tahun 4 digit


    Contoh: Berikut adalah contoh hasil untuk tanggal 9 September 2022.

    Nilai Hasil
    D/M/YY 9/9/22
    DD/MM/YYYY 09/09/2022
    DD-M-YYYY 09-9-2022


    Untuk menonaktifkan informasi tanggal, kosongkan nilai! (data-sort='')
    list-number
    Aktivasi nomor pada daftar. Nilai default adalah start-index

    Nilai Keterangan
    no Nonaktif
    yes Penomoran dimulai dari 1
    start-index Penomoran dimulai sesuai start-index

    text-loading
    Pesan loading.
    text-error
    Pesan error.
    start-index & max-results
    Secara default, sistem sitemap ini akan mengambil semua postingan dengan menerapkan konfigurasi data-start-index='1' dan data-max-results=''. Untuk pembuatan sitemap dengan tujuan utama sebagai optimasi indek mesin pencari, sistem ini mungkin kurang efektif untuk blog yang memiliki banyak postingan. Terlebih jika jumlah postingan sudah mencapai 300 keatas.

    Dua konfigurasi ini memungkinkan anda untuk membuat beberapa halaman sitemap secara terpisah. Misal, untuk blog dengan 500 postingan, anda bisa membuat 3 halaman sitemap.

    Halaman sitemap start-index max-results Postingan yang ditampilkan
    ke-1 1 150 Postingan ke-1 hingga 150
    ke-2 151 150 Postingan ke-151 hingga 300
    ke-3 301 Postingan ke-301 hingga terlama


  3. Selesai. Hasil pembuatan sitemap dengan kode diatas kurang lebih seperti gambar di bawah. Warna link akan mengikuti style CSS blog.

    daftar isi otomatis blogger


    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.
Komentar