Home › Website structure: how to plan pages that match demand
Website site map examples for three kinds of site
A website site map is a planning diagram of a site's pages: the home page at the top, the sections beneath it, and the pages inside each section. Hundreds of searches a month in the US look for examples of website site maps, and for a visual site map. This page shows three finished sample site maps for a website, one for each kind of site, then explains how to read them.
It is part of website structure. The sites below are invented. Each page on them is listed because a need sits behind it.
What a site map diagram shows
A site map diagram answers four questions about a site that does not exist yet, or about one that needs to change.
- Which pages are there?
- Which section does each page sit under?
- How deep is each page?
- Which pages link to which?
It is a planning diagram for people: owners, designers and writers. It is not the file you give to search bots.
Two nearby terms are easy to mix up. Information architecture is the wider job of organizing and labeling a site's content, and an information architecture site map is the picture of that job. A wireframe is a layout sketch of one page. A site map shows many pages and how they relate. A wireframe shows how one page is laid out. A site map wireframe, as people often search it, is a site map with a rough layout note on each box.
Example 1: a local roofing company
One shop, a few towns, and customers who want a job done near them.
`` Home Services Roof repair Roof replacement Roof inspection Storm damage repair Gutters Locations Fairview (shop) Westbrook (service area) Projects Pricing and financing Reviews About Contact ``
How to read it. Services is the largest section because the services are what people search for. Every service has its own page, so no single page tries to answer five needs. Locations holds one page for the shop and one for a town the company drives to. The three pages at the bottom exist to build trust before a call.
Example 2: a software maker selling to clinics
A company that sells appointment software to dental, physiotherapy and veterinary clinics.
`` Home Product Online booking Reminders Reports Solutions For dental clinics For physiotherapy clinics For veterinary clinics Pricing Compare Versus paper schedules Versus spreadsheets Guides Reduce missed appointments Choosing booking software Customers Contact ``
How to read it. The product features are one section, and the audiences are another, because a buyer searches either by what the software does or by what kind of clinic they run. The Compare section catches people who are choosing between options. Guides gather people early in the decision.
Example 3: a small online shop
A shop that sells espresso machines and the things that go with them.
`` Home Espresso machines Manual machines Automatic machines Machines with a built-in grinder Grinders Accessories Guides Choosing a machine Cleaning a machine Shipping and returns About ``
How to read it. The categories mirror how shoppers think: machine, grinder, extras. The guides section sits beside the shop, not inside it. The shipping page is shallow so that a worried buyer finds it in one click.
A visual site map, drawn as boxes
The three examples above are indented lists. A visual site map draws the same plan as boxes. Here is the roofing company again.
`` [ Home ] +-----------+-----------+-----------+----------+ | | | | | [ Services ] [ Locations ] [ Projects ] [ About ] [ Contact ] | | +----+-------+------+-----+ +----------+ | | | | | | Repair Replace Inspect Storm Fairview Westbrook ``
A few drawing conventions keep a diagram readable.
- One box is one page.
- A line joins a page to its parent.
- A dashed line marks a link between two pages that sit in different sections.
- Color shows status: live, to rewrite, to build.
- The top row is the home page, and nothing sits more than three rows down.
Reading a site map for planning
When you review a site map before anything is built, check it box by box.
- Is there a need behind every box? A page nobody searches for needs another reason to exist.
- Does any box try to do two jobs? Split it.
- Is any section too large? A very large box often hides a sub-section.
- Is anything missing that rivals have? A content gap analysis lists those pages.
- Is any page more than three clicks deep? Move it up or link to it from a higher page.
Mistakes in site maps
- Drawing the company's departments instead of the visitor's needs.
- Giving one box to a whole topic that needs five pages.
- Showing a page with no parent, so no one can reach it.
- Planning sections of one page each.
- Drawing the current site and calling it a plan. A plan shows what should exist.
What to do with a site map
Mark every box as live, to rewrite or to build, and every missing page as a gap. Then rank the list: the biggest needs and the biggest gaps first. The content plan turns that ranking into a schedule, and keyword clustering shows how searches are grouped into one box each.
Frequently asked questions
What is a visual site map?
It is a site map drawn as connected boxes instead of an indented list. The content is the same.
How many levels should a site map have?
As few as the content needs. For most small sites that is three: home, section, page.
Is a site map the same as site structure?
No. The structure is how your pages are really arranged. The site map is the diagram of that arrangement, or of the arrangement you plan.
To see how a delivered list ties each page to the searches behind it, open a sample.
Checked by a person and delivered within 24 hours, with a link and a search number behind every row.