Home » How to Create an HTML Sitemap Page in Blogger and WordPress

How to Create an HTML Sitemap Page in Blogger and WordPress

  • by
sitemap2

sitemap2

What is the function of an HTML sitemap page? Is the sitemap page really a mandatory page for a website? Before discussing how to create a website sitemap automatically, we will review about the meaning of a sitemap.

The word “sitemap” is used to represent 2 types of content. First, an XML Sitemap, which is an XML file that contains website post URLs.

In addition to the XML sitemap, the word “sitemap” is also often used to represent a website’s table of contents page. In other words, the word “sitemap” can also lead to an HTML page that contains links to all website posts. The table of contents page of this website can be called a sitemap page.

 

What are the Difference between an XML Sitemap and a Page Sitemap?

Between an XML sitemap and a sitemap page is clearly different, an XML sitemap is an XML file, while a sitemap page is just like a website page in general.

Judging from its function, the XML sitemap and the sitemap page have the same function, namely to make it easier for search engine crawlers to index website pages.

 

If you have submitted an XML sitemap in Google Search Console, do you also need to create an HTML sitemap page?

The process of adding an XML sitemap will not help much for the purposes of indexing pages that will be published next. In other words, the Google crawler does not re-scan the XML sitemap files that are added regularly.

For more details, suppose your blog has 20 posts that have not been indexed by Google. When you add an XML sitemap URL in Google Search Console, the Google crawler will only read this sitemap file once. Posts that you will publish next will not be automatically added to the list of submitted content.

 

Sitemap Page Functions

To get out of the above limitations, creating an HTML sitemap page is the right step. The way Google’s search engine crawlers find new pages is by following links on one page that will take them to another page. This is where the power of the sitemap page comes into play. By creating a sitemap page, we provide a way for search engine crawlers to be able to crawl all your website posts content more easily.

How to create an HTML sitemap page in Blogger:

  • Create a new static page.
  • Write the title “Sitemap” then copy and paste all the code below into the page editor with HTML mode:

<!-- Sitemap by wiBlogger.com -->
<style>
#w-sitemap-wrapper {font-size:13px}
#w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 6.923em;border-top:none;border-bottom:1px solid #f6f6f6}
#w-sitemap-wrapper span {position:absolute;left:0;color:#bd8b56}
#w-sitemap-wrapper a {font-weight:bold}
#w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}
</style>

<script>
(function(c,m){var F=function(s){return s.replace(/&(?!(amp|gt|lt|quot|apos);)/g,function(a){return"&amp;"}).replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")};var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+F(C)+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading......");
</script>

  • Then publish page “Sitemap

 

Results

The results of creating an HTML sitemap page with this code will be like the image below (link color will follow the blog’s style/CSS). You can also add a starting or ending paragraph to the sitemap content.

sitemap3

sitemap3

How to Create an HTML Sitemap Page for WordPress

To create sitemap page in WordPress is very easy because there are plugins that can help you do it. You can simply install and activate the WP SEO HTML Sitemap plugin from Yoast. This plugin works very well and you don’t need much configuration or settings in it.

Before you activate the WP SEO HTML Sitemap plugin, please create a new page where you want to display your sitemap page.

html sitemap page

html sitemap page

Configure the Settings – SEO HTML Sitemap menu from your WordPress dashboard, select the sitemap page that has been created and click Save Changes.

Done you can see the results of the sitemap page.

sitemap2

sitemap2

To improve your website’s search results on Google, a sitemap is very useful for getting your website indexed by search engines better. Search engines will easily get information on how often your website is updated with content and in what category you often update content and determine the average crawl on your website.

That’s how to create an HTML sitemaps page on Blogger and WordPress.

Leave a Reply

Your email address will not be published.