Sheet 04Site structure and navigation12-column grid on
Site structure and navigation: one map for people and crawlers
A site’s structure is how its pages relate: which pages sit under which, and how a visitor or a search engine’s crawler gets from one to the next. business.gov.au suggests drawing it as a sitemap before the pages are built, and the W3C’s WCAG 2.2 sets out what makes the navigation through it dependable for people.
General information from business.gov.au, the W3C and Google Search Central. For the standards themselves, check WCAG 2.2 and Google’s link and URL guidance.
Sheet 04Site structure and navigation
Frame 1 · The planDrawing the map first
Step five of business.gov.au’s guide to setting up a business website is to plan its structure: a sitemap showing how the pages relate, including which pages are “children” of higher-level ones. It suggests thinking about the site’s goals, the tasks customers will want to do, the information they need, and grouping related pages so they are easy to find.
The same page lists pages a business site might include: an about page, contact details, descriptions of services, an online shop with a page per product, a blog, reviews and testimonials, frequently asked questions, and terms and conditions. Which of them a site needs depends on the business.
An illustration. Here is the kind of map a small cake shop might draw, with the customer task each page serves. The business is invented to show the shape.
- HomeFind the way in
- CakesSee what is made
- Wedding cakesPlan an order ahead
- Birthday cakesChoose a design
- About the bakeryRead the story
- QuestionsCheck before ordering
- Visit or orderFind the shop, or order
- CakesSee what is made
Link each page from the one above it in the map, so every page can be reached from the home page. Frames 2 and 3 show why that helps both readers.
Frame 2 · PeopleFive ways a visitor finds their way
WCAG 2.2 has several success criteria about orientation. Together they describe navigation a person can rely on.
| What it asks | Why, in the W3C’s words | Criterion |
|---|---|---|
| More than one way to reach a page | People find some ways easier than others. For a three- or four-page site with every page linked from the home page, links to and from the home page may be enough. | 2.4.5 Multiple Ways · AA |
| Menus in the same order on every page | People using screen magnification, and people who use spatial memory, locate repeated content by visual cues and its place on the page. | 3.2.3 Consistent Navigation · AA |
| A way past repeated blocks | People who move through a page in sequence, such as keyboard users, generally have to pass every repeated block on each page. A skip link is one way to meet it. | 2.4.1 Bypass Blocks · A |
| A title on every page | A descriptive title tells people where they are without reading the page, and helps in site maps and search results. | 2.4.2 Page Titled · A |
| Links that say where they go | The purpose of each link can be worked out from its text, or its text and context. | 2.4.4 Link Purpose (In Context) · A |
The W3C’s menus tutorial adds that people with limited attention or short-term memory benefit from clear, distinct menus that show states such as the current page, and that touch screen users need larger targets. Among the techniques it lists are a breadcrumb trail, a site map, and marking the current location in the navigation bar. The breadcrumb at the top of this sheet is one of those.
Frame 3 · Both readersHow the same links serve both readers
The links that help a person find their way are also the ones a search engine follows. Two places show it plainly.
Links to and from the home page. WCAG’s 2.4.5 asks for more than one way to find a page, and the W3C says that for a three- or four-page site with every page linked from the home page, links to and from the home page “may be sufficient”. Those same links are also how Google finds a page: it says it primarily finds pages through links from pages it has already crawled.
Link text. WCAG’s 2.4.4 asks that a link’s purpose can be worked out from its text, or its text and context. Google asks for anchor text that is “descriptive, reasonably concise, and relevant”, and says better anchor text makes it easier for people to move around a site and for Google to understand the page linked to. Google’s own example of anchor text that is too generic is “Click here”.
How to write the page addresses themselves is set out in Google’s URL structure guidance.