Altaf Khatri
Altaf Khatri



RSS feed for http://www.AltafKhatri.com website. Twitter account of http://www.AltafKhatri.com website.
∗Recently Added - How to take care of Betta fighter fish and increase life span?  10/30/2013


Find me on web

 LinkedIn

 Facebook

 Twitter

Set up once - use life long.
How to automatically update the breadcrumb and sitemap for search engine using web.sitemap?


Let's make life easy!
It would be great if things took care of themselves with little involvement.
Here I am going to discuss about automatically updating 2 things with single modification.

Two things which will be automatically updated are:

  1. SiteMap - Search engines love this map. It lists down the hierarchy and the URL of different pages on the website. It's best to keep it updated all the time. It will be an assurance that the new pages are indexed when the crawler visits your site next time.
  2. Breadcrumbs - It gives a sense to the end user about it's whereabouts on the website. There may be different routes a user can take while traversing the complex website. It will be a good user experience if user knows where it has reached and the route of it's traversal.
I like to have both of these features in my website. But it would be hassle to update these two when a new page is added to the site. Here I am going to discuss how sitemap and breadcrumbs be taken care with just one initial set up.

Steps:

  1. Add a web.siteMap to the site. Right click on the website and click Add New Item. Select Site Map. Don't forget to add the siteMap to the root of the website, i.e. in the same location as the default web.config. The sitemap for this website looks like this.
  2. On the master page, where you want the breadcrumb to appear, drop the SiteMapPath control from the Toolbox > Navigation section. Also drop SiteMapDataSource control from Toolbox > Data section. SiteMapDataSource will serve as the datasource for the SiteMapPath control. It reads from the web.sitemap created earlier.
  3. Add a web page that will hold the sitemap. Remember to link this webpage on the master page so that it is visible on the pages.
    i.e. use the anchor tag to href the sitemap webpage from the master page.
  4. Create a class file. I name it as MenuHelper. The code is as below:

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Text;

    using System.Web.Mvc;

    namespace AltafKhatri.Helpers

    {

         public static class MenuHelpers

         {

            static StringBuilder sb;

            public static string Menu()

            {

                sb = new StringBuilder();

               if (SiteMap.RootNode != null)

               {

                   sb.Append("<ul>");

                   sb.Append("<a href=\"" + SiteMap.RootNode.Url + "\">" + SiteMap.RootNode.Title + &"</a><br/>");

                   if (SiteMap..RootNode.HasChildNodes)

                   {

                       WriteChildNodes(SiteMap.RootNode, true));

                   }

                   sb.Append("</ul>"));

               }

               return sb.ToString();

           }

           public static void WriteChildNodes(SiteMapNode node, Boolean boldHeader)

           {

               for (int cnt = 0; cnt < node.ChildNodes.Count; cnt++)

               {

                   sb.Append("<li>"));

                   if (boldHeader)

                   {

                       sb.AppendFormat("<a href='{0}'>{1}</a><br/>", node.ChildNodes[cnt].Url, node.ChildNodes[cnt].Title);

                   }

                   else

                   {

                       sb.AppendFormat("<a href='{0}'>{1}</a><br/>",, node.ChildNodes[cnt].Url, node.ChildNodes[cnt].Title);

                   }

                   if (node.ChildNodes[cnt].HasChildNodes)

                   {

                       sb.Append("<ul>"));

                       WriteChildNodes(node.ChildNodes[cnt], false));

                       sb.Append("</ul>"));

                       sb.Append("<p/>"));

                   }

                   sb.Append("</li>"));

               }

           }

       }

    }

    Now for the inquisitives, what does this code do? This code loops through the web.SiteMap (created in step 1) and creates an HTML with the hierarchy and the links to individual pages.

  5. In the controller of your sitemap webpage call this MenuHelper method.
    public ActionResult SiteMap()

    {

        string sitemp=MenuHelpers.Menu();

        ViewData["SiteDataMap"] = sitemp;

        return View();

    }

  6. In the View of the page, write the HTML string. See to it that you don't do HTML.Encode(string).
    <%= ViewData["SiteDataMap"] %>
  7. This is it. You are all set up. Now when you add any new page to the site update the web.sitemap. This should automatically be reflected in your Sitemap webpage and the breadcrumb.





SiteMap  |  Contact Me