How to Add an HTML Sitemap Page in WordPress (2 Ways)

Do you want to add an HTML sitemap page in WordPress?

Unlike XML sitemaps that are submitted to search engines for better crawling, HTML sitemaps present an organized list of your pages and posts to your website visitors.

In this article, we will show you how to add an HTML sitemap page in WordPress.

What is the difference between XML and HTML sitemaps?

An XML sitemap is a file that lists the content of your website in an XML format for search engines like Google and others.

You can submit your XML sitemap in webmaster tools to improve and control how search engines crawl your website.

On the other hand, an HTML sitemap is for the actual visitors of your website. It is a simple page that lists all your posts and pages in an organized way.

Now that you know the difference, let’s take a look at how to add an HTML sitemap page to WordPress using two different WordPress plugins. You can use the quick links below to jump directly to the method you want to use.

Method 1. Add an HTML Sitemap Page in WordPress with All-in-One SEO

We recommend using the All in One SEO plugin to add an HTML sitemap page in WordPress. It is the best WordPress SEO plugin on the market used by over 3 million websites and allows you to create an HTML sitemap with a couple of clicks.

Note: There is a free version of All in One SEO Lite available that includes the HTML sitemap feature below, but we will use the premium version in our screenshots because it includes powerful features like smart sitemaps, redirect manager, SEO schema and more.

The first thing you need to do is install the All in One SEO plugin. For more details, check out our step by step guide on how to install a WordPress plugin.

Upon activation, the AIOSEO setup wizard will open, which will guide you through plugin configuration and correct SEO settings.

Just click the ‘Let’s get started’ button and follow the steps.

After that, you will be taken to the WordPress admin panel, where you will have a new menu option called ‘All in One SEO’.

So you have to go to All-in-one SEO » SitemapsClick the ‘HTML Sitemap’ menu option and make sure the ‘Enable Sitemap’ option is checked.

You can then choose how you want to display your HTML sitemap.

For this tutorial, we’ll select the ‘Dedicated Page’ option, but you can also add it as a shortcode, block, widget, and more.

Next, enter the URL of the page where you want the HTML sitemap to display. The plugin will automatically create a new page for you.

Once you’ve done that, scroll down to the ‘HTML Sitemap Settings’ section.

Here you can customize how your HTML sitemap will be displayed. You have control over which posts and pages will display, taxonomies like categories and tags, sort order, and more.

You can also activate ‘Compact Files’ to display your HTML sitemap in a compact date file format.

This is similar to how we display our compact files on our 404 pages here on LearnWP.

Once you’re done customizing your HTML sitemap settings, be sure to click the ‘Save Changes’ button.

Now your visitors can see your HTML sitemap and more easily navigate your website.

If you chose the ‘Dedicated Page’ option above, you can visit the page by clicking the ‘Open HTML Sitemap’ button.

Method 2. Add an HTML Sitemap Page in WordPress with a Simple Sitemap

Simple Sitemap is a free plugin that allows you to easily add an HTML sitemap to your WordPress website.

The first thing you need to do is install and activate the Simple Sitemap plugin. For more details, check out our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can open an existing page or create a new HTML sitemap page by navigating to Pages » Add New.

Adding an HTML sitemap with a simple sitemap using blocks

This plugin has newly added Gutenberg blocks that you can use to simply add an HTML sitemap page.

All you need to do is click on the ‘More’ icon and then select the ‘Simple Sitemap’ option.

Another block included with this plugin is the ‘Simple Sitemap Group’ which creates a branched visual sitemap. But we are going to use the ‘Simple Sitemap’ block for this tutorial.

Once you add the block, it will automatically create your HTML sitemap.

In the menu on the right, you have customization options where you can choose to display ‘Posts’ or ‘Pages’, or both together.

In the box under ‘Select Post Types to Display’, simply enter ‘Post’ or ‘Page’ to choose what you want to display.

You can then change how the list is displayed by changing the ‘Sort’ or ‘Sort’ dropdown menus.

You can also show the excerpt of the listed pages or posts and enable or disable the links. However, we will keep the plugin’s default settings to keep our HTML sitemap simple and easy to navigate.

Once you’ve finished customizing your HTML sitemap page, click ‘Publish’ or ‘Save’ if you’re updating a previous page.

When your visitors go to your HTML sitemap, they will see a navigation page similar to the following.

Adding an HTML sitemap with a simple sitemap using shortcodes

Another way to add an HTML sitemap to WordPress is by using a shortcode. This gives you more control over the placement of your HTML sitemap and works for those using the classic editor.

Simply create a new page by navigating to Pages » Add Newthen give your new page a name.

After that, click on the ‘More’ icon to add a new block to your page.

Then, type ‘shortcode’ in the search box and select the ‘Shortcode’ block.

After that, just copy and paste one of the following shortcodes into the text editor. The first shortcode will list your posts by category, and the second shortcode will list your pages.

[simple-sitemap-group]

[simple-sitemap]

Once you’ve done that, click ‘Publish’ or ‘Update’ to save your changes.

If you need more help, check out our guide on how to add a shortcode to WordPress.

This is how the plugin will display your sitemap to your website visitors.

Creating an HTML sitemap with a simple sitemap for the main pages only

Many site owners use WordPress as a CMS with their main content published as pages instead of posts. For more details, see the difference between posts and pages in WordPress.

In this case, you’ll want your HTML sitemap to display the pages in the proper hierarchical order.

This is how you can add an HTML sitemap with only pages.

Simply add this shortcode to the page where you want to display your HTML sitemap. Follow the same steps above to add the shortcode to a new WordPress page.

This is how it will display your HTML sitemap with all your WordPress pages listed in a hierarchical list.

It also includes parent and child pages listed in a nested fashion. For more details, check out our guide on how to create a child page in WordPress.

We hope this article helped you learn how to add an HTML sitemap page in WordPress. You might also want to check out our expert picks for the best virtual business phone number apps and our expert guide on choosing the best blogging platform.

If you liked this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us at Twitter and Facebook.