How to Add an HTML Sitemap in Blogger

A well-structured website helps users and search engines navigate your content easily. If you’re using Blogger, adding an HTML sitemap can significantly improve user experience and boost your website’s SEO performance.

In this article, we’ll guide you through the step-by-step process of adding an HTML sitemap to your Blogger site.

Read More: How to Set Redirection in Blogger

What is an HTML Sitemap?

An HTML sitemap is a simple, user-friendly page that lists all your blog posts in a structured format. Unlike an XML sitemap, which is primarily for search engines, an HTML sitemap is designed for human visitors to find and access content easily.

Why You Need an HTML Sitemap in Blogger

✅ Improves User Experience – Visitors can quickly browse and find relevant content.

✅ Boosts SEO – Helps search engines like Google index your posts more efficiently.

✅ Enhances Site Structure – Provides an organized way to showcase all your blog posts.

✅ Encourages Engagement – Users stay longer on your site when they find interesting articles.

Step-by-Step Guide to Adding an HTML Sitemap in Blogger

Step 1: Create a New Page for the Sitemap

1. Log in to your Blogger account.
2. Click on Pages from the left menu.
3. Click New Page and title it “Sitemap”.

Step 2: Insert HTML Sitemap Code

Now, let’s insert JavaScript-based code that dynamically lists all your blog posts.

1. Switch to HTML view in the page editor.
2. Copy and paste the following code:

<style>
  .sitemap-container { font-family: Arial, sans-serif; }
  .sitemap-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
  .sitemap-list { list-style: none; padding-left: 0; }
  .sitemap-list li { margin-bottom: 5px; }
</style>

<div class="sitemap-container">
  <div class="sitemap-title">Sitemap</div>
  <ul id="sitemap" class="sitemap-list"></ul>
</div>

<script>
  function loadSitemap() {
    var blogUrl = window.location.origin;
    var feedUrl = blogUrl + "/feeds/posts/default?alt=json&max-results=1000";
    
    fetch(feedUrl)
      .then(response => response.json())
      .then(data => {
        var posts = data.feed.entry;
        var sitemapHtml = "";
        
        if (posts) {
          posts.forEach(post => {
            var postTitle = post.title.$t;
            var postLink = post.link.find(link => link.rel === "alternate").href;
            sitemapHtml += `<li><a href="${postLink}" target="_blank">${postTitle}</a></li>`;
          });
        } else {
          sitemapHtml = "<li>No posts found.</li>";
        }
        
        document.getElementById("sitemap").innerHTML = sitemapHtml;
      })
      .catch(error => console.error("Error loading sitemap:", error));
  }
  
  window.onload = loadSitemap;
</script>

Step 3: Publish the Page

1. Click Publish to make the sitemap live.
2. Copy the page URL and add it to your navigation menu or footer for easy access.

Final Thoughts

Adding an HTML sitemap to your Blogger site is a smart move for both SEO and user experience. It organizes your content, makes navigation easier, and ensures search engines can index your posts more effectively. By following the steps above, you can create a functional sitemap that updates automatically as you publish new posts.