HTML Sitemap Page Generator Tool

 One of the pages that can have a significant impact on your website is the sitemap page for your visitors.

The HTML sitemap is the page that gives your website visitors an idea on your content and provides easier navigation which helps improving your website's user experience. It's like the table of contents for all the content on your website.

What is the sitemap for your users?

Sitemaps are usually known as the ones you need to submit to search engines to better index your content as we discussed in the "XML Sitemap Generator Tool", and that's one type of sitemaps.

The HTML type of sitemaps, is the one that you can include in your website and make it accessible for your website users to access and get to know your content.

It's like the table of contents you find in the beginning of books to let you know what are the chapters and the major points covered in that book. It's one of the things you use in evaluating whether to buy that book or not.

Same for your website, the sitemap is the table of contents that your users can flip through and evaluate if your website if worth visiting and exploring or not. It gives them an idea of the kind of topics you're covering. 

It's part of the document generators toolkit that you will need when you first create a website. It helps you create the following pages:

• Affiliate Disclaimer page
• Privacy Policy page
• Terms and Conditions page
  
• About Us page
• Contact Us page
• HTML Sitemap page (for your visitors)
  
• XML Sitemap page (for search engines)
  

Types of sitemaps

There are two types of sitemaps: HTML and XML.

HTML

The HTML sitemaps guide visitors like our sitemap that we have in the footer. That sitemap is for you to know the content that we have on this site and navigate easier because it's organized as categories and ordered alphabetically.

This is the sitemap type that we'll be covering today with the use of our HTML Sitemap Generator Tool or code. In less than a minute, you'll be able to create one and use right away on your website.

XML

XML sitemaps guide search engine bots like Google or Bing, to ensure they find all the site's URLs to crawl and index. This is the one you submit to Google Search Console to better index your site for example.

If you're looking to have the XML sitemap for search engines like Google to improve your indexing and ranking, then you can check the "XML Sitemap Generator Tool"

 How to create an HTML Sitemap Page for your website

1. Copy the code below

<script type="text/javascript"> var postTitle = new Array(); var postUrl = new Array(); var postPublished = new Array(); var postDate = new Array(); var postLabels = new Array(); var postRecent = new Array(); var sortBy = "titleasc"; var numberfeed = 0; function bloggersitemap(a) { function b() { if ("entry" in a.feed) { var d = a.feed.entry.length; numberfeed = d; ii = 0; for (var h = 0; h < d; h++) { var n = a.feed.entry[h]; var e = n.title.$t; var m = n.published.$t.substring(0, 10); var j; for (var g = 0; g < n.link.length; g++) { if (n.link[g].rel == "alternate") { j = n.link[g].href; break } } var o = ""; for (var g = 0; g < n.link.length; g++) { if (n.link[g].rel == "enclosure") { o = n.link[g].href; break } } var c = ""; if ("category" in n) { for (var g = 0; g < n.category.length; g++) { c = n.category[g].term; var f = c.lastIndexOf(";"); if (f != -1) { c = c.substring(0, f) } postLabels[ii] = c; postTitle[ii] = e; postDate[ii] = m; postUrl[ii] = j; postPublished[ii] = o; if (h < 10) { postRecent[ii] = true } else { postRecent[ii] = false } ii = ii + 1 } } } } } b(); sortBy = "titledesc"; sortPosts(sortBy); sortlabel(); displayToc(); } function sortPosts(d) { function c(e, g) { var f = postTitle[e]; postTitle[e] = postTitle[g]; postTitle[g] = f; var f = postDate[e]; postDate[e] = postDate[g]; postDate[g] = f; var f = postUrl[e]; postUrl[e] = postUrl[g]; postUrl[g] = f; var f = postLabels[e]; postLabels[e] = postLabels[g]; postLabels[g] = f; var f = postPublished[e]; postPublished[e] = postPublished[g]; postPublished[g] = f; var f = postRecent[e]; postRecent[e] = postRecent[g]; postRecent[g] = f } for (var b = 0; b < postTitle.length - 1; b++) { for (var a = b + 1; a < postTitle.length; a++) { if (d == "titleasc") { if (postTitle[b] > postTitle[a]) { c(b, a) } } if (d == "titledesc") { if (postTitle[b] < postTitle[a]) { c(b, a) } } if (d == "dateoldest") { if (postDate[b] > postDate[a]) { c(b, a) } } if (d == "datenewest") { if (postDate[b] < postDate[a]) { c(b, a) } } if (d == "orderlabel") { if (postLabels[b] > postLabels[a]) { c(b, a) } } } } } function sortlabel() { sortBy = "orderlabel"; sortPosts(sortBy); var a = 0; var b = 0; while (b < postTitle.length) { temp1 = postLabels[b]; firsti = a; do { a = a + 1 } while (postLabels[a] == temp1); b = a; sortPosts2(firsti, a); if (b > postTitle.length) { break } } } function sortPosts2(d, c) { function e(f, h) { var g = postTitle[f]; postTitle[f] = postTitle[h]; postTitle[h] = g; var g = postDate[f]; postDate[f] = postDate[h]; postDate[h] = g; var g = postUrl[f]; postUrl[f] = postUrl[h]; postUrl[h] = g; var g = postLabels[f]; postLabels[f] = postLabels[h]; postLabels[h] = g; var g = postPublished[f]; postPublished[f] = postPublished[h]; postPublished[h] = g; var g = postRecent[f]; postRecent[f] = postRecent[h]; postRecent[h] = g } for (var b = d; b < c - 1; b++) { for (var a = b + 1; a < c; a++) { if (postTitle[b] > postTitle[a]) { e(b, a) } } } } function displayToc() { var a = 0; var b = 0; while (b < postTitle.length) { temp1 = postLabels[b]; document.write(""); document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">'); firsti = a; do { document.write("<p>"); document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + ""); if (postRecent[a] == true) { document.write(' - <strong><span>New!</span></strong>') } document.write("</a></p>"); a = a + 1 } while (postLabels[a] == temp1); b = a; document.write("</div></div>"); sortPosts2(firsti, a); if (b > postTitle.length) { break } } } </script> <script src="https://internettoolkits.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=bloggersitemap" type="text/javascript"></script>

2. Go to your website and create a new page named Sitemap.
3. Under the HTML format, paste the code you copied from above
4. Scroll down till the end of the code and replace https://internettoolkits.blogspot.com with your website's url
5. Click publish. Now you have a functioning sitemap page and you can preview it to test it.
6. Now you need to add this sitemap page you created in the header menu, of the footer menu like in my case. It's up to you where do you want to show it to your visitors.

You can search for how to edit the menu on your site depending on the website type, Blogger, or Wordpress, or Wix, etc.

There you go. Now you have a functioning sitemap for your visitors.