Follow Us on BloglovinFollow Us on Networked BlogsFollow Us on BloggersFollow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

December 11, 2012

How to Add a Blog Sitemap and Why it's Important

<img src="sitemap.jpg" alt="Site Map">












A site map/sitemap/site index...whatever you want to call is....is a list of the pages of a website that is accessible to crawlers and readers. Crawlers use the sitemap to index your websites pages and readers can use the sitemap to navigate through your site more easily so they may find the information they are seeking.

We've been using this ---> A Little Unhinged Sitemap since the beginning of our site and it's worked perfectly for both purposes mentioned above. Below is the HTML code for this sitemap. It actually uses your default blogger feed url to pull your posts and update as you go. So you only have to add this code once and you're done. There is no coming back and updating it every time you publish a new post.

I added mine by adding a New Page in my Blogger Dashboard under Pages. Title the page as sitemap or site index, copy the below code and paste in into the page and click Publish.

<br />
<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript">
</script><br />
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript">
</script><br />
<br />
<style>
#bp_toc {
  border: 0px solid #000000;
  padding: 5px;
  width:100%;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #fff;
  color: #000000;
  padding-left: 5px;
  width:40%;
}
.toc-header-col2 {
  width:20%;
}
.toc-header-col3 {
  width:40%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:14px;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:14px;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:14px;
}
</style>

I have my sitemap listed twice on my website. Once above on the menu bar under Archive and once below in my footer under Sitemap. This is not necessary, you can do it or not...your call. To link to your sitemap or another page in your Blogger Footer is super simple though. If you're interested in doing this also, please follow the below steps.

1. In your Blogger Dashboard go to Template ---> Customize--->Layout.
2. In the Footer Layout Section choose the single footer option. Otherwise your links will be off centered. Then click Apply to Blog in the top right corner and click on Back to Blogger.
3. Once back in the Blogger Dashboard go to Layout ---> Scroll to the bottom and click on Add a gadget---> HTML/JavaScript---> Copy and paste the below code there and click save.

<p align=center><a href='PAGE URL'>TITLE OF LINK  l</a>
<a href='PAGE URL'>TITLE OF LINK l</a></p>
(This code is for two links and it's centered. You can change the word "center" to whatever you need. The number 1 after each TITLE OF LINK is being used as a separator. This is how it will appear: Disclosure l Privacy l Disclaimer l Rights l SiteMap)

Here is my completed code for my footer links:


<p align=center><a href='http://www.alittleunhinged.com/p/disclosure.html#.UFqavLJlTng'>Disclosure  l</a>
<a href='http://www.alittleunhinged.com/p/privacy.html#.UFqarrJlTng'>Privacy  l</a>
<a href='http://ourdisclaimer.com/?i=A Little Unhinged' target='_blank'>Disclaimer  l</a>
<a href='http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US' target='_blank'>Rights l</a>
<a href='http://www.alittleunhinged.com/p/archive.html#.UGyBjZiHJ8F'>SiteMap</a></p>

Sorry guys! I threw this post together pretty quick because I am exhausted...so if you need more explanation on a step please leave a comment below stating so and I'll get back to you as soon as I can. :) Feel free to email me with questions also: bfranks@alittleunhinged.com

This post was suggested by Chhavi Vatwani. Check out the guest post she wrote for us here: How Backlinks Work to Your Advantage. You can also swing by and visit her at Sour lemons and tequila, she shares beautiful poems on her blogspot and would love to hear what you think.