How to Create a Site Map: Your Guide to Visual Site Maps

Being able to make a site map is a helpful skill while creating a new website or adding new content to an existing website. To learn how to make a site map, read on or jump ahead to one of the following sections:

In this tutorial, we're using Gliffy, an easy-to-use site mapping tool. You can follow along by starting a free trial of Gliffy Online – no credit card required.

What is a Site Map?

A site map is a listing of the pages on your website that search engines use to crawl it. They can be structured differently depending on who is using them or how they're being used, but technical sitemaps are often written in XML or HTML. This makes it easy for search engines or other programs to understand, which is important for SEO.

Other site maps use a different structure to ensure that web designers, writers, and their teammates can easily understand the structure of a website they're working on.

What is a Visual Sitemap?

A visual sitemap is a hierarchical diagram that allows its users to quickly understand a website's structure and navigation — and unlike its technical counterpart, there's no code required. 

When redesigning a website, making a new website, or adding a lot of content to an existing website, it's helpful to make a visual site map to clearly communicate your ideas while collaborating with web developers, project managers, writers, and other teammates.

Making a visual site map can also be a helpful first step while writing the XML listed or technical site map for your website.

Site Map Example

Whether you're planning a new website or documenting what you've built, even a simple site map can come in handy. Take this simple website as an example:

A site map of animalz.co in diagram form would look like this: (The landing page is “Home” and their only category is “About”.)

In a listed format, it would look like this:

Both are effective, but visuals tends to be more easily digestible than words, especially if you have to share your concept with somebody else.

Video Tutorial: How to Make a Site Map

Step-By-Step: How to Make a Site Map

1. Lay Out Your Content Ideas

The first step to making a fully-functional site map is laying out all the content ideas for your website. At this stage, it's okay to do a huge brainstorm and think about all of the things you could ever want to include on your site — you'll have time to refine your ideas later.

In Gliffy, you can drag and drop a rectangle onto the editor page for each piece of content or content category you'd like to include. Then, you can easily reorganize and rearrange them.

With all your ideas on the page, evaluate each from the perspective of your user. How will each piece of content help the user or support your business? Start grouping your ideas into categories and subcategories, removing anything that doesn't support your users as you go.

Also look for places to combine your ideas. If you have two very similar ideas, could they both be supported by one page on your site?

2. Identify the Categories and Subcategories for Your Site

Now it's time to consider what all this content will look like to a new visitor on your site. Using the groups you started to pull together in step 1, identify the primary categories and organize the content under them.

This is also a good time to introduce a key or legend to keep your site map organized. For example, your homepage might be a circle, and each category might be a square.

3. Add Content and Data to the High-Level Structure

Clearly label each category and start adding more data to each item. Adding the URL for your page is a great way to start structuring the technical elements of your site as you go. 

You can also add annotations for details like which pages you intend to use in marketing, which pages will include video content, or which pages will require a form fill for the user to access. 

This is also a good time to build out and define your legend. For example, a different color or dotted lines could indicate content you want to add later.

An example of what a draft sitemap might look like for a product launch.

4. Refine Your Site Map

You should have a pretty serviceable diagram at this point, so it's time to put it to the test. Here are a few exercises that can help ensure you're meeting your goal with this site map.

Make Pretend User Journeys

Take any user profiles you have and ask yourself how these people would navigate the site. Come up with questions customers might have and map out how they'd find the answer to that question. What are the sticking points? Where would they have a hard time knowing what to do? These are spots you might need to reorganize.

Get a Second Opinion

Give your site map to a friend or teammate who's not involved in your project. Ask them to find what pages would have the answers to questions about your project. If they're not sure where to find something, that's your cue to make some changes.

Double-Check the Details

Make sure every piece of information is consistent and clear in your diagram. Are all the page titles bolded? Does every page have a URL that follows best practices for SEO? Are you consistently following your legend? Being consistent throughout your site map makes it easier to read and use.

5. Share the Site Map

Beyond creating an organization plan for your project, having a site map example for what you want to build can help your team collaborate. Share the site map with your web designers, writers, freelancers, and leadership team to give everyone a clear picture of what you're going to make. 

When you use a site map tool like Gliffy, you can share a link directly to your site map through a tool like Slack or Trello, you can embed your diagram in your team's wiki via our Confluence integration, or you can add a diagram to a Jira with our Jira diagram app.

Benefits of Using a Site Mapping Tool

1. Use a Site Map to Plan Content

Laying out all your website pages in advance ensures that you're giving every bit of content consideration before actually putting in the work of building. This step includes research, writing, getting images, overall design, and all the other elements that go into creating a great website.

2. Make a Site Map to Improve UX 

With site maps, you can easily visualize the user journey. Look for dead-ends in your content, opportunities to add links between pages, and make sure there aren't any unexpected next-click experiences. Having a clear site map can also help your writers consider the user experience as they craft pages and add CTA buttons or links.

3. Optimize Your Site for Specific Goals 

One of the most important questions you have to answer when planning a website is what do I want visitors to leave with and how is that helping my business? By laying out what you want to put on your website and how you'll direct users, site maps help you keep your business goals on track.

When to Use a Site Map Generator

The steps above may not work if you're planning a redesign of an oversized site with hundreds of pages, URLs, and paths. Don't sweat it. If this is the case for you, your first step is to use a site map generator to get the bones of your website. There are a variety of tools out there that will be able to process a list of your pages automatically.

Let's take Gliffy's former website, for example. A quick sitemap of our website finds ~490 pages!

A screencap of Gliffy's sitemap reveals pages differentiated by the <url> </url> tag.

But are all these pages necessary? One way to find out is to go through your site map with a fine-toothed comb and remove anything that's irrelevant. Do you have some floating pages hanging around, like an old version of “About Me” from before you published your new one? Hunt these down and remove them, then run your site through a generator again.

In this case, focus the site map you create on heavily utilized categories to understand and visualize your website. For example, Gliffy's website has many pages under our “Blog”. So instead of trying to make an overwhelming sitemap like this:

You might just show this, filling in whatever categories are your heaviest-hitters or tags associated with your blog's content.

When you have a heavy, page-filled site, you may also choose to redesign and map your site one category at a time.

The truth is that site maps can and will become unwieldy and overwhelming if your site is too big. Pruning outdated pages and using categorical organization will help you better manipulate your site's data.

Use a Site Map to Build Websites that Work

Site maps help you build websites that work because they're just that — maps. They provide a blueprint you can build off of and directions for everyone involved in the project.

By taking the time to plan and streamline a site map, you're helping your business build a website that will actually work for users and get you closer to your business objectives. Gliffy offers design tools that are perfect for site map visualization, plus a free trial to get you started today.

Try Online  Try in Confluence