Introduction
Though many web sites use a site map for navigation, site maps can be handy for generating web page titles, too! If you're not using a site map for navigation, you still might want to create one just for page titles. However, if you are already using a site map, you are ten minutes away from doubling its usefulness!
In this article, I describe a method for utilizing the page titles and descriptions in a site map to title your web pages by programmatically altering the HTML <title>
tag. In addition to increasing the use of your site map, it places all your page titles in one convenient to edit location!
Background
ASP.NET Site Maps
ASP.NET site maps contain a hierarchal layout of the pages in your web site along with a title
and description
attribute for each page. The most common use for site maps is to produce a "tree-view" of the layout of a site, or produce the "bread crumb" navigation you are most likely familiar with as pointed to by the mouse cursor in the image below:
The title
attributes from your site map are used for the navigation links. The description
attributes—if provided—appear as tool tips when a link is hovered on by the cursor. Because you have already provided this information in your site map, why not use it to title your web pages as well? In the image above, you can see that I have!
Google and Search Engines
Search engines such as Google return listings with the exact title of your web page as a link in bold print:
These bold print headlines are the item that catches viewers' eyes and gets them to click on your site. Make your titles good! Additionally, Google places high priority on the keywords in your page titles when ranking listings. Again, pick good titles!
The Code—Ten Minutes to Completion
To begin, your site should use .master pages (or some other method) so that the HTML <head>
and <title>
tags are in one place instead of replicated on each individual page.
Programmatically Changing the <title>
Tag
To programmatically access and modify the page title, you must use the ASP.NET header control: <head runat="server" />
. In my master page, I also specify a default title that is used for all web page titles:
<head runat="server">
<title>Tek4 Innovations</title>
...
</head>
Modifying the <title>
element is now trivially accomplished with the following code:
Page.Title = "My Web Page Title"
Override the Page_Load
Method
In the same master page, I override the Page_Load
method to append site map information to the page title—with a few twists:
C#
<script runat="server">
void Page_Load(Object sender, EventArgs e) {
SiteMapNode currentNode = SiteMap.CurrentNode;
if (currentNode != null) {
String subTitle = currentNode.Description;
if (subTitle.Length == 0) subTitle = currentNode.Title;
if (subTitle.Length !=0 && subTitle != "Home")
Page.Title += "\u2014" + Server.HtmlEncode(subTitle);
}
}
</script>
VB
<script runat="server">
Sub Page_Load(ByVal Sender As System.Object, ByVal e As System.EventArgs)
Dim currentNode As SiteMapNode = SiteMap.CurrentNode
If Not currentNode Is Nothing Then
Dim subTitle As String = currentNode.Description
If subTitle.Length = 0 Then subTitle = currentNode.Title
If subTitle.Length <> 0 And subTitle <> "Home" Then
Page.Title &= "\u2014" & Server.HtmlEncode(subTitle)
End If
End If
End Sub
</script>
The code appends the specific page title to the default title already present in the <title>
tag, inserting the em-dash '—' character (Unicode "\u2014") as a separator. The description
attribute from the site map usually contains the longer and more complete description, so that is the preferred title. If description
is empty, then the contents of the site map's title
attribute is used. The code leaves the default title alone if there is nothing to append.
One additional caveat: I didn't want my home page to say "My Web Site—Home". I simply wanted "My Web Site". Therefore, my code performs a special test for the "Home" page and disregards appending anything. I could have left the title
attribute in my site map blank, but I'm using the site map for navigation as well, so that wasn't an option—I still need a "Home" link in my navigation!
Points of Interest
The problem with using site maps is you are forced to constantly update the site map so that every page is listed. If you forget to list a page, suddenly you have a page with no title! Worse, if you are using site maps for navigation, the navigation menu disappears when you browse to the page!
To ease site map maintenance—and cover for when I forget—I created a SiteMapProvider
class that dynamically generates site map entries for unlisted pages, "inheriting" the description from the "parent" page. Therefore, if you forget to add your "Widgets" page to your site map, but it is in the "Our Products" page directory, then the page would still receive the page title, "Our Products", which is better than nothing.
Take a look at my ScionSiteMapProvider here: ScionSiteMapProvider.
History
- 2007-Jan-18: Original post.