Introducing | Kaon — Creative Website Builder for WordPress & WooCommerce

Home How to Add an HTML Sitemap Page in WordPress | 2 Easy Methods

How to Add an HTML Sitemap Page in WordPress | 2 Easy Methods

Use our simple step-by-step tutorial to create an HTML sitemap page in WordPress with ease, all in an intuitive interface utilizing the power of WordPress plugins.
How to Add an HTML Sitemap Page in WordPress _ 2 Easy Methods
Use our simple step-by-step tutorial to create an HTML sitemap page in WordPress with ease, all in an intuitive interface utilizing the power of WordPress plugins.

How to Add an HTML Sitemap Page in WordPress | 2 Easy Methods

When building a solid SEO strategy for your website, sitemaps are an important factor that must be considered at all costs because that’s how bots crawl for content on your website, and a well-structured sitemap provides a clear path to everything your website contains The two most important sitemaps to create for your website are XML sitemaps and HTML sitemaps pages. 

Both of these sitemaps ensure clear navigation across your website for both search engines and your site’s visitors. For this article, we will cover how to create an HTML sitemap page in WordPress using a WordPress plugin. 

The process is simple and straightforward, and these plugins also offer a powerful set of tools and features to establish visibility on all search engines and improve your site’s rankings. There’s a clear difference between XML sitemaps and HTML sitemaps, as both contain the entire structure of your website, except each, is present in different languages and serves different audiences.

The XML sitemap is usually created for search engines, while an HMTL sitemap is created for users to offer them clear navigation of your website. A sitemap is a file or a special webpage that lists all your website’s content in an HTML or XML format.

What is an HTML Sitemap?

An HTML sitemap is a hyperlinked web page on a website that provides the entire site’s structure outlining every page existent. Creating an HTML sitemap page will be beneficial for both your website in terms of search engine optimization as well as your visitors because it provides them with navigation wherever they might be struggling to find a certain page on your website. 

By building an HTML sitemap page you will be able to provide your users with a hyperlinked outline of all your pages and they will easily spot the content they need. This results in a good user experience, which ultimately is a great indicator for Google and other search engines that your website is worth visiting. 

If you provide clear navigation menus on your website, users should be able to wander through your site easily, but in cases where a website is filled with links and pages and provides a complex structure, navigation might still be challenging, that why providing an HTML sitemap page will ease this process. 

You should be able to create an HTML sitemap page quite easily in WordPress using the powers of popular plugins that are excellent for the job. You do not need to create your HTML sitemap manually, as that will take you a long time, and you’ll be wasting your precious time on things that can be figured out easily when in reality you can concentrate your attention on creating better content and improving your website. 

HTML sitemaps are a more visual type of sitemap that lists all your website’s links to help visitors navigate easily on your website. You might see partial HTML sitemaps integrated onto the footer area, as they don’t necessarily include every single page on your website. You might decide to include all the most important pages and links on your sitemap, which we will see in the next sections. 

What is the difference between XML and HTML Sitemaps?

Until you pay close attention to them, you might confuse HTML and XML sitemaps, and due to the fact that both provide in part the same functionality on your website, there is no wonder people muddle between the two terms. But there’s a clear distinction between XML and HTML sitemaps.

For starters, an XML sitemap is a file that lists all the URLs on your website that you want to publicly display. An XML sitemap helps search engines like Google and others to crawl and index your page by providing a “map” of your website. You can submit your XML sitemap in webmaster tools to be visible for search engines. This way you will have your site’s entire structure be indexed by crawl bots. Submitting your XML sitemap will have its benefits on SEO. 

While on the other hand, we explained that an HTML sitemap page will consist of a hyperlinked outline of links and URLs that will help the user navigate through your site’s page much easier and with much more efficiency. So to differentiate, an XML sitemap is designed for search engines, while an HTML sitemap is created for users. 

Now that we’ve made the difference between XML and HTML sitemaps clear, it’s time we move onto the tutorial on how to create an HTML sitemap page in WordPress using the help of a plugin. In the latter sections of this article, we will also be providing a list of some other alternative plugins aimed to help you create HTML sitemaps with utmost ease and flexibility. Read on.

How to add an HTML sitemap page in WordPress using a plugin?

We’ve already established that creating an HTML sitemap page for your website will be beneficial in terms of search engine optimization and ensure a better user experience for your visitors. Now it’s time we dive into the tutorial on how to create one.  For this article we will be using the All In One SEO plugin, the reason for this selection is that this plugin also powers your SEO plan, and if you are in the search for a great search engine optimization plugin, All In One SEO is a great choice.  You can also opt for other amazing SEO plugins like RankMath, or YoastSEO. The All In One SEO plugin which we will be referring to as AIOSEO from now on is a highly popular WordPress plugin that has a large share of a growing audience due to its robust features included.  For the purpose of this article, we will be using the free version of the plugin, but AIOSEO comes with an upgraded plan as well that provides all the more bountiful advanced features like smart sitemaps, SEO schema, and more. To get started you will need to install and activate the plugin from the WordPress dashboard.  Once the plugin is activated you will be presented with a setup wizard that will provide you the main set of configurations and guide you through the settings to set up your SEO plan right from the start. Go ahead and click on the Let’s Get Started” button and make sure to follow all the steps.
All In One SEO Plugin wizard

There you can choose the category of your website, the homepage title as well as the homepage meta description. The wizard is made up of several steps. Go through each of them and configure the main settings. Once you’ve finished the set up you’ll be redirected to the WordPress Dashboard. Click on All in One SEO > Sitemaps. Here you will find located all the configurations regarding sitemaps. Before we continue make sure you have the Enable Sitemap option ON. 

Enable Sitemaps with plugin in WordPress

Next, click on the HTML Sitemap tab and here you will be able to select how your HTML sitemap page will be displayed as. We will select on Dedicated Page. On the Display the sitemap on a dedicated page file type in the URL of your website / the slug of the URL sitemap page. The plugin will automatically create a new HTML sitemap page. 

Creat an HTML Sitemap page in WordPress

After you’ve created your HTML sitemap page in WordPress, scroll down to find the HTML Sitemap Settings section. Here you will have to tweak a few configurations as well to get the best results out of the plugin. Here you can choose if you want to include all posts or specify the ones you wish to include. 

The same is applied for taxonomies as well, if you do not wish to include all the taxonomies ( categories, tags ) you can uncheck the setting and then manually select the taxonomies you want to include. You can sort the order of the links and pages included, choose whether or not you wish the publication date to be displayed, or compact date archive sitemap. For more detailed configuration, click to expand the Advanced Settings

Creat an HTML Sitemap page in WordPress

Once you are done with all the configuration click on Save Changes and your HTML sitemap page will be live on your WordPress website. Your visitors will be able to visit the sitemap and navigate through pages with ease. Type in the URL you just created for the HTML sitemap and you’ll have an HTML version of every page on your website (unless you’ve specified targetted pages to be displayed only). They will be categorized based on their taxonomy. The design will be set to a default aesthetic based on the style of your active theme. 

Second Method: How to Create an HTML sitemap with WP Sitemap Page?

Besides the AIOSEO plugin, you can also get the same extraordinary results if you use the WP Sitemap Page plugin, a dedicated plugin to help you create HTML sitemap pages in WordPress in a few simple steps. It’s as simple as adding a shortcode to the page you wish to include the HTML sitemap to. Just make sure to follow these simple instructions and you’ll be good to go.  Step One: From the WP Dashboard > Plugins > Add New, search for the WP Sitemap Page plugin. Click on the Install button, and once the plugin is installed click on the Activate plugin. The WP Sitemap was activated and runs on the background of your WordPress website.  Step 2: From the WP Dashboard, click on Pages > Add New. Name your page, it can be something like HTML Sitemap, and using the Gutenberg blocks, click on the plus sign and search for the Shortcode block. Click on it to be integrated into the page.
SHortcodes Creat an HTML Sitemap page in WordPress 1

Step 3: Using the shortcode block, make sure you insert this code [wp_sitemap_page], click on the Publish button at the top right corner of the page for the changes to be applied and your page will be live. 

Publish the HTML Sitemap Page in WordPress 1

Preview the page on another tab. And you will be able to see the HTML sitemap structure there. Included are all the pages and links you have active on your WordPress website. Once again the design is set on a default basis depending on the theme that’s active on your site. 

Final Thoughts

Since we’ve come to an end with this article we hope it was beneficial for you and you’ve taken a few important points on how to create an HTML sitemap page in WordPress. We’ve shared out guide on creating sitemaps taking the high road, the simplest of methods, using a WordPress plugin.  It takes away the stress of adding every single link and page on your website manually and saves you from tweaking your theme’s code, which in case you are not a professional or have at least some basic knowledge, can be fatal for your website. That is why it is always recommended to take backups for your website The main keynotes of this article are that HTML sitemaps will provide a clear path of navigation to your visitors on your website which will improve the user experience. Alongside XML sitemaps, both provide their share of assistance on creating more solid visibility on search engines, to rank higher and become detectable by crawl bots. Use our simple step-by-step tutorial to create an HTML sitemap page in WordPress with ease, all in an intuitive interface utilizing the power of WordPress plugins.

By Snowy Smith

Director of product design, Freehand

Introducing Kaon WordPress Theme