What is a Sitemap?
A sitemap is a visual display of the content on a website — including videos, images, files, and pages. Sitemaps are used by web designers, web visitors, and search engines to plan and/or navigate the content of a website.
Ben Duke from We Have Zeal agency confirms there are 3 general types of sitemaps: Visual sitemaps used by web designers and developers, HTML sitemaps used by site visitors (like this sitemap from Supercuts.com), and XML sitemaps used by web crawlers.
If you’re a web or UX designer, you use a sitemap to visualize the planned content of a website. As a site visitor, you use it to navigate to specific pages. And, lastly, crawlers from search engines like Google use sitemaps to understand the content of a website.
For this article, we are focusing on sitemaps used by web and UX designers. We will briefly describe the purpose and process of building sitemaps, types of website or information architecture, and how your entire team benefits from using sitemaps. Then we will point out a few sitemap template examples for different industries and business types.
The Purpose of Sitemaps
The purpose of a sitemap is to ensure you create a positive user experience on the website you’re building. With a sitemap, you’re able to see and test how a user will interact with your site.
How do you know what your audience wants from your website? Consider the user journey. Our comprehensive guide on site mapping explains that user journey mapping helps you answer questions like:
- What tasks are users trying to complete on your site?
- What people, things, or places may influence how the user acts?
- How is the user feeling about their experience on the website?
- What pain points are users trying to overcome with your site?
- What are users ultimately trying to complete using your site?
Once you have answers to these questions, build your sitemap from there.
A sitemap also helps you ensure you’re planning an SEO-friendly website and content that web crawlers will be able to find.
Steven Van Vessum from ContentKing advises, “Content is often not quickly crawled and indexed, and that’s where sitemaps come in. Sitemaps are a highly efficient way to tell search engines about your new, or updated content”
Sitemaps are typically organized as lists or flow chart diagrams. The example below is a flow chart diagram sitemap.
Within a sitemap, pages are displayed as boxes or cells, and lines are used to demonstrate links between pages. From a sitemap, you can see how content will be organized as layers and how a user would navigate from layer to layer.
By building a sitemap, you’re able to test out user scenarios, get feedback, and come up with the best solution before any web development begins. Then, once a structure is decided upon, the sitemap can be used by the web developer as a visual guide for how the website should function.
Site Mapping for Website Architecture
There are two major ways to organize a website: Flat site architecture or hierarchy and deep site hierarchy, otherwise known as silo architecture. Flat site architecture has fewer layers under the subpages, where silo architecture has fewer subpages but many layers under each.
What you decide to use depends on the information you need to share with your website visitors. For instance, a software company would likely use silo architecture because somewhere on their website would be a product tour that would need to dive deep into its features.
On the other hand, a website for an event would most likely be structured as a flat site because beyond the homepage, you’d only need subpages for location, agenda, registration, and so on.
The key to creating the right website structure is understanding what content is valuable to your visitors. Based on that, how can you best organize the content for the visitor to navigate? Organizing your web pages in hierarchical parent / child relationships using sitemap planning helps website visitors navigate your website.
When designing your sitemap, it can be helpful to use this 6-step methodology as a guide:
- Before You Build – Define your website’s goals and designate a sitemap team who will be responsible for the design
- Plan Navigation – Plan your main navigation that will live directly beneath your homepage as the second level
- Define Parent Pages – Consider how you want to organize your content so that it makes sense to users and is easy to navigate
- Expand Child Pages – Add more in-depth, related content under your parent pages to provide more value to readers
- Test Scenarios – Put your sitemap to the test by testing ways your visitors might navigate your site, and try grouping content in different ways to find the best solution
- Include Page Contents, Page Types and Notes – Add more detail on what the pages will include, what type of pages they will be, and any notes a developer may need
Dive deeper into these steps for designing a sitemap.
Once your sitemap is built, put it to the test! Have your team review it and point out any potential issues or alternatives they might suggest. Take it a step further and have people who would actually use your site take a look at the sitemap. As potential visitors, they might identify questions or content that you may have glossed over.
If you’re not sure where to get started on building a sitemap, we’ve provided several examples below as inspiration. Many were built with Slickplan’s Visual Sitemap Generator, which helps web and UX designers quickly put their ideas together, test and revise, and, finally, present their plans visually to others.
Using Sitemaps with Your Team
Everyone on your team benefits when you use a sitemap to plan out your website. Like we’ve mentioned, web developers use it as a guide when actually building out the site in HTML and/or a content management system (CMS). But your marketing and content teams can use it as well to identify what content needs to be written for your site and keep it all organized in anticipation of placing it on the website.
Your SEO team likely helped during the sitemap planning, but they can continue to use the sitemap to help your content team write, as well as plan future content. David from CPD Online College tells us that they’ll also use the sitemap to begin keyword research and decide what the pages would actually be titled and identify potential gaps, as well.
If you have a project manager working on the website, the sitemap provides a go-to visual guide for everyone to easily understand the website’s structure. Further, if you have a marketing research team, they can use the sitemap to test out scenarios for your target audience.
Overall, providing a sitemap to everyone involved ensures that you work efficiently. With a sitemap, you don’t have to put in a ton of development or design resources to visually present the goal and layout of a website. Using it, you can get everyone on board and THEN begin design and development work.
Free Sitemap Templates
Trying to plan how your website should function and what content it should include can be intimidating, so web designers often use sitemap templates or examples from others to get their creative process moving.
Below are several examples of sitemaps for different industries and businesses. Naturally, some business types call for more detail on their website, and, for some, it might make sense to have a mobile application.
However, always think back to your goals and what the purpose of the website is. However you can best relay valuable information to your readers is how you should structure your website, regardless of what others do.
One Page Sitemap Example
Software as a Service (SaaS) Sitemap Example
Portfolio Sitemap Example
eCommerce Sitemap Example
Real Estate Sitemap Example
Bank Sitemap Example
Media Sitemap Example
University Sitemap Example
Slickplan for Sitemaps
Quickly and easily visualize the structure of your website while also including important information for web designers and developers to keep everyone on the same page. Attach page notes, page types, images, and comments to the sitemap page cells to keep information organized.
No matter what industry or business you’re in, tools like Slickplan’s Visual Sitemap Generator can help you plan your website’s structure.
Slickplan can be used for the simplest or most complex website structures. Organize your sitemap by sections and subsections to easily maneuver through your plan. Expand and collapse sections to focus in on specific areas as you work. For those large projects, you can edit multiple pages at once using the batch editor. Also, color-code your layers and sections to make it even easier to plan and present to others.
We mentioned using sitemaps with your entire team working on the project. Slickplan makes this easy by providing a “home base” for everyone to easily understand the site structure and content.
Ready to start building your sitemap? Start a 30-day free trial of Slickplan!
Written By Kelsey Rosauer
Kelsey Rosauer is a marketing brand specialist in the health insurance SaaS (software-as-a-service) world. In her day-to-day, she’s planning and creating content, social media strategizing, and designing positive user experiences on the web. With a background in marketing and digital advertising, her passion lies in educating consumers through helpful content.