How to Create a Sitemap Page for a Website?

Hey learners,
In this post, we're going to discuss How to Create a Sitemap Page for a Website. Hoping that you are already familiar with the importance of a sitemap for a website. Let's do it step by step in an easy way.

What is a Sitemap?

A sitemap is a file that contains details on the pages, videos, and other assets on your website. It effectively serves as a blueprint for search engines, allowing them to grasp your site's structure and identify relevant information.

There are two major types of sitemaps:

XML Sitemap: Primarily utilised by search engines such as Google. The URLs of your site's pages are listed, together with extra characteristics such as the last update date, alternate language versions, and content genres (e.g., photographs, videos, news items).
HTML Sitemap: A sitemap in human-readable format. It is commonly used for site navigation and assists users in finding their way around your website.

Why is the Sitemap Page Important?

Sitemap Page is important because of following reasons:

Improved discoverability: Sitemaps make it easier for search engines to find and index the pages on your website.
Improved SEO: By offering a comprehensive overview of your site's structure, sitemaps can help your search engine rankings.
Enhanced user experience: HTML sitemaps can help users browse your website and discover the information they need.

How to Create a Sitemap Page for a Website?

Create a new page named sitemap.
Go to the coding section of that page and add the below source code in it.

Source Code

<div class="postSection sitemaps" id="sitemaps">
  <div class="loading">Sitemap is Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, 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 t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://www.theashub.in//feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:0px solid black;border-radius:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>  
<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"></link>
<script src="https://www.theashub.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=pikisitemap" type="text/javascript"></script>

Save it, and your sitemap page is ready to explore.

Understanding the Source Code

<script src="https://www.theashub.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=pikisitemap" type="text/javascript"></script>

Change the above link by your own website link.

How does source code look?

By building and publishing a sitemap, you can boost your website's exposure in search engine results while also providing a better user experience. That's all for this post. If you have any questions, please ask in the comments area.