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 site 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 displays the content of your site 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 site.
On the other hand is an HTML sitemap for your actual site visitors. It is a simple page that shows all your posts and pages in an organized way.
Now that you know the difference, let’s 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 2 million websites and lets you create an HTML sitemap with a few clicks.
Note: There is a free version of All in One SEO Lite available which includes the HTML sitemap feature below, but we will use the premium version in our screenshot preview because it includes all the powerful features like smart sitemaps, redirect manager, SEO schema, and more.
The first thing you need to do is install everything in one SEO plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, the AIOSEO installation wizard opens, which guides you through setting up the plugin and getting your SEO settings right.
Just click the ‘Let’s get started’ button and follow the steps.
Then you will be taken to the WordPress admin dashboard where you have a new menu option called ‘All in one SEO’.
Then go to All in One SEO »Sitemaps, click on the ‘HTML Sitemap’ menu option and make sure ‘Enable Sitemap’ is turned on.
Next, you can choose how you want to display your HTML Sitemap.
For this guide, we select the option ‘Dedicated page’, but you can also add it as a shortcode, block, widget and more.
Then enter the URL of the page where you want the HTML Sitemap to appear. The plugin automatically creates a new page for you.
Once done, scroll down to the ‘HTML Sitemap Settings’ section.
Here you can customize how your HTML Sitemap should appear. You have control over which posts and pages to display, taxonomies such as categories and tags, sort order and more.
You can also enable ‘Compact archives’ to view your HTML sitemap in a compact data archive format.
This is similar to how we display our compact archives on our 404 pages here at WPBeginner.
When you have finished customizing your HTML Sitemap settings, click the ‘Save Changes’ button.
Now your visitors can see your HTML sitemap and more easily navigate around your site.
If you selected 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 Simple Sitemap
Simple Sitemap is a free plugin that lets you easily add an HTML sitemap to your WordPress site.
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.
Once the plugin is enabled, you can open an existing page or create a new HTML Sitemap page by navigating to Pages »Add New.
This plugin has recently added Gutenberg blocks that you can use to simply add an HTML sitemap page.
All you have to do is click on the ‘Plus’ icon, then select ‘Simple Sitemap’.
Another block included in this plugin is ‘Simple Sitemap Group’ which creates a branched visual sitemap. But we will use the ‘Simple Sitemap’ block for this guide.
Once you’ve added the block, it automatically creates your HTML Sitemap.
In the menu on the right you have customization options where you can choose to display ‘Posts’ or ‘Pages’ or both.
In the field under ‘Select record types to display’, simply enter ‘Post’ or ‘Page’ to select what you want to display.
You can then change how the list is displayed by changing the ‘Orderby’ or ‘Order’ drop-down lists.
You can also view the snippet for the specified pages or posts and enable or disable links. However, we will keep the default plugin settings to keep our HTML sitemap simple and easy to browse.
When you have finished customizing your HTML Sitemap page, click ‘Publish’ or ‘Save’ if you are updating an older page.
When your visitors go to your HTML sitemap, they see a navigation page similar to the one below.
Adding an HTML Sitemap to WordPress Using Shortcuts
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 use the classic editor.
Simply create a new page by navigating to Pages »Add New and then giving your new page a name.
Then click on the ‘Plus’ icon to add a new block to your page.
Then type ‘shortcode’ in the search field and select the ‘Shortcode’ block.
Then simply copy and paste one of the following shortcuts into the text editor.
Once done, click ‘Publish’ or ‘Refresh’ to save your changes.
If you need more help, see our guide on how to add a shortcode to WordPress.
The first shortcode shows your posts by category, and the second shortcode shows your pages.
How the plugin displays your Sitemap to your site visitors.
Creating an HTML Sitemap in WordPress for Top Pages Only
Many website 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, in your HTML Sitemap you will display pages in the correct hierarchical order.
How to add HTML sitemap with pages only.
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.
How to display your HTML Sitemap with all your WordPress pages listed in a hierarchical list.
It also includes your parent’s and child’s pages, which are listed in an embedded manner. For more details, see our guide on how to create a children’s page in WordPress.
We hope this article helped you learn how to add an HTML Sitemap page to WordPress. You may also want to see our expert selection of the best virtual phone number apps and our guide on how to choose the best blogging platform.
If you liked this article, you can subscribe to our YouTube channel for WordPress video tutorial. You can also find us at Twitter and Facebook.