Microsys Blog

Getting Started with HTML Sitemaps

Have you ever wanted an automatic way to create a visual sitemap of your entire website, e.g. to impress people visiting your website? If so, continue reading this tutorial.

For this, we we will be using own own sitemapper tool, A1 Sitemap Generator and use the default settings as these work with the vast majority of all sites. We are also going to briefly to touch on some of the more advanced options our software supports.

Scan Your Site to Find All Pages

Before anything else, you will need to crawl your site, so all your pages can be included in your HTML sitemap. A1 Sitemap Generator offers many options for analysis and output filters, robots.txt, no-follow, no-index, canonical, login authentication etc. However, as mentioned before, you can in most cases ignore these settings, and everyting will work automatically. In our tutorial, you only need to fill in the path to your website and press the start scan button.

Check Your Site for Broken Links

After the crawl has finished completely, you get to see an outline of your site with details for all pages. The site validation and link checking tools can assist you in solving various problems with your websites. When you are done, click the Create sitemap tab.

Build Your HTML Sitemap

Select template sitemap and click the build sitemap button. Default template settings generates a valid HTML sitemap. However, if you wish, you can also create your own XHTML or HTML templates. In addition, you can also control how the HTML sitemaps are built, e.g. max number of links per page in the site map, if to use a column based layout, how anchor text is generated etc.

Inspect The Sitemap Generated

After you have built your new HTML site map, you can view and inspect the the source code of it. There are also various shortcut buttons, so you can view the generated site map files in different browsers to make sure everything looks good.

Beyond Standard HTML/CSS Sitemaps

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:

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

Some of the-made HTML/CSS templates for creating visual sitemaps:

• SlickMap

  

• CSSsitemap

  

Note: If you are not satisfied with the sitemap styles and templates included in the sitemap creator tool, just create your own HTML/CSS sitemap template! You can either modify an existing template or create one from scratch, so it matches your website layout.

HTML Sitemap Demonstration Videos

To get started, you can check the making sitemaps YouTube video which demonstrates how to scan websites, create XML and HTML sitemaps, FTP upload etc.