A well-structured HTML Sitemap in Blogger is essential for improving navigation, SEO, and user experience. It serves as a roadmap for both readers and search engines to find all your blog posts easily. If you’ve ever struggled to make your blog more accessible or want Google to crawl your pages efficiently, adding an HTML sitemap page is a smart move.
This guide will show you how to create an automatic HTML sitemap on your Blogger site — without using any complex tools or coding knowledge.
What is a Sitemap?
A sitemap is a page or file that organizes your website’s links in a clear and logical structure. There are two types:
- HTML Sitemap: Made for human readers. It’s like a table of contents that helps visitors explore your posts and pages quickly.
- XML Sitemap: Designed for search engines like Google or Bing. It helps bots understand your site’s hierarchy and index content efficiently.
In short, an HTML Sitemap improves your site’s usability, while an XML Sitemap enhances your SEO indexing.
Why You Need an HTML Sitemap in Blogger
Adding an HTML sitemap to your Blogger site offers several key advantages:
- Improved navigation: Visitors can easily find older posts and categories.
- Better SEO: Search engines can crawl your pages more efficiently.
- User retention: Simplifies browsing, keeping readers engaged longer.
- Automatic updates: The sitemap dynamically updates as you publish new posts.
How to Add an HTML Sitemap in Blogger
Follow these easy steps to add your sitemap page manually to Blogger:
Step 1: Access Blogger Dashboard
Log in to your Blogger account and go to your blog’s dashboard.
Step 2: Create a New Page
From the left sidebar, click “Pages” → “New Page.”
Step 3: Set the Page Title
Give your page a title such as “Sitemap” or “All Posts.”
Step 4: Switch to HTML View
In the page editor, click on “HTML View” to open the code editor.
Step 5: Paste the Sitemap Code
Copy and paste the following script into your HTML editor:
<script defer='defer' src='//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=0&ad=false&date=false'></script>
<style>
.tabbed-toc{border:0;font-size:15px}.tabbed-toc-tabs{width:10em;font-size:14px}.tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:all .1s ease;color:inherit}.tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid #ddd;opacity:0}.tabbed-toc-tab:hover,.tabbed-toc-tab.active{background:#f6f4f4}.tabbed-toc-tab:hover::after,.tabbed-toc-tab.active::after{opacity:1}.tabbed-toc-tab.active{color:#0043ff;opacity:.7}.ltr .tabbed-toc-panels{border-color:#e6e6e6}.ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}.tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}.tabbed-toc li >*{padding:0 7.5px;margin:0}.tabbed-toc a{color:inherit;text-decoration:none}.tabbed-toc-title{font-size:16px}.tabbed-toc-title sup{font-weight:400;font-size:12px;color:red}@media screen and (max-width:750px){.tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tabbed-toc nav::-webkit-scrollbar{width:0;height:0}.tabbed-toc nav::-webkit-scrollbar-track{background:transparent}.tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;border:none}.tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}.tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid #204ecf}.tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}.tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}}@media screen and (max-width:500px){.tabbed-toc-title{font-size:15px}}
</style>
Step 6: Publish Your Sitemap Page
Click “Publish” to make your sitemap page live.
How the Script Works
Once you publish the page, the script automatically fetches all your blog posts and organizes them into tabs or categories. This means your sitemap will update itself each time you publish new content—no manual editing required.
Bonus Tips for SEO Optimization
- Add the sitemap link to your navigation menu for easy access.
- Use clear categories or labels for better content grouping.
- Regularly check that all links are working properly.
- Ensure your XML sitemap is also submitted to Google Search Console.
Final Thoughts
An HTML Sitemap in Blogger not only enhances your user experience but also strengthens your SEO foundation. With just a few simple steps, you can make your content more discoverable, help users navigate easily, and allow search engines to crawl your blog effectively.
Take five minutes to add your sitemap today—it’s one of the easiest improvements you can make to your blog’s structure and performance.
