We’ve planned, designed and built more than 1000 websites since 2001. On those projects, we’ve developed our own best practices for creating sitemaps.
Here you can see some of the thinking that informs the process. Here’s how to make a sitemap for a high-performing website…
There are actually three kinds of sitemaps with three completely different functions.
The first two are easy. They are usually created automatically through a bit of programming.
The last one is hard. To do it well, you need to consider many factors at the same time: keywords, usability, and visitor psychology. Information architecture is a skill.
First, the format. Most website planners use a flowchart layout for creating sitemaps. But outlines are a great way to capture ideas and structure quickly. And some people love mindmaps.
In this guide, we’re going to use a flowchart.
Whiteboards and sticky notes are nice for brainstorming meetings, but you’ll need a sitemap tool eventually. The most popular are Slickplan, Lucidchart and Miro.
Slickplan works well for most projects, but Lucidchart and Miro have some incredible collaboration features and integrations. And for more serious diagrams and wireframing, we use Sketch.
Want a free sitemap tool? You can always just use Google Drawings. Feel free to start with our template.
Steal our Google Drawings template →
We’ve put all of our best advice for making visual sitemaps into one chart. This combines the best practices, including keywords for SEO and features for UX.
The sitemap is your first step in building a search-optimized, conversion-optimized website.
You may not need every element every time you create a sitemap, but here are the details for each:
It’s the name of the page. Simple, right? But there’s more to it. The “page name” has several big implications.
If you’re moving quickly and just capturing ideas, don’t overthink it. But in its final form, keep in mind that these page names will likely inform both the navigation menus and page content.
Websites are modular, built from templates. This makes them flexible. Making a new page? Pick a template and drop in your content.
It’s the number of templates (and not the number of pages) that drive the budget for design and programming. Each template has to be set up in the content management system.
The sitemap is an opportunity to specify the template types, so the designers/developers know the size and shape of the project.
The typical website project here at Orbit involves at least seven custom templates, not including the mobile/tablet versions. Here are the 10 most common website templates.
1. Home
Usually a very custom layout with special attention paid to the above-the-fold content (keeping in mind that 73% of homepage visitors don’t scroll). This template often needs to support video and may have custom graphical elements.
2. Key conversion page
This is our term for the pages that need to sell. They’re the product and service pages. The core of the site. Similar to the homepage template, this layout is designed specifically to guide the eyes through a set of prioritized messages (answers and evidence) and includes prominent calls to action.
3. Basic page
Sometimes called the “typical interior page,” this is the most flexible template type. It supports all kinds of page blocks (aka modules) and can contain all different formats for content. For most B2B websites, most pages are within this template.
4. Team main page
The people page. A highly-visual passthrough page designed to help people see the team and jump into a bio. Some websites use it twice, once for leadership and once for staff.
5. Bio detail page
The person page. These often rank for the person’s name. They compete with LinkedIn in search results, so make them good. Include lots of detail and you can use lots of schema tags. This is great for the personal SEO of each team member.
6. Blog main page
The entry into the blog? Actually, it’s more likely visitors enter from search or social and land directly on an article. But still, an important page. It’s like the cover of a magazine. If the email signup CTA is good, it’s a magnet for new subscribers.
7. Article detail page
The template for the articles usually includes the author and sharing buttons. It may also include the date, but you may want to leave this off unless your content strategy involves publishing news.
8. Product category (ecommerce)
It’s the parent to the product pages. Its job is to quickly get the visitor to go deeper into the catalog. They often are feature rich and 100% filled with dynamic content, pulled from the product database. In fact, they often have no body copy at all, making them a missed opportunity for SEO.
9. Product detail page (ecommerce)
The all-important “PDP” (that’s how ecommerce nerds shorten “product detail page”) is the workhorse of every ecommerce website.
Generic templates offered by ecommerce platforms often work well, but nothing beats a custom designed layout, specifically for that product catalog and audience.
10. Contact
The visitor is here because they want to connect (send a message or find your contact info) so reducing friction is the first job of this page.
But if conversion rates are low, adding conversion-focused elements can help. Try adding faces, evidence and answers (how soon will you get back to me?) to help seal the deal. If it works, you’ll see the lift in your funnel visualization report.
Any page with custom functionality is another template. If a page offers more interactivity than basic navigation (as in, the user touches their keyboard) those interactions need to be designed and programmed. That means another template.
A good web design process aligns pages with keyphrases.
A great web design process lets the keyphrase research inform decisions about what pages to include.
The highest performing websites have many pages optimized for many phrases. It starts with this understanding of the basics of search optimization:
Google doesn’t rank websites. It ranks web pages.
With that in mind, here are key principles for aligning pages and phrases.
Here is our guide for keyphrase research. As you pick your target phrases, add them to your sitemap.
The sitemap is also an opportunity to plan content and features. If you know that a page will have a certain feature, function or format for content, document it right on your flowchart.
Here’s a list of common website features and where they are often found on sitemaps.
There are dozens of others, from galleries to calculators, but they are far less common.
Modern web design lines up navigation items in a horizontal row in the header sometimes called a nav bar. When there are too many to fit, they often get broken out into two rows, with the secondary navigation appearing higher and smaller.
Our friends at ABC/Amega are a good example…
When you make a sitemap, you’re planning the navigation. This is the time to consider the grouping of the items and their relative visual prominence. If you have more than six items, start grouping and prioritizing.
The goal of digital marketing is to build a bridge between traffic sources and your thank you page. Getting visitors to this page is the definition of success, at least for B2B lead generation marketing.
This page is the goal, the destination, the purpose of all of your work. So mark it with a star. ⭐
And since this page is the first interaction with your new prospect, make it shine. Here’s how to make a great thank you page.
When you know that a page should guide visitors to another page through a link or call to action (and not just through the navigation) you should show this on the sitemap. Internal linking is important for SEO, not just usability.
Example: if the key service pages are supported by case studies, draw a line connecting them in the sitemap.
This is a good time to plan the footer. Just put these pages in a separate section. Some will be redundant with other pages from the sitemap (the key conversion pages). But other pages will be accessible only from the footer (privacy, employee login links, social icons and the sitemap for visitors)
What else goes at the bottom? Here’s a list of everything you could ever add to a footer.
Some pages are in the navigation, but they’re actually on other websites.
These “off site” pages may be important, even critical to conversions. So let’s add them to the sitemap, but we’ll use a dotted lined box to indicate that they’re third-party tools.
Common examples include:
These are just the opposite. They aren’t in the navigation, but they’re part of the site.
Of course, not every page needs to be in the navigation. ‘Should we make this page?’ and ‘Should this be in the navigation?’ are two completely separate questions.
Lots of important pages don’t appear in the navigation menu. That’s fine as long as they have some other traffic source. Here are common examples
These pages are important, so capture them in a section, separate from the primary and secondary navigation sections.
A “global element” is something that appears on every page, like the company logo and the main navigation. When an interactive feature is global, it can be documented in the sitemap.
Here are the three most common global features on marketing websites:
No need to write these in every box. Just list them at the bottom.
Research keyphrases and you’ll find a ton of information-intent queries. These aren’t ideal for service pages, but they’re great for blog posts. Rather than scrolling right past them, capture them on the sitemap.
Add to this list any blog topics that are most relevant to sales. These posts answer the questions that prospects ask and can link directly to service pages. If you think of any topics that are priorities for the content pipeline, add them to the sitemap.
That sounds like a contradiction, I know.
The sitemap is critical because the navigation labels and the flow of pages determine how people move through the site. Can they tell what you do at a glance? Is everything easy to access? A mistake can add friction, confusion and back button activity.
The sitemap is low-stakes because decisions can be changed very easily. You can always log into your content management system and change the navigation labels, move things around, add and remove pages. Digital ink is never dry.
The sitemap is a powerful planning tool, but it should be approved when confidence reaches 90%. It doesn’t have to be perfect. It’s probably not worth spending an extra week to continue to polish it.
But take time to enjoy the process. It’s fun. Information architecture combines SEO and UX, content and design.
This is one of those deliverables that true digital strategists love. ❤
By signing up you agree to our Privacy Policy.
I just recently entered this career and getting tips from you was simple and very straightforward. I also shared this with my friends who plan to build their website. All the best!
Thanks for the great tips! So many people don’t have a clue where to put their keywords, even if they do bother to do their keyword research.
Brilliant recommendation on sitemaps. I always assumed there was one, let alone three!
Never a bad idea! But something tells me that Google will find it anyway. Even if you never submit it, GSC will still show errors if it finds them.
…and this article was really about the website planning kind of sitemap. Maybe we should write another one about the sitemap.xml files. It’s another fun topic…
And don’t forget to submit your Sitemaps to Google Search Console and Bing Webmaster Tools to help their bots crawl your site and better index your site in Search Engines 🙂
“Digital ink is never dry.”
Truer words have never been said. Thank you for sharing this helpful and insightful information!