Untitled-2 white

Download What You Want For Free

How to Add an HTML Sitemap Page in WordPress

Are you looking to add an HTML sitemap page to WordPress?

HTML sitemaps are not submitted to search engines for better crawling. Instead, they present a structured list of pages and posts that you want your visitors to see.

This article will show you how to create a WordPress HTML sitemap page.

What is the difference between HTML Sitemaps and XML?

An XML sitemap file is a file that lists the content of your website in XML format, which can be used by search engines such as Google and other search engines.

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

An HTML sitemap, on the other hand, is for your website visitors. This is a page that organizes all of your pages and posts.

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’s the best WordPress SEO plugin in the market used by over 2 million websites and lets you create an HTML sitemap with a couple of clicks.

Notice: You can get a free copy ofAll-in-One SEO LiteThere are many options available, including HTML sitemap features. However, we will use the premium version for our screenshot example, which includes all the powerful features such as smart sitemaps and redirection manager.

The first thing you need to do is install the All in One SEO plugin. For more details, see our step-by-step guide on Best WordPress Backup Plugins Compared.

After activation, you will see the AIOSEO setup wizard. This will help you set up the plugin and get your SEO settings correct.

Follow the following steps:

So, click “Let’s Get Started”

AIOSEO setup wizard

Here you will find a new menu option called “All in One SEO”.

Next, you will need to go to All-in-One SEO >> SitemapsClick on the HTML Sitemap’ menu option and ensure that the Enable Sitemap toggle is on.

Enable HTML sitemap

Next, you have the option to choose how you want your HTML sitemap displayed.

This tutorial will use the ‘Dedicated Page” option. However, you can add it as a shortcode or block, widget, or other means.

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

Enter URL for HTML sitemap page

After you have done this, scroll down to section ‘HTML Sitemap Setting’.

You can modify the HTML sitemap’s display. You have control over what posts and pages will display, taxonomies such as categories and tags, sort order, and more.

Customize HTML sitemap settings

To display your HTML sitemap as a compact archive format, you can turn on ‘Compact Archive’

Once you are done customizing your HTML web sitemap settings, click the “Save Changes” button.

Save custom HTML page settings

Your visitors will now be able to view the HTML sitemap and navigate more easily around your website.

If you have selected the Dedicated Page option, you can then visit the page by clicking on the Open HTML Sitemap button.

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

Simple Sitemap is a free plugin that lets you 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, see our beginner’s guide on how to install a WordPress plugin

After the plugin has been activated, you will be able to open any page or create a new HTML web sitemap page by navigating here pages >> Add New.

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

Simply click on the “Plus” icon and then choose the “Simple Sitemap” option.

Add simple sitemap block

The Simple Sitemap Group block is another included in this plugin. It creates a visual sitemap that branches. We’ll use the Simple Sitemap’ Block for this tutorial.

After you have added the block, your HTML sitemap will be automatically created.

You can customize the right-hand menu to show ‘Posts’, ‘Pages’, or both.

To choose what to display, enter the appropriate post type in the box below ‘Select Post Types to Display’.

Sitemap created add posts or pages

You can then change the display of the list by changing the drop-downs for ‘Orderby’ or ‘Order.

You can display an excerpt from the page or post listed and toggle between enabling or disabling links. To keep our HTML sitemap easy-to-use, we will use the default plugin settings.

Customize sitemap order and appearance

After you have finished customizing your HTML web sitemap page, click “Publish” or “Save” if you are updating an older page.

Your visitors will see a similar navigation page when they visit your HTML sitemap.

Final block sitemap example

Adding an HTML Sitemap in WordPress 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 who are using the classic editor.

Navigate to create a new page. Pages >> Add NewNext, give your page a name.


To add a new block, click on the “Plus” icon.

Next, enter ‘shortcode’ into the search box. Select the ‘Shortcode’ block.

Add shortcode block

Simply copy and paste the following shortcodes into the text editor.



Paste shortcode and publish

Once you have done this, click ‘Publish’ or Update to save your changes.

For more information, see our guide on adding a shortcode in WordPress.

The first shortcode lists your posts by category. The second shortcode lists your pages.

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

HTML sitemap posts and pages

Creating an HTML Sitemap in WordPress For Top Pages Only

WordPress is a popular CMS that many site owners use. You can find out more about the differences between pages and posts in WordPress.

In this instance, your HTML sitemap should show pages in the correct hierarchical order.

This is how to add it using only pages.

Add this shortcode on the page you wish to display your HTML web sitemap. To add the shortcode on a new WordPress page, follow the steps above.


This also lists your parent and child pages in a nested manner.


Leave a Reply

Your email address will not be published. Required fields are marked *