If you want to take your HTML/CSS sitemaps a step further, here is how to create your own sitemap layouts that match the theme of your own website:

As this tutorial uses our own tool, A1 Sitemap Generator, you will need to download that first. However, some of the steps listed here may apply to other sitemap solutions as well.

1. Scan your website for URLs. Wait till the crawl has finished completely.
2. Select the HTML/CSS layout preset you want to use. This retrieves both code and options used.
3. After loading the layout, edit the site map code, so it matches your site completely. (Optional.)
4. Build, test and upload your new visual website sitemap.

Here is a picture highlighting how to load and save site map style and code templates:

Visual Sitemaps Presets Available

While you at any time can extend and modify the HTML/CSS code and option presets yourself, here are some of the already built-in visual sitemap types:

• SlickMap

  

• CSSsitemap

  

The first of these was recently shown at the sitemaps generator blog. It is a general make sitemaps introduction video showing how to crawl websites, create XML and HTML sitemaps, FTP upload etc.

For best visual results, be sure to check out the sitemap template system which makes it possible to have a generated HTML/CSS sitemap look like your existing website layout Of course, unlike humans, the search engines “reading” the links listed in your site map files will probably not care about the visuals

Website Structure
Make sure you use meaningful keywords in your directory and file names throughout your website, e.g.
http://www.example.com/keywords-in-dir/keywords-in-page.html. If you are using a blog or content management system that makes this difficult, look into if you can find a plugin or mod_rewrite which solves the problem.

Page Titles
This is tip 101 for all webmasters. Make sure all page titles in your website are unique and contain relevant keywords. Like having keywords in URLs, it really helps sitemap generator programs such as this in creating HTML sitemaps with relevant anchor text in links.

Linking to Your Website Sitemap
If you have all pages in your website link to your website sitemap, you ensure search engines such as Google and Yahooo will index and follow links in your sitemap. This can help you get new pages faster and higher ranked into search engine result pages.

Link Check Your Entire Website
When the scan has finished, you get an outline of your website with details for all pages. The website validation and link checker tools can help you solve various problems. When you are done, click the Create sitemap tab.

Ready to Create The HTML Sitemap
Select template sitemap and press the build sitemap button. Default template settings generates a valid HTML sitemap. However, you can create your own XHTML or HTML template if you wish. You can also adjust how the HTML sitemap generator builds the HTML sitemap, e.g. control max number of links per sitemap page, columns layout to use, anchor text generation etc.

View Your HTML Sitemap
After you have created your HTML site map, you can view the source code generated. There are also various shortcuts so you can view the generated site map files in different browsers.

Website Sitemaps Help People Navigate
If people can not find what they are looking for, many will try look for a sitemap that can guide them to the correct page in your website. Having one gives you one more chance of keeping your visitor on your website.

Help Search Engines Index and Rank Your Pages
HTML sitemaps help search engines find and index all pages in your website. When creating a HTML sitemap you can push important or new pages. If you make sure all links in your HTML sitemap use keyword rich anchor text, you also improve chances for having your pages ranked high in search engine result pages for relevant search terms.

Technical Information
You can also create sitemaps with XHTML. XHTML is similar to HTML, only difference is it conforms to XML syntax.

If you are running a website driven by a server-side language, e.g. PHP or ASP, you can still create HTML sitemaps. The important thing is not the language used at server-side, but instead what gets outputted (which is HTML or XHTML).

Indention in HTML Site Maps
It can often be useful to have links indented in a tree style, so it matches the visible URL structure in your website. This will make it easier for humans to visualize your website and find the sections and pages important to them. An example could a directory listing like this:

• Directory A
  • Page A
  • Page B
• Directory B
  • Page C
  • Page D

Using Columns to List More Pages
If you want to take full advantage of page width and thus lessen scrolling, it can be useful to create site map listings that use 2 or 3 column layouts.

Have Sitemap Span Multiple Pages With Large Websites
If your website is very large and you start to have above 100-200 links on a sitemap page, you should consider splitting your sitemap across multiple pages. Even if your users can navigate the HTML sitemap, search engines such as Google and Yahoo may start ignore links if you have thousands on a single page.

Page and Section Titles in Website Sitemaps
If possible, make sure each linked item in your HTML sitemaps have descriptive anchor text. This helps people and search engines to understand your website.

Create Your Website Sitemap Now
If you are looking for a program to do all of above, you can try our sitemapper or search Google for more alternatives.