Friday, March 29, 2024

Creating Simple, Yet Effective Sitemaps in HTML

You may have considered adding a sitemap to your website at one point, but never got around to it. This tutorial will tell you why you need one, and will show you how to create one using HTML.

There are three excellent reasons why you might consider adding a sitemap to your web site. The first reason is to provide another effective means for your visitors to find content.

The second, is so that you can submit your sitemap to Google, Yahoo! and Bing; this makes it easier for the search engines to index your site. It will not necessarily increase your PageRank, but you can sleep better at night knowing that your pages are effectively being indexed.

The third reason is to help your search engine optimization. A common technique to enhance your SEO is to place links within your site–using keywords–that point to other pages within your site. For example, if you have a content site with several authors, you might create author pages that contain links to each of their articles. Now take that idea one step further by creating a single page with a site-wide map with lots of links.

When first researching sitemaps, you might be tempted to auto-generate a sitemap as an XML file. Sites like XML-Sitemapsprovide a free sitemap service up to 500 pages. If you have more than 500 pages, or you want some bells and whistles, then they have a premium version for $19.99. You simply plug in your URL, and they automatically scan your web site and create the XML file for you. One word of caution: if you have a forum associated with your site, it will attempt to index the forum if it is located in the same root directory of your site; if that happens, there’s a good chance that your forum will exceed the 500-page limit.

After the scan, you will see the generated sitemap details page, including number of pages, broken links list, XML file content, and a link to a compressed sitemap. Find the XML content, go to your Google Webmaster account, and add your sitemap. XML-sitemaps.com also creates an HTML version of the sitemap, which you can then add to your website. However, and I don’t write this lightly, there’s a good chance you’ll want to reformat the HTML and provide it some style. The version they create for you leaves plenty of room for improvement.

Ultimately though, you might realize that your site really does not need an XML sitemap submitted to the major search engines. In fact, if you followed proper web etiquette in creating your site, there’s a very solid chance that Google and the others have already indexed your site without need for a sitemap. Before you spend $20 or waste your time auto-generating site maps, try typing the following into a browser to see if your site is already in Google’s index.

site:htmlgoodies.com/

Of course, substitute ‘htmlgoodies.com/’ with your own site. Note that you shouldn’t include a space between the site: operator and your domain name. When this was tested in FireFox, it did not work, but it worked fine in Internet Explorer. And, obviously, it works with Chrome.

Even if you find that your site is being indexed by Google, but you’d still feel better knowing that Google is being force fed your content, you can submit an RSS feed in place of a sitemap. You can find how to do that easy enough through Google’s Webmaster tools.

Another reason to not use a sitemap tool is that the HTML-generated site map they create is not dynamic. Meaning, that if you were to add or move a page, you’d have to rescan the entire site to update your sitemap. There has to be a better way, and there is, you can create dynamic sitemaps; but you can’t do it simply with HTML, therefore, those steps will not be presented here.

Instead, my proposal for creating a simple HTML sitemap is to create a basic outline of your site, and then recreate the outline using unordered lists. In the outline, only include the top-level pages. Here’s an example for my personal site:

I.	Articles
a.	Commentary
b.	Reviews
c.	Videos
II.	Contributors
a.	Contributor 1
b.	Contributor 2
c.	Contributor 3
III.	Contests
IV.	Community
a.	Forum
b.	Arcade
i.	Arcade Game 1
ii.	Arcade Game 2
iii.	Arcade Game 3

Take note that I did not drill down to the individual articles. Instead, I simply placed links to the pages that do contain links to the articles. Listing each and every article on the sitemap would require an extreme amount of space, and depending on the number of articles you have, it could take a reader too much time to scan through everything.

What this simple sitemap provides is a means to get your visitor headed down the right path. For example, if the visitor is looking for a review article, then they can simply click the Reviews link. The Reviews page then provides all of your site’s sorted reviews-this is the page that you continuously update with new content, and not the sitemap. The sitemap simply points the visitor in the appropriate direction. Here’s the outline in HTML format:

  <UL>
<li> Articles
<ul>
	<li> Commentary</li>
	<li> Reviews</li>
	<li> Videos</li>
</ul>
<li>Contributors</li>
<ul> 
<li>Contributor 1</li>
<li>Contributor 2</li>
<li>Contributor 3</li>
	</ul>
	<li>Contests</li>
	<li>Community</li>
	<ul>
		<li>Forum</li>
		<li>Arcade</li>
		<ul>
		<li>Arcade Game 1</li>
<li>Arcade Game 1</li>
<li>Arcade Game 1</li>
</ul>
</ul>
    </UL> 

To recap, what this sitemap does is provide a good starting point for visitors to find content in case they happen to become lost or confused. Also, it is one more step you can take to increase your SEO by creating links within your site.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured