Trying to plan how your website should function and what content should be included can be intimidating, so web designers often use sitemap templates and/or examples from others to get their creative process moving.
In this article we’ll provide examples and templates for sitemaps and also breakdown common questions to help you get started.
Free sitemap templates and examples
The following are several examples of sitemaps and free templates. These templates can be downloaded and imported into Slickplan to help get you started. If you don’t already have an account, you can sign up for a 30-day free trial here. Instructions for importing the sitemap can be found here.
Naturally, some business types call for more detail on their website. It is important to think about your goals and the purpose of the website to determine the best layout to meet your objectives.
One page sitemap example
Most websites have multiple pages, but sometimes a one page website is all that’s needed. The website can focus on the most important elements without unnecessary clutter. Learn more about one page websites.
Software as a Service (SaaS) sitemap example
eCommerce sitemap example
Real estate sitemap example
Bank sitemap example
Media sitemap example
University sitemap example
What are sitemaps?
Sitemaps are used by web designers, web visitors, and search engines to plan and/or navigate the content of a website. There are 3 main types of sitemaps: visual, HTML, and XML.
- A visual sitemap is a 2D image or drawing representing the structure of a website. Pages are represented as blocks and cells linked together in a hierarchical organizational chart. Web and UX designers use this type of sitemap to visualize the planned content of a website.
- An HTML sitemap helps to make the website more user-friendly by providing a way to easily navigate a website. It’s a clickable list of all the pages of a website that allows your users to easily find what they are looking for.
- An XML sitemap is like a roadmap of your website that helps search engine crawlers find the important pages. It allows for better indexation of non-HTML content such as images, video, PDFs, audio files, etc. Crawlers from search engines like Google use XML sitemaps to understand the content of a website.
A visual sitemap helps to ensure you create a positive user experience on the website you’re building. With this type of 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 visual sitemap from there.
Visual sitemaps are typically organized as lists or flow chart diagrams. The example below is a flow chart diagram sitemap.
Within a visual sitemap, pages are displayed as boxes or cells and lines are used to demonstrate links between pages. You can see how content will be organized as layers and how a user will navigate from layer to layer.
By building a visual 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.
An HTML sitemap includes every page of the website from main to lower-level, serving as a kind of table of contents. Though not the preferred type of sitemap for search engine crawlers, it can be helpful for visitors navigating the website to easily find what they are looking for.
Whereas a visual sitemap helps web and UX designers in planning a website, an XML sitemap has an entirely different focus. An XML sitemap lists all the pages of a website helping search engines crawl the content of your site. In an XML sitemap each page’s URL and other attributes are shown, allowing the content to be quickly indexed by search engines.
How do I create a sitemap?
How to create a visual sitemap
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 users. 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 users. 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.
Slickplan’s Visual Sitemap Generator, helps web and UX designers quickly put their ideas together, test and revise, and, finally, present their plans visually to others.
How to create an HTML sitemap
If you’re using WordPress for your website, you can take advantage of the many free HTML sitemap plugins featured on the plugin directory. Similar plugins can be found for other popular content management systems.
If your site isn’t using a CMS an HTML sitemap can be created manually by using the HTML list tag (<ol> or <ul>) and nesting the pages of your site within these lists accordingly to show the proper hierarchical structure of pages so users can easily understand how the content is organized.
How to create an XML sitemap
The XML sitemap shows each individual URL (page) and how it is organized within the website. The URLs are coded by formatting each one with XML tags. Including only SEO relevant pages allows search engines to crawl your site more intelligently providing for better indexation. In the example below, the XML sitemap (.xml file) was created using a text editor. While this may look complicated, Screaming Frog offers a free version of their software that can be used to more easily generate an XML sitemap. Another option, if you have a WordPress website, is to enable the XML sitemap feature from the Yoast Plugin.
Once you have generated an XML sitemap, you can submit it to search engines. This can easily be done for Google by use of the Google Search Console, then accessing the “crawl” tab and submitting the XML sitemap in the “Add/Text Sitemap” section.
Use a tool or plugin to generate your sitemap
With the many tools available – Yoast Plugin and Screaming Frog for XML sitemaps and Slickplan Sitemap Generator for visual sitemaps – generating a sitemap is made much easier. While you do have the option of manually creating your XML sitemap, readily available tools help to decrease the margin for human-error.
Do not include ‘noindex’ URLs in your XML sitemap
These are URLs that you do not want search engines to crawl or index. These may be utility pages useful for your website but that you do not need showing up in search results.
Submit your sitemap to search engines
As mentioned earlier, you can submit your XML sitemap directly to search engines. Though search engines can find your URLs without submitting your XML sitemap, submitting it helps to facilitate your pages being crawled and indexed.
The 3 types of sitemaps each plays a role in ensuring that your website meets the needs of both website users and web crawlers, providing better website navigation and increasing the chances that your website is indexed and ranked.