How to Create HTML and XML Sitemaps on Blogger (SEO Guide)
Sitemaps are essential for helping search engines like Google understand the structure and content of your blog. They act as a roadmap, guiding search engine crawlers to all your important pages and posts. This comprehensive guide will explain what HTML and XML sitemaps are, why they're important for SEO, and provide step-by-step instructions on how to create them for your Blogger blog.
What are HTML and XML Sitemaps?
A sitemap is a file that lists all the important pages on your website. Think of it as a table of contents for both search engines and users. There are two main types:
HTML Sitemap (For Users)
An HTML sitemap is designed to help human visitors navigate your blog. It's a user-friendly page that lists all your published posts and pages, usually organized by category or date. This allows readers to quickly find the content they're looking for.
XML Sitemap (For Search Engines)
An XML sitemap is specifically created for search engines like Google, Bing, and Yahoo. It uses XML (Extensible Markup Language) to provide a structured list of your blog's URLs, along with important metadata like when each page was last modified. This helps search engines efficiently crawl and index your content, which is crucial for SEO.
Why are Sitemaps Important for SEO?
Sitemaps play a vital role in search engine optimization (SEO) for several reasons:
- Improved Crawling and Indexing: Sitemaps help search engines discover and index your content more quickly and efficiently. This is especially important for new blogs or blogs with a large number of pages, as it ensures that search engines are aware of all your content.
- Better Website Structure Understanding: XML sitemaps provide search engines with a clear overview of your website's architecture. This helps them understand the relationships between your pages and how your content is organized, which can positively influence your search rankings.
- Increased Visibility: By making it easier for search engines to find and index your content, sitemaps can lead to increased visibility in search results. This means more traffic and potential readers for your blog.
- Content Freshness Signal: XML sitemaps can also signal to search engines when your content has been updated. This helps them prioritize recrawling your pages, ensuring that they have the most up-to-date information.
- Helps with Orphan Pages: Sitemaps can help identify "orphan pages" – pages on your site that aren't linked to from any other internal page. Orphan pages are difficult for search engines to find, so including them in your sitemap can improve their visibility.
How to Create an HTML Sitemap on Blogger (Step-by-Step)
Creating an HTML sitemap in Blogger involves adding a bit of code to a new page. Here's how:
Step 1: Create a New Page
In your Blogger dashboard, navigate to "Pages" and click "New Page."
Step 2: Add the Sitemap Code
Give your page a descriptive title like "Blog Sitemap" or "Site Index." Crucially, switch to the **HTML view** (not the "Compose" view). Copy and paste the following code into the page:
<div class="sitemaps" id="sitemaps">
<div class="loading">Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.techwebmate.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
<style>
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:18px 20px 25px;border-radius:4px;background-color:#fff;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035);}
.dark-mode .Blog .sitemaps .sitemap-box{;background-color:#242526}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:16px;color:#313135}
.Blog .sitemaps .judul:before{content:'Label: ';margin-right:5px}
.Blog .sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:PT Sans, sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.Blog .sitemaps li a{color:#333333;font-weight:700;font-family:PT Sans, sans-serif}
.Blog .sitemaps li a:after{content:'Read more';display:block;margin-top:2px;color:#313135;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
.page .Blog article.post{border:0}
.page .Blog .breadcrumbs > *:first-child{display:block}
</style>
Very Important: Inside the JavaScript code, you *must* replace `https://www.techwebmate.com` with your actual Blogger blog URL (e.g., `https://yourblogname.blogspot.com`).
Step 3: Publish the Page
Click "Publish" to create your HTML sitemap page. Make sure to link to this page from your blog's navigation menu or footer so it's easily accessible to your visitors.
How to Create an XML Sitemap on Blogger (Automated and Manual)
Blogger automatically generates a basic XML sitemap, but you can also create a more comprehensive one and submit it to Google Search Console.
Automatic XML Sitemap
Blogger's default XML sitemap can usually be found at these addresses (replace `yourblogurl.com` with your actual blog address):
- `https://www.yourblogurl.com/sitemap.xml`
- `https://www.yourblogurl.com/atom.xml?redirect=false&start-index=1&max-results=500`
While this default sitemap is a good starting point, it might not include all your pages (especially if you have a large blog). For better SEO, it's recommended to create a custom `robots.txt` file and submit your sitemap to Google Search Console (explained below).
Manual XML Sitemap Creation (Not Usually Needed)
For most Blogger blogs, the automatically generated sitemap is sufficient. Manually creating an XML sitemap is generally only necessary for very large or complex blogs. If you need to create a custom XML sitemap, there are online sitemap generators you can use. However, this is rarely required for Blogger. Focus on the steps below instead.
Step 1: Enable Custom `robots.txt`
A `robots.txt` file tells search engines which parts of your site they should and shouldn't crawl. It's also where you tell search engines the location of your sitemap.
In your Blogger dashboard, go to "Settings" > "Crawlers and indexing". Turn on "Enable custom robots.txt" and click on "Custom robots.txt".
Step 2: Add Sitemap to `robots.txt`
Copy and paste the following code into the `robots.txt` box, replacing `https://www.yourblogurl.com` with your blog's URL:
User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search Allow: / Sitemap: https://www.yourblogurl.com/sitemap.xml
Click "Save."
Step 3: Submit Sitemap to Google Search Console
Google Search Console is a free tool that provides valuable insights into how Google sees your website. Submitting your sitemap here is highly recommended for SEO.
Go to Google Search Console (search for it on Google) and add your sitemap URL (`https://www.yourblogurl.com/sitemap.xml`) in the "Sitemaps" section. Click "Submit."
Conclusion
Creating and submitting HTML and XML sitemaps is a crucial step in optimizing your Blogger blog for search engines. By following these instructions, you can improve your blog's visibility in search results, attract more readers, and enhance their experience on your site.