How To Add HTML Sitemap Page In WordPress

Would you like to add an HTML sitemap to WordPress?

Unlike XML sitemaps, HTML sitemaps are displayed to your website visitors in an organized list of your pages and posts.

We will show you how to add an HTML sitemap to WordPress in this article.

What’s the Difference Between XML and HTML Sitemaps?

XML sitemaps list your website content in an XML format for search engines like Google and others.
In webmaster tools, you can submit an XML sitemap to improve and control the way search engines crawl your website.
A HTML sitemap, however, is for your actual website visitors. All your posts and pages are organized on this page.
To learn more about the difference, let’s examine two different WordPress plugins for adding an HTML sitemap to WordPress. To jump directly to the method you want, you can use the quick links below.

• Create an HTML Sitemap using All in One SEO in WordPress
• Create an HTML Sitemap Page in WordPress with Simple Sitemap

Method 1. Create an HTML Sitemap using All in One SEO in WordPress

Add an HTML sitemap to WordPress using the All in One SEO plugin. This WordPress SEO plugin is used by over 2 million websites and allows you to create an HTML sitemap with a few clicks.

Note: In our screenshot example, We will be using the premium version of All in One SEO Lite because it includes all the powerful features such as smart sitemaps, redirection manager, SEO schema, and more. A free version is available which includes the HTML sitemap feature below.

Install the All in One SEO plugin first. Visit our step-by-step guide on how to install a WordPress plugin for more details.

Following activation, the AIOSEO setup wizard will open, which will walk you through configuring the plugin and configuring your SEO settings.

For a start, click on ‘Let’s Get Started.

Your WordPress admin dashboard will then appear, where you’ll find a new menu item called ‘All in One SEO’.
Now you can click on All in One SEO » Sitemaps followed by HTML Sitemaps and make sure “Enable Sitemap” is selected.

Finally, you can decide how you want to display your HTML sitemap.
For this tutorial, we’ll choose ‘Dedicated Page’, but it can also be added as a shortcode, widget, block, or other options.
Choose the URL for the page where the HTML sitemap should appear. Your new page will be created automatically by the plugin.

Go to the ‘HTML Sitemap Settings’ section once you’ve done that.
You can customize how your HTML sitemap appears here. In addition to controlling what posts and pages appear, you can also control taxonomies, such as categories and tags, and sort order.

The ‘Compact Archives’ option allows you to display your HTML sitemap in a compact date archive format.
Click the ‘Save Changes’ button once you have finished customizing your HTML sitemap settings.

Using your HTML sitemap, your visitors can navigate your website easier.
Click on the button that says ‘Open HTML Sitemap’ to visit the dedicated page if you selected ‘Dedicated Page’ above.

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

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

The first step that needs to be taken is to install and activate the Simple Sitemap plugin.

By selecting Pages » Add New after activating the plugin, you can either view existing pages or create new HTML sitemap pages.

The plugin features newly added Gutenberg blocks that you can use to create a sitemap page in HTML.

It’s as easy as clicking ‘Plus’ and selecting ‘Simple Sitemap’ option.

‘Simple Sitemap Group’ – a branching visual sitemap – also comes with the plugin. In this tutorial, we’ll use the ‘Simple Sitemap’ block.

The HTML sitemap is automatically generated as soon as the block is added.

There are customization options on the right-hand menu where you can choose to display ‘Posts’ or ‘Pages’, or both together.

To select the post type to display, enter either ‘Post’ or ‘Page’ in the box.

Following that, you can change how the list appears by changing the ‘Orderby’ or ‘Order’ drop-downs.

A page or post excerpt can also be displayed, and links can be enabled or disabled. However, our HTML sitemap will be simple to browse if we keep the plugin settings as default.

Then, if you are updating an older HTML sitemap page, click ‘Publish’ and finish customizing it.

A navigation page similar to this one will appear when your visitors visit the HTML sitemap.

Adding an HTML Sitemap to WordPress using shortcodes

Using a shortcode is another way to add an HTML sitemap to WordPress. It allows you to place your HTML sitemap more easily and is compatible with the classic editor.

Navigate to Pages » Add New, then give your new page a name.

Then click the ‘Plus’ icon to add a new block to your page.

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

Use one of the following shortcodes.

You can now save your changes by clicking ‘Publish’ or ‘Update’.

First, the post categories will be listed, then your pages will be listed.

This is how visitors to your website will see your sitemap when the plugin is installed.

WordPress Sitemap For Top Pages Only

WordPress is used by many website owners who use pages as a CMS instead of posts for their main content.

HTML sitemaps in this case should display the pages according to hierarchical order.

Here is how you can create an HTML Sitemap with only pages.

The HTML sitemap can be displayed by adding this shortcode to a page. Use the same steps above to create a new WordPress page with the shortcode.