How to create html Sitemap page in Blogger/Blogspot 2024
Every business owner wants to make their site more navigable for users. You can achieve this by creating html sitemap in blogger. It’s a roadmap to your website, enabling visitors to understand your site structure better. This guide will walk you through the process of creating it on blogger.
What is an HTML Sitemap and its benefits
An HTML Sitemap is a page on your website that outlines the full structure of your site. It includes links to all your pages and posts, making it easier for users to navigate. It is specifically useful for your visitors, helping them navigate your website with ease.
Its Benefits are:
· Improves user experience, making it easier for users to find what they are looking for.
· Increase internal linking, which can improve your site’s authority and ranking.
What is an XML Sitemap?
An XML (Extensible Markup Language) sitemap is a text file written in a machine-readable language. It functions as a roadmap for search engines, helping them understand the structure of your website and index its pages more efficiently. An XML lists all URLs of a website together with additional metadata about each URL (such as last update, change frequency, and importance relative to other URLs).
They are not designed to be seen by website visitors. Their intended audience is principally search engine crawlers or ‘bots’ that scan and index sites.
Step by Guide:
You can see the Video Tutorial on Creating HTML sitemap in blogger below.
Step 1: Create a New Page
Log into your Blogger account. Navigate through the dashboard into “Pages”, then click on “New Page”. Title the page as ‘Sitemap’, or something similar depending on your preference.
Step 2: Embed the HTML Code
Now, it’s time to input the HTML code. The code will instruct Blogger on how to handle the sitemap page. Paste the code below into the page’s body:
<script style=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break; }}
document.write(‘<li>’);
document.write(‘<a href=”’ + posturl + ‘“>’ + posttitle + ‘</a><br>’);
document.write(‘</li>’);}}
</script>
<script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”>
</script>
Note: Remember to replace `numposts = 100` with the actual number of posts you have in your blog if it’s less or more.
Step 3: Publish the Page
Once the code is embedded, hit the “Publish” button. Your new page is now live and will update automatically whenever you publish new content.
Step 4: Check Your Page
Lastly, test your page to confirm it’s working as it should. Simply visit `www.yourwebsitename.com/p/your-sitemap.html` and check if all your posts are listed.
Step 5: Adding the page in header and footer section
Go to the “Layout” section under blogger settings and add your sitemap page in header and footer section for easy user navigation.
By strategically placing this page in both the header and footer sections of your website, you can significantly enhance user experience and simplify navigation.
