The Sitemap plays an important role in your website’s ranking factor. I remember that the exact original site is called XML Sitemap, which is used for ranking purposes on the Blogger platform, and search engines can easily crawl your posts and content. Today we will discuss the importance and uses of HTML Sitemap, which basically plays no role for ranking, it's just a navigation for users and audience that visit your website to understand the layout structure of different posts easily.
In this guide, you’ll learn how to create two types of HTML sitemaps in Blogger:
- ✅ Basic HTML Sitemap (all posts in different group lists)
- ✅ Label-Wise HTML Sitemap (only specific categories/labels posts)
What is the need for an HTML Sitemap?
- Provide a full structure of your articles in one place for your audience.
- Easy access to all your content in one place.
- Navigation becomes very easy without any distractions.
- No role for SEO, just for the user interface.
- Give your website an extra professional look.
How to create an HTML Sitemap?
- Go to your Blogger dashboard.
- Click on Pages → New Page.
- Give a title “Sitemap”.
- Switch to HTML View and paste the code.
Add Basic HTML Sitemap Code
Copy the code of HTML Sitemap from the box below, and paste it as shown in the screenshot above.
Add this Shortcode :
<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=pikisitemap" type="text/javascript"></script>👉 This code will show all your posts in different group sections(according to the labels that you have applied to your posts).
How to show a particular label(category) on the HTML Sitemap?
If you want to show a specific label (category) of posts on your HTML sitemap page, then copy the code shown in the box below and paste it on your sitemap page.
Add this Shortcode :
<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-label.js" type="text/javascript"></script><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><div class="stiemap-posts"> <h4>Blogger Test</h4> </div><div class="stiemap-wrap"><script src="/feeds/posts/default/-/My Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></div>👉 This will display your blog posts grouped under each label, like:
Technology- This is a Demo 1
- This is a Demo 2
- This is a Demo 1
- This is a Demo 2
Save and Publish
- Click Publish to make your sitemap live.
- Add a link to this sitemap page in your footer or menu so readers can find it easily.
Final Thoughts
- You can use the Basic Sitemap HTML code to display all posts, which will be grouped by labels.
- Use the Custom Label Sitemap HTML code display to specific category posts.
This is the easiest method to create an HTML Sitemap for your Blogger website for your visitors, not for search engines.
