How to Create an HTML Sitemap: Best Practices and Tools

8 min read

How to Create an HTML Sitemap: Best Practices and Tools

on June 1st 2023

The Ultimate Guide to Creating an Effective HTML Sitemap for Your Website

An HTML sitemap is an important part of website optimization. It helps users find their way around your website and helps search engines index your content. It also plays a role in structuring internal links. In this guide, we will discuss the recommended methods for creating an effective HTML sitemap, and we'll also introduce some useful tools for this task. This guide is useful for both experienced web developers and those new to website creation, providing valuable insights for improving your website's navigation and search engine performance.

What is an HTML Sitemap?

HTML sitemaps differ from XML sitemaps in their intended use. While XML sitemaps are a special type of file (.xml) that search engines can easily crawl to find site content without downloading entire pages or following internal links, HTML sitemaps are designed with users in mind, providing a visible guide that can assist users in site navigation.

What is the difference between an HTML sitemap and XML sitemap?

HTML and XML sitemaps are both essential for guiding users and site crawlers in site navigation. Here's a comparison of the two:

HTML Sitemaps:

An HTML sitemap is a guide for both users and site crawlers that assist in site navigation. They typically live in a top-level subfolder off of the domain (e.g., example.com/sitemap) and are linked from the footer of each site page. This provides a distinct benefit as it guarantees the HTML sitemap is always a click away for users that lose their way when navigating through content.
HTML sitemaps fall under the quadrant of technical SEO of search engine optimization and are a key resource for both users and search engine crawl bots. By listing top site pages, webmasters are able to guide users to top site content or show crawl bots which pages are most important.
The sitemap should contain all the pages you want to be crawled and ranked by search engines. The two main elements of a sitemap include page priority and change frequency, which tells search engine crawlers what URLs to crawl first and how often to crawl them1.
For e-commerce sites with several brands or frequently changing products, it is beneficial to have an automated HTML sitemap. By automatically updating links, the amount of broken links and manual updates will be reduced.
A well-optimized HTML sitemap is considered a best practice for search and has a direct, positive impact on organic rankings.

XML Sitemaps:

XML sitemaps serve a similar purpose to HTML sitemaps with one distinction – intended use. XML sitemaps are a special type of file (.xml) that search engines can easily crawl to find site content without downloading entire pages or following internal links. Most CMS platforms, like a WordPress site for example, have a plugin where you can view your sitemap.
The XML sitemap should include every URL you want to be indexed by search engines and should be submitted to Google through the Google Search Console. Errors in the XML sitemap can be found through the Google Search Console2.

Why Do You Need an HTML Sitemap?

An HTML sitemap not only boosts your site's SEO performance but also serves your users. When your sitemap is properly designed, it:

Content Categorization: A sitemap enables you to categorize your website's content in a structured manner. This categorization helps search engine bots understand your site's content, thereby improving your site's search rankings.
Improved Site Navigation: A sitemap enhances the overall navigation of your site, making it easier for users to find the pages they're looking for. This ease of navigation can improve the user experience and increase the time users spend on your site.
Efficient Content Addition: A sitemap provides a systematic structure that simplifies the process of adding new content to your site. This structure can ensure that new content is easily accessible and properly indexed by search engines.
Organization of Large Websites: For large websites with numerous pages, a sitemap is essential for managing and organizing the site's content. This organization can prevent content from being overlooked by users or search engine bots.
User Retention: By ensuring that users can quickly and easily find the information they're looking for, a well-designed sitemap can help you retain users and potential customers. This retention can lead to increased engagement, conversions, and customer loyalty.

Common HTML Sitemap Mistakes and How to Avoid Them

HTML sitemaps live in a top-level subfolder off of the domain (e.g., example.com/sitemap) and are linked from the footer of each site page, thus ensuring that they're always a click away for users who may lose their way when navigating through content. In addition, they provide crucial information to search engine crawlers about what URLs to crawl first and how often to crawl them.

However, there are common things that people need to correct when creating and maintaining their HTML sitemaps. Here's how to avoid them:

Closing the robots.txt and x-robots-tag: Ensure that your sitemap is open for indexing to balance the weight distribution of your internal pages. A sitemap should mirror your Robots.txt file, which tells search engines what URLs not to crawl. That means you don’t want pages that are excluded in your Robots.txt file to be in your sitemap and vice versa.
Cluttering your sitemap with thousands of links: Simplify your sitemap by limiting links and using a multi-level structure instead. The number of links contained on an HTML sitemap should be less than 100. For larger sites, it is recommended to create multiple theme-based sitemaps.
Including technical or deleted pages: Only display links to existing, indexable pages that provide value to users. A sitemap should contain all the pages you want to be crawled and ranked by search engines. So, it's crucial to include only those pages that provide value to the users and the search engine crawlers.
Failing to update your sitemap: Regularly remove dead links and add new pages to keep your sitemap current. For e-commerce sites with several brands or frequently changing products, it is beneficial to have an automated HTML sitemap. By automatically updating links, the number of broken links and manual updates will be reduced.

Top HTML Sitemap Generator Tools

To streamline the sitemap creation process, use an online HTML sitemap generator such as:

Seodity: is a comprehensive SEO tool that offers an On-site Audit module to analyze and identify potential issues on your website that may affect its performance in search engines. The audit analyzes over 100 factors influencing your website's visibility and ranking in search engine results pages (SERPs). Seodity's On-site Audit provides advanced options for analysis, such as the Data Explorer, which enables advanced filtering of the audit data, offering a deeper understanding of your website's performance. It could also help generate an HTML sitemap. To do that, filter all of your internal URLs in Data Explorer.

Screaming Frog: This is a powerful and flexible website crawler available for Windows, MacOS, and Ubuntu. It collects data about URLs (like broken links), page titles, metadata, and more, helping you with your SEO strategy. As for its HTML sitemap generation capabilities, it can help you identify the structure of your site and create a visual representation. This is useful for understanding how your site is organized and what areas might need improvement

Xenu's Link Sleuth is a website crawling tool that's primarily used to identify broken links on a website. However, it can also be used to generate an HTML sitemap, which is a visible or clickable map that helps users and search engines understand the structure of a website. It checks websites for broken links, validates text links, images, backgrounds, local image maps, style sheets, scripts and java applets. It displays a continuously updated list of URLs which can be sorted according to different criteria. It can create a simple report about the site, including a list of URLs that can be saved as a text file, which can then be manipulated to create an HTML sitemap

Best Practices for Creating an HTML Sitemap

Structured Presentation: Arrange the website pages in a hierarchical structure, starting from the main page to sections, subsections, and individual landing pages. This helps users to follow a logical path down to individual pages and allows search engine crawl bots to see the relationship between different pages, enhancing the visibility of your site's structure.
Accessibility: The HTML sitemap typically lives in a top-level subfolder off of the domain (e.g., example.com/sitemap) and is linked from the footer of each site page. This makes it easily accessible to users, ensuring that the HTML sitemap is always a click away for users that lose their way when navigating through the website. It's also a good practice to include a link to the sitemap on the 404 error page.
Brief Content Descriptions: While it's not mentioned explicitly in the sources I consulted, it makes sense to add comments, labels, or tags to sections and pages within the sitemap to assist users in finding the right content. This could be part of creating an easily understandable hierarchy of links.

FAQ

Q: How to create an HTML sitemap in WordPress without a plugin?

A: To create an HTML sitemap in WordPress without a plugin, follow these steps:

Create a new page in your WordPress dashboard.
Add a title, such as "Sitemap."
Customize the page by adding the desired headings and subheadings.
Insert links to your website's pages by using the anchor tag <a href="URL">Page Title</a>.
Save the page and publish it.

Q: How do I make a sitemap in HTML?

A: To create an HTML sitemap, follow these steps:

Open an HTML editor or a plain text editor like Notepad.
Create a simple HTML structure by adding the <!DOCTYPE html>, <html>, <head>, <title>, and <body> tags.
Add a title, such as "Sitemap," between the <title> tags.
Customize the page by adding headings and subheadings.
Insert links to your website's pages using the anchor tag <a href="URL">Page Title</a>.
Save the file with a .html extension and upload it to your web server.

Q: Do you still need an HTML sitemap?

A: While less critical than XML sitemaps, HTML sitemaps can still be useful for website visitors and search engine crawlers. They help users navigate your site effectively, which may improve user experience and encourage them to stay longer. Furthermore, search engines may use HTML sitemaps to discover otherwise inaccessible pages and index them more efficiently.

Q: What is the correct HTML for a hyperlink?

A: The correct HTML for creating a hyperlink is the anchor tag <a href="URL">Link Text</a>. Replace "URL" with the destination address and "Link Text" with the desired clickable text.

Q: What is the correct HTML syntax for creating a hyperlink to an image?

A: To create a hyperlink to an image, surround the image tag with an anchor tag. Here is an example:

</a>

In this example, clicking on the image will redirect users to "www.example.com."