How to Create an HTML Sitemap Page for Blogger Blog

Creating an easy-to-navigate website enhances user experience and boosts your blog’s SEO performance. One effective way to achieve this is by adding an HTML sitemap to your Blogger blog. In this guide, we’ll walk you through a simple method to create an HTML sitemap that makes your blog easily navigable and user-friendly and can help increase your traffic.

Why Create an HTML Sitemap?

An HTML sitemap serves as a roadmap for your visitors, allowing them to find the content they’re looking for quickly. It also helps search engines crawl your site more efficiently, potentially improving your blog’s SEO. Here are some benefits of adding an HTML sitemap to your Blogger blog:

• Increased Traffic: Encourages visitors to explore more of your content.
• Improved User Experience: Makes navigation more accessible for visitors.
• Enhanced SEO: This helps search engines index your pages more effectively.

Step-by-Step Guide to Creating an HTML Sitemap for Blogger

1. Access Your Blogger Dashboard

Start by logging into your Blogger account and navigating to your blog’s dashboard.

2. Create a New Page

• Click on “Pages” in the left sidebar.
• Select “New Page” to create a new page for your sitemap.

3. Title Your Sitemap Page

• In the “Title” field, enter “Sitemap”. This will be the title of your sitemap page.

4. Switch to HTML View

• In the page editor, switch from the “Compose” view to the “HTML” view. This allows you to add custom code to your page.

5. Insert the JavaScript Code

Paste the following JavaScript code into the HTML section of your page. This script dynamically generates your sitemap based on your blog posts.

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

6. Configure Page Settings

• Search Description: Provide a brief description of your sitemap page to improve SEO.
• Comments: Decide whether to allow comments on your sitemap page. Typically, it’s best to disable comments for sitemap pages.

1. Page title.
2. HTML mode of the page.
3. Paste the javascript in the HTML section.
4. Provide search Description, if any.
5. Allow, disallow comment, etc.

You’ve to follow these steps.

1. Create a New Page for your Blogger Blog.
2. Add a title for your blog i.e. sitemap.
3. Paste the javascript in the HTML section of your page.
4. Publish the page; your sitemap is live now.

7. Publish Your Sitemap Page

Once you’ve added the code and configured the settings:

• Click “Publish” to make your sitemap live.

8. Add the Sitemap to Your Navigation Menu

To make your sitemap easily accessible:

1. Go to “Layout” in your Blogger dashboard.
2. Click “Add a Gadget” where you want the sitemap link to appear (e.g., sidebar or header).
3. Select the “Pages” gadget and choose your newly created sitemap page.
4. Save your changes.

Final Touches

Your HTML sitemap is now live and accessible to your visitors. Here’s a quick checklist to ensure everything is set up correctly:

• User-Friendly Layout: Ensure the sitemap is easy to read and navigate.
• SEO Optimization: The sitemap helps search engines index your blog more effectively.
• Regular Updates: The JavaScript code automatically updates your sitemap as you add new posts.

Additional Tips

• XML Sitemap for SEO: While an HTML sitemap is great for users, consider creating an XML sitemap for search engines. You can submit it to Google Search Console to enhance your blog’s SEO.
• Design Customization: Customize the appearance of your sitemap page to match your blog’s theme for a seamless user experience.
• Regular Maintenance: Periodically check your sitemap to ensure all links are functioning correctly and that it reflects your latest content.

Conclusion

Adding an HTML sitemap to your Blogger blog is a straightforward process that can significantly enhance user experience and improve your blog’s SEO performance. By following the steps outlined in this guide, you can create a comprehensive and user-friendly sitemap that helps your visitors navigate your content with ease.

This way, you can generate an HTML sitemap for Blogger, but if you want to submit a sitemap to Google Search Console, then you need to create an XML sitemap for Blogger.

If you have any questions or need further assistance, feel free to leave a comment below. Happy blogging!