Search This Blog

Friday, August 13, 2010

Easily make HTML sitemap for your blog using Javascript

Note: HTML sitemap to facilate vistior (human) navigation only. If you are looking for a sitemap to submit to Webmaster, you will need an XML sitemap or a Google Sitemap.

A commentator at Blogger Tips and Tricks (HTML) Sitemap (Table of Content) said: "Hi Peter, This sitemap is really good and helpful. I would like to add a sitemap like this one to my blogger blogs. Can you please give me a detailed reply on creating a sitemap like this and loading it to blogs and then to Webmaster tools."

Fortunately for me, that is not difficult a task for all you need to do is to first create a post or better, a static page, making sure you are in the Edit HTML mode, copy the following Javascript:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://myblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


and paste it into the post editor/page editor making sure to replace http://myblog.blogspot.com with the actual URL of your blog. To make this clearer, below are 2 examples of the codes I used to create such HTML sitemaps of 2 of my blogs, one of which is Blogger for Dummies sitemap which is a blogspot blog with the URL http://bloggerfordummies.blogspot.com:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://bloggerfordummies.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


and the other Blogger Tips and Tricks Sitemap which is a custom domain with my own registered domain name http://www.bloggertipsandtricks.com without the blogspot in the URL:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.bloggertipsandtricks.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


Note that such HTML sitemap generated by the above Javascript automatically updates each time you publish a new post and is fuss and maintenance free.

Regarding submitting to Google Webmaster, the above generates a HTML sitemap and not a XML sitemap so is not suitable for submission to Google Webmaster, but it would be instructive to hear what Matt Cutts of Google have to say about HTML sitemap.

Regarding XML sitemap, perhaps for now refer to Adding Google sitemap to your blog. I will follow up with another post on sitemaps later.

Acknowledgement: We are indebted to Abu Farhan for the Javascript used in this post.
Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications