What is a sitemap?

A sitemap is a guide to all of the pages and content types (video, PDF etc.) found on your site. Debately, there are two versions of your sitemap. First, there’s the sitemap you make to help map out the content for a website build. This version of your sitemap acts as a guide for your web developers, content managers and designers to work from. It also helps you understand what content you need to make or repurpose. Think of it as a blueprint for your team to work from.

The second type, a .xml sitemap, is the sitemap you submit via Google Search Console to help with your presence in organic search. This sitemap is what Googlebot crawls to find out what content you have on your site. It helps to index your site and make sure it’s as search-friendly and as accessible as possible. Both are important, but for the purposes of this article I’m going to focus on the former. 

Why a sitemap is needed

There are lots of benefits of creating a user-friendly sitemap:

• It’s one version of the truth for your team to work from
• It acts as a guide for the content to include in your wireframes (low-fi versions of page designs) 
• It gives you a sense of how large a site is, which gives you a rough idea of how long the build might take
• It stops tedious internal questions such as “Is this going in the main nav and the footer?”
• It helps you recognise any content gaps there might be

I see sitemaps as a worry-stopper. Having worked as a Content Manager for years, I always found myself asking what needed to be included on a page, where it was sitting on the site, what else I could link to. Your sitemap answers all of these questions and more. For your developers and designers, there will be a whole other set of questions, specific to their needs. By creating a blueprint for your site you can save yourself, or your project owner, several headaches. Plus, they’re fun to make – or at least I think so.

What to include in your sitemap

To create a sitemap you’ll be so proud of you’ll want to stick it up on your fridge at home (I came very close to doing this after version 3 of ours), you’re going to need the right tools for the job. We’re huge, die-hard fans of Whimsical in our office. To create the version we used to build our site we used the Whimsical Flowchart tool. 

Here’s what to include in your sitemap –

Key/legend 

Make your sitemap easy to understand, no matter the reader. We colour coordinated certain items on our sitemap to make it easier to scan and digest, by the final version we used the following colour combination:

• Green – Main menu item/ Landing page
• Blue – Critical element on page
• Yellow – Landing page
• Red – Sub item of main item
• Purple – Example Content

Top nav/ main menu 

What will your user see when they navigate to your site’s main menu? What options will they be presented with? It’s worth noting here, that while items are listed out in a main nav, they don’t have to appear in the front end (the version of your site the user sees) that way. They can be tucked away behind a burger menu.

Subpages 

What items are your users navigating to from the main nav? Are you going to use a drop down? It’s important to think about how people are going to discover your content and how easy it is for them to find. I created our sitemap with major input from our UX Director, Greg. By having people from different teams build the sitemap you can spot things you might not see otherwise.

Landing page elements 

Once you’ve come up with a skeleton for your site’s pages, it’s important to think about what will be appearing on each page. Think of it like a structure; what are the building blocks we need to make the best version of that page? By breaking it down in this way, it makes the task of writing copy a lot easier. If you hand your sitemap to your content writer, they should be able to see what subheadings and body copy they need to make based on the crucial elements on the page. 

For example, here are some elements you might typically find on the homepage:

• Contact Details
• Splash video/ image
• Social media calls to action
• Service or product calls to action
• Blog feed
• Logos of companies you’ve worked with

By listing these out, you can begin to get a feel for what you are building, whether that be the content you need to write or the plugins you might need. 

Example user click journeys

As mentioned before, it’s helpful to think about how people will come to interact with the content on your site. Often, it won’t be a linear journey and people might stumble across your content through organic search, they might come to it via a link on social media they might end up type the address in manually. Whatever their journey, you need to create your content with an understanding that everyone’s journey is different. 

When tackling this with your team, think about the following questions to help guide your decision making:

• If this were the page our user landed on, is it easy for them to achieve their desired action? e.g. if they land on a service page through organic search, is it easy for them to contact us about starting a project?
• If I wanted to navigate away from this page, what are my options? How do I trace my way back and discover new, relevant content?
• Is the content on the page the most relevant to where my user is in their journey? Do we want to do a “hard sell” here, or offer up DIY content so are user can solve their own problem?

By asking these kinds of questions you can have deeper empathy for your users and get a better understanding of the type of content you should be signposting for them. When we make our sitemaps, we include a couple of click journeys to see how the content is linking up with the rest of the site. We don’t do it for every journey, just a few to demonstrate joined-up thinking. By including this, it’s also a good sense check your content is serving more than one purpose. 

Note: When looking at V.3 of our sitemap below, click journeys are shown as dashed lines between pages.

The process we went through with our sitemap

To help you understand the process we went through with our own sitemap, we wanted to show the three different versions we created. I’ve offered notes on how we developed it each time to see why we felt the final version is the closest to what we set out to achieve. 

V.1 

Why it didn’t do what we needed it to do

• Not enough detail – If we were to hand this to someone else, we couldn’t be confident they would have enough detail to create something
• Content grouping – We didn’t feel this was the best way to explain our services or highlight our strengths 
• No click journeys – it’s not clear how our user was going to travel around the site and discover more content

V.2

Why it didn’t do what we needed it to do

• A bit more detail, but still not enough – People would kind of get a sense of what we were trying to achieve, but still wouldn’t have enough to create something of value
• Services still didn’t feel right – If we’re going to the trouble of rebranding, our services need to be in their best shape, and here they’re a bit misshapen
• Still no click journeys – seriously, did we just not care how people were clicking around?

The final result

To see the final result, take a look at our final version in detail. It was only after several internal discussions, an understanding of what our theme was capable of and the content we needed to make that we arrived at a version we were happy with. Now, we were confident that a content manager, designer or developer could look at V.3 and understand what was being asked of them. 

Why it does work

• Detail, detail, detail – I know what’s on my page and why it’s there
• Content depth – I’ve got a better understanding of how much content I’ll be dealing with and where it’s living
• Click journeys – Finally, someone thought of our user and gave them a path to follow
• Important but boring bits have been included – i.e. legals and Ts and Cs

TL;DR

In summary, these are the crucial elements you need to create a top-notch sitemap:

• Conversation with different teammates; with web developers, content managers and user experience experts in the conversation you can create something more representative of everybody’s needs and expertise 
• An understanding of user journeys across your site; if you don’t take the time to understand why someone is behaving the way they are on your site, you won’t create something they need
• An iterative approach; it’s rare your first try is 100% correct. See it as a process to work through. Improvement not perfection. 
• A tool to help you visualise your map; we heart Whimsical for its ease and shareability 

Want to know what else we nerded out about during our rebrand? 

Take a look at our Masterclass series. We’ve got a whole bunch of posts on tone of voice, user journeys and identity for you to get your teeth into. Enjoy! Make sure to follow us for more helpful stuff.