Embarking on a new website build? Creating a visual sitemap is an often-overlooked step that can help you improve client relationships and overall productivity. They’re also super simple to create with the right tools.

In this post, we’ll explain why you would create a visual sitemap and show you some easy tools (from whiteboards to software) that will help you create one.

When planning a new WordPress site build there are some common steps most people take.

First, you might sit down with your client to discover their goals.

Then you’ll probably dive into a discussion about the purpose of their website.

Finally, it’s time to transfer all of this into a plan and work through the possible structure of their site.

Now, although this sounds like a straightforward workflow… what happens if these plans get lost in translation?

Or worse, what if you’re cleaning up a site littered with duplicate content, or that contains a structure that wasn’t well thought out prior to release?

Visual Sitemaps Could Be The Missing Link You’ve Been Looking For

And in this article, we’ll be showing you how easy it is to create a visual sitemap in WordPress – as well as diving into the benefits of sitemaps in general.

But first…

What are Sitemaps?

A sitemap is a list of all the pages that make up a website. They’re often used by a developer, designer, or website owner to plan a new website or rethink an existing web structure.

Visual sitemaps, on the other hand, show the hierarchy of web pages and the relationships between them.

So how do they stack up against your usual kind of sitemap?

Let’s examine the main differences.

The Difference Between a Visual Sitemap and an XML Sitemap

The main difference between a visual sitemap (or site map) and an XML sitemap is that the former is intended for humans and the latter for search engines.

The concept of a sitemap for humans is easy to grasp, as the image below shows.

Sitemap illustration
Use this sitemap to communicate your website plan to clients. (Source: Pixabay)

An XML sitemap for a search engine, on the other hand, informs search engines about pages on your site that are available for crawling.

It does this by listing all the URLs for a site with additional metadata about each URL – such as when it was last updated, how often it usually changes, and how important it is relative to other URLs in the site.

This allows search engines to crawl the site more intelligently and discover pages from links within the site and from other sites.

XML Sitemap
Use an XML Sitemap to help search engines crawl your website and index your web pages.

Note: Smart SEO plugins like SmartCrawl include a built-in XML sitemap generator, so there’s nothing you need to do to generate sitemap files to help search engines crawl and index your content, other than to install and configure the plugin. Learn more about Smart Crawl.

The Benefits of Working With Visual Sitemaps

There are many benefits to working with visual sitemaps. Some of these include:

Show Your Client Their Visual Sitemap

One of the biggest benefits of creating a visual sitemap is that you can communicate website structure to your client quickly, in a visual way that is easy to understand. This helps you kick-start a WordPress project in a simple and logical way.

Create Meaningful Context For Your Client

Depending on the type of clients you have, their day-to-day responsibilities might run far beyond their WordPress sites. Some might not know much about websites at all.

In these cases, you need to find new ways to explain the intricacies of your website development project for someone unfamiliar with WordPress to understand.

Making a visual sitemap creates a meaningful context for your client. Think of it as a reference point that you can build your project from. Sharing a visual sitemap brings a whole new meaning to “Show, don’t tell.”

Offer A Visual Edge To Client Liaisons

For those of us who are visual people, using visual tools makes the collaborative experience a whole lot easier, simpler, and more pleasant.

Even for your clients who have a good grasp of their web structure and have owned WordPress sites for years, a visual sitemap saves time and effort by putting you and your client on the same page from the very beginning. There can be no confusion when you are both looking at the same visual structure.

What’s more, improving client communications by providing a visual sitemap gives you an advantage over competitors.

Use a Visual Sitemap To Clean Up a Site You Inherited

Let’s face it, sometimes you find yourself working on a site that’s a bit of a mess.

This may be no fault of your own, and sometimes it’s not the fault of your client either. Perhaps they inherited the website from a former colleague, just like you took it over from another developer.

If you find yourself responsible for a WordPress site with a lot of heritage and many, many pages of content, it can be difficult to know where to start. That’s where visual sitemaps come in.

Creating a visual sitemap of all the pages on your site helps you see the bigger picture. You might be surprised to find some unnecessary pages that you no longer need or pages that would work better if they were nested or placed in a different section of the site.

Declutter Site In Exchange For Concise, Accurate Information

With a large number of pages to manage, it’s possible that content that is no longer current or relevant, such as discontinued features or services, may still be live and available to web visitors when they should not be.

The visual sitemap brings these pages back to the surface so they can be dealt with appropriately and not simply forgotten about.

Avoid Duplicate Content

Although it’s highly unlikely that you will find identical pages, you may discover duplicated messaging across multiple pages that can be made more concise and combined into a single page.

This makes it easier for web visitors to find the information they need. It also makes it simpler for a website manager to maintain their site and ensure the content is always relevant and accurate, and (importantly for SEO) unique. Everyone wins!

Structure Information With a Visual Sitemap

A well-structured site will help your site visitors navigate their way to the information, products, and resources they require or provoke the call-to-action you want them to take.

Think of it as information architecture. You craft every website for a purpose, and you need to carefully consider how you structure a site, just like you take care of designing, developing, testing, and copywriting.

Improve Usability and Navigation

Use a visual sitemap to craft usable, accessible, and intuitive navigation that allows web visitors to get from one page to another in just a few clicks.

Focus on your web visitor’s journey and expectations, too. It’s important that visitors navigating through your website land on the pages they anticipate. This creates a good user experience, which also brings business benefits.

How are your website’s pages linked together? Are they organized in a manner that’s easy for a user to navigate? How about Google? After all, website structure is important for SEO, too.

Google’s spiders should be able to navigate your site structure. Click-throughs and bounce rates, as well as the time spent on each page, will also impact Google’s algorithms.

Make Your Site SEO-Friendly

Your site’s structure helps a search engine interpret your site. Search engines should be able to crawl through website content to understand what the site is all about and determine which keywords should bring up the WordPress site in search results. Pages that are linked together make it easier for search engines to do this.

Creating a visual sitemap that includes both page hierarchy and internal links will give you a much better idea of how crawlable your site is.

How To Create a Visual Sitemap

There are a variety of options for creating a visual sitemap, including online and offline:

Use Sticky Notes

One way to create a visual sitemap is to use sticky notes on a wall.

Label each sticky note with the name of a page or section of your site, add brief descriptions and any notes you or client raises during the process, and organize these in a hierarchical structure on a wall to create the layout of the site (tip: use different colors to separate sections of the site or indicate nested pages).

Just remember to take photos of the end result before the cleaners come around so you don’t lose your work.

People looking at a wall of sticky notes
Give your clients the most fun they’ve ever had and create a visual sitemap using sticky notes!

Use Pen or Pencil & Paper

Many great ideas were borne from simple sketches made on the back of a napkin.

Using a pen or pencil and paper is a straightforward way of creating a visual sitemap and allows you to work with your clients anywhere: a coffee shop, bar, park bench, or even the back of your limousine.

Planning a website using a pencil and a notepad
Drawing a visual sitemap using pencil and paper is great … until the client changes their mind about their page layout!

Use A Board

Most offices have whiteboards. You can create visual sitemaps on plain whiteboards, an interactive whiteboard, even an old-fashioned chalkboard if your client happens to be a school or learning institution.

Illustration of a whiteboard presentation.
A whiteboard is a great tool for planning websites and creating sitemaps.

Use Online Tools

A visual sitemap tool like GlooMaps lets you easily visualize and document sitemaps on the fly.

Combining visual thinking with built-in tools like map views and downloads, this offers clients a nice looking site map that’s easy to adjust as necessary.

GlooMaps sitemap image.
GlooMaps makes it easy to organize and arrange a sitemap — for free!

This sitemap builder works as a nice solution because you can rearrange as needed, change colors, and adjust the text. It can make adjusting for your client quick and easy.

Use a Plugin

There’s a plugin for practically everything, and sitemaps are no exception.

For example, the WP Visual Sitemap plugin.

WP Visual Sitemap download.
The WP Visual Sitemap might do the trick for your visual sitemap needs.

This plugin can add a visual sitemap of your site’s menu, or pages, to any page of your WordPress site. You can even add icons and select from numerous colors.

This plugin is free to use and has a solid 5-star review.

Don’t Overlook Visual Sitemaps During Your Next Site Build

Hopefully, this article has given you a better understanding of sitemaps and why they’re useful.

If you’re up for it, on your next build try using both an XML sitemap (for search engines) and a visual sitemap (for easier visitor navigation).

You’ll seldom go wrong combining both of these crucial “site-mappers.”

Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: Jan 2020 / Revised: March 2022]

What’s your experience with using sitemaps? Do you have any additional recommended tools? Let us know in the comments!

Tags: