How To Add HTML Sitemap Page In Blogger Website

How To Add HTML Sitemap Page In Blogger Website | Types of Sitemap Explained

🔍 Introduction

If you’re running a Blogger website, you probably want better SEO, faster indexing, and improved navigation for your visitors. One effective way to achieve all of these is by adding a sitemap page—especially an HTML sitemap. In this guide, we’ll walk you through how to add an HTML sitemap page in Blogger, along with an overview of different sitemap types like HTML, XML, and RSS.

🧭 What is a Sitemap?

A sitemap is a file or page that lists all the important pages of a website. It helps search engines like Google and Bing crawl your content more efficiently. There are mainly two types of sitemaps:

HTML Sitemap – Created for users.
XML Sitemap – Created for search engines.

🔎 Why Are Sitemaps Important?

Improve Search Engine Crawling
Enhance SEO performance
Better User Experience
Faster Indexing of New Content
Helps Organize Website Structure

🗂️ Types of Sitemap

1. HTML Sitemap

Visible to users
Helps visitors navigate your blog
Usually shown as a standalone page
Easy to create and customize

2. XML Sitemap

Designed for search engines
Submitted to Google Search Console
Automatically updated

Example XML URL: https://yourblog.blogspot.com/sitemap.xml

3. RSS/Atom Sitemap

Syndicates new blog content
Helpful for content aggregators

RSS Feed URL: https://yourblog.blogspot.com/feeds/posts/default

🛠️ How to Add an HTML Sitemap Page in Blogger

✅ Step 1: Login to Blogger

Visit Blogger.com and sign in using your Google account.

✅ Step 2: Go to "Pages"

In the left sidebar, click on "Pages", then select "New Page".

✅ Step 3: Add Page Title

Name your page something like: “Sitemap” or “Blog Posts List”

✅ Step 4: Switch to HTML View

Click on the HTML View tab (instead of Compose view).

✅ Step 5: Paste This HTML Code

<!-- Sitemap created by https://www.computerfy.in -->

<style>
    .sitemap-container {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #ccc;
        font-family: Arial, sans-serif;
    }

    .sitemap-container h2 {
        font-size: 28px;
        color: #007bff;
        margin-top: 30px;
        margin-bottom: 15px;
        border-bottom: 2px solid #007bff;
        padding-bottom: 5px;
    }

    .sitemap-container ul {
        padding-left: 25px;
        list-style-type: disc;
        margin-bottom: 25px;
    }

    .sitemap-container li {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .sitemap-container a {
        color: #333;
        text-decoration: none;
    }

    .sitemap-container a:hover {
        text-decoration: underline;
        color: #007bff;
    }
  
  
</style>
<!-- Sitemap created by https://www.computerfy.in -->
<div class="sitemap-container">
    <h1>Sitemap </h1>
    <div id="sitemap-content">Loading sitemap...</div>
</div>

<script>
    const maxPosts = 999;
    const blogUrl = location.origin;

    fetch(blogUrl + `/feeds/posts/default?alt=json&max-results=${maxPosts}`)
        .then(res => res.json())
        .then(data => {
            const entries = data.feed.entry;
            const categories = {};
            const container = document.getElementById('sitemap-content');
            container.innerHTML = '';

      // Sitemap created by https://www.computerfy.in

            if (entries && entries.length) {
                entries.forEach(entry => {
                    const title = entry.title.$t;
                    let postUrl = '#';
                    let labels = [];

                    entry.link.forEach(link => {
                        if (link.rel === 'alternate') postUrl = link.href;
                    });

                    if (entry.category) {
                        labels = entry.category.map(cat => cat.term);
                    } else {
                        labels = ['Uncategorized'];
                    }

                    labels.forEach(label => {
                        if (!categories[label]) {
                            categories[label] = [];
                        }
                        categories[label].push(`<li><a href="${postUrl}" target="_blank">${title}</a></li>`);
                    });
                });

                for (let label in categories) {
                    const section = `
                        <h2>${label}</h2>
                        <ul>${categories[label].join('')}</ul>
                    `;
                    container.innerHTML += section;
                }
            } else {
                container.innerHTML = '<p>No posts found.</p>';
            }
        })
        .catch(err => {
            console.error(err);
            document.getElementById('sitemap-content').innerHTML = '<p>Failed to load sitemap.</p>';
        });
</script>

✅ Step 6: Publish Page

Click on "Publish" and your sitemap page is live.

📈 Benefits of an HTML Sitemap in Blogger

Organizes your content for readers
Allows quick access to all posts
Increases internal linking
Helps in SEO crawl depth improvement
Reduces bounce rate by engaging users

❓ FAQs

Q1: Is HTML Sitemap necessary for SEO?

Yes. HTML sitemaps improve internal linking and user navigation, which indirectly helps SEO.

Q2: Can I use both HTML and XML sitemaps?

Absolutely! Use XML for search engines and HTML for your readers.

Q3: How often should I update my HTML Sitemap?

If the script is dynamic like the one shared above, it updates automatically with new blog posts.

🧾 Conclusion

Adding an HTML Sitemap to your Blogger site is a simple yet powerful way to enhance user experience and boost your blog’s SEO. With just a few lines of code, you can organize your content neatly for your readers while also supporting search engine indexing. Don’t forget to explore XML and RSS sitemaps too for a comprehensive setup.

ComputerFy

How To Add HTML Sitemap Page In Blogger Website