How to create sitemap on blogger
Based on Google's explanation, a sitemap is a file containing a list of posts/pages from a website that can tell Google and other search engines about the structure of the website's content.
In general, a sitemap can be categorized into two, namely an HTML sitemap and an XML sitemap. The main difference between the two is that the HTML sitemap is for users or website users while the XML sitemap is made specifically for search engines.
Difference Between HTML and XML Sitemap
HTML sitemap
- The HTML sitemap itself is a table of contents which usually contains only posts made so that readers can easily see all the posts on our blog. As the name implies, this sitemap is written in HTML format. And unlike XML sitemaps which are generated automatically, HTML sitemaps have to be generated manually.
XML sitemap
- An XML sitemap is a table of contents for posts and pages created in XML format. This sitemap is intended for search engines to make it easier for them to crawl and index our site. This type of sitemap is what we input into Google Search Console so that our site is indexed faster by Google. On the Blogger blog, we can find the XML sitemap at the following two URL addresses,
https://www.techwebmate.com/sitemap.xml
https://www.techwebmate.com/atom.xml?redirect=false&start-index=1&max-results=500
If you do not know how to create HTML and XML sitemap on Blogger. So you just follow the steps given below and apply it one by one on your blogger blog.
How to create HTML Sitemap on Blogger
Step One
- First you go to your Blogger blog and click on the Main Menu and select Pages. After this, click again on the main menu and select the Create New page.
Step Two
- Now you should keep the title of the page Sitemap. Then change the page from Compose view to HTML view. Then copy the script given below and Paste it on your page and select the Publish button.
<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>
Before publishing, in that script you will see the URL of my site (https://www.techwebmate.com), which you will have to change and enter the URL of your site. Then publish and check whether everything is correct or not.
How to create XML Sitemap on Blogger
Step One
- Click on the Main menu and choose Settings. Next go to Crawlers and Indexing and turn on Enable custom robots.txt and select Custom robots.txt.
Step Two
- Now you will see a pop up box in which you copy the robots.txt below and Paste it there and select the Save button. After this, click on Google Search Console.
User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search Allow: / Sitemap: https://www.techwebmate.com/sitemap.xml
Enter the URL of your website at https://www.techwebmate.com URL
Step Three
- On the Google Search Console page, click the Main menu and choose Sitemaps. Then type sitemap.xml on Add a new sitemap and click on the Submit button.
Done
Just follow this small steps, you will also be able to easily create an HTML and XML sitemap on your blogger site. Hope this little information has helped you, if you have any problem, please comment and do let us know so that we can help you.