How to Create a Visual Sitemap in WordPress
When it comes to boosting the ranking and search engine visibility of your site, adding a sitemap is always a great idea. After all, an XML sitemap helps search engines crawl and index your pages more easily, letting them know of your pages’ existence and thus helping them reach higher ranks with time. But what if you decided to also use a sitemap on your site that will act as a perfect roadmap for your visitors, not just search engines?
This is exactly what you can achieve by creating a so-called visual sitemap to your WordPress site, and in this article, we will show you how to do just that. But first, let’s take a look at some of the benefits of using a visual sitemap, as well as the differences between XML and visual sitemaps.
We will cover:
An HTML, or a visual sitemap is a handy element of your website navigation you can use to help users get around your site more easily and get the idea of your website structure fast. Usually created in an HTML format, it consists of most (if not all) of your page links and is especially useful in cases when users want to find a particular page that is not easily reachable even when they use the main navigation. A visual sitemap can even serve as a good starting spot, or it can act as a point of reference in case they get lost between pages.
Qode Themes: Top Picks
View Collection
The core difference between an XML and a visual sitemap lies in the fact that an XML sitemap is added for search engines so that they can find your pages more easily. By listing different site URLs and metadata related to your pages, an XML sitemap allows Google to crawl and index all your pages in order to make them more visible in SERPs. In turn, this also helps them rank your pages accordingly. Of course, a better site ranking is achieved by using some additional SEO strategies aside from simply adding an XML sitemap.
On the other hand, an HTML-based sitemap is used to help actual humans get a better idea of what they can find when it comes to your pages and posts. This kind of sitemap also lists all the pages as clickable links, but does so in a way that is convenient, user-friendly and visually appealing to humans.
Without a doubt, one of the best things about adding a visual sitemap to your site is the fact that it allows you to showcase the entire website structure to users in a way that is clear, logical and intuitive. Depending on the type of website you have, as well as the number of pages, it can provide a useful visual context to users who have very little time to browse through your site, or have difficulties when exploring websites in general. It can serve as an excellent orientation tool, or a roadmap of sorts – showing them the “road” of your site and all the places they can go to next, all listed in a form of your page links. So, not only does a visual sitemap provide additional context to users, it also helps them save time by allowing them to understand your site structure right from the get-go.
Visual sitemaps are particularly useful for sites that have plenty of content and/or many pages in general, like comprehensive blogs or magazines, huge online stores with many products and product categories, and the like. Still, it wouldn’t be wrong to use a sitemap even if your website does not have that many pages as they can only make it more accessible and user-friendly to your visitors.
For adding a visual sitemap to your WordPress site, we recommend a plugin called Simple Sitemap. It is among the most popular free solutions out there, with over 90,000 installs on wp.org.
This plugin allows you to insert an HTML sitemap on your page or post using blocks (it has two different blocks so far) and lets you see a preview directly in your editor. If you want, you can also use shortcodes to add a sitemap to your page or post. As the name of the plugin suggests, Simple Sitemap is easy to use and allows you to add your sitemap in mere seconds – no coding required whatsoever.
Once you install the plugin and activate it, head to the Simple Sitemap page in your admin dashboard.
Here you will be able to access a few of the sections related to the plugin and its settings.
After you click on the Expand button in the Sitemap Settings section, a dropdown will open, uncovering a few options.
Here you can enable the removal of parent page links. If you want to remove any specific links, you can enter a comma-separated list with parent page IDs. In case you want to remove all parent page links, just mark the box next to the message that says “Remove parent page links?” If not, simply leave this field blank.
You should hit the Save Changes button once you’re done. And in case you change your mind, you can always hit the “Reset plugin options” button and your settings will go back to their default state.
If you expand the Available Blocks field, you will see more info about the two available blocks. The first one is used to insert a standard sitemap, and the second one to display a list of posts that are grouped by taxonomy. Here you will also have access to some usage instructions.
In case you want to get informed about the available shortcodes, you can simply expand the Sitemap Shortcodes section.
Clicking on each shortcode will lead you to the full documentation page related to that specific shortcode.
The same goes for the Shortcode Attributes & Default Values section – once you expand it you will see a list of all available attributes you can include to override the values you want to change.
Once you’re ready to create your sitemap, simply go to the page (or post) you wish to add your sitemap to and search for a block called “Simple Sitemap”. We will be using the Gutenberg editor to show you how to use the plugin’s block to add your sitemap, but don’t worry – you’ll see that this plugin works with other page builders and editors as well.
You will instantly be able to see a list of links in your block as soon as you add it to your page.
Now, to adjust the specific block settings, you can use the Block tab located in your page or post sidebar on the right side of the screen. Here you will be able to select the post types to display (pages and/or posts), order by title, date, ID, etc. Also, you will be able to show (or hide) an excerpt within your sitemap, show a post type label (whether the link in question is a page, post, or another custom post type), enable or disable sitemap links, tabs, and so on.
Of course, if you want you can also use any of the plugin’s shortcodes (available in the Sitemap Shortcodes section) and add your sitemap using the shortcode block instead.
Hit the Publish/Update button once you’re satisfied with the look of your sitemap. Then, you can go ahead and preview the way your sitemap looks live.
In case you want to generate your sitemap using the Classic editor, you simply need to paste the previously copied shortcode (that you can find in the plugin’s settings) within the editor. For Elementor, you need to paste the same shortcode into the Shortcode element.
Conclusion
Visual sitemaps are a handy navigation element you can use to help improve the user experience of your visitors. By allowing them to see a visual hierarchy of all your links and pages in one place, you give them a better insight into your website structure and help them get to all your pages quickly and efficiently. We recommend using a Simple Sitemap plugin to add your sitemap anywhere you want on your WordPress site. The plugin is rather simple to use and allows you to insert blocks or shortcodes to create and add a sitemap to your pages or posts. Just make sure to follow our instructions carefully and you’ll be able to generate an easily accessible and intuitive sitemap for your site visitors in no time.
