Sitemap

As explained in Design for Developers

A site map is a structured representation of a website’s pages and their relationships.

A sitemap is a visual map of a website’s structure, showing major landing pages, subpages, hierarchy, and relationships. It supports information architecture, content organization, navigation planning, and communication between design and development. section 5.1.1 section 5.4

Create a sitemap as a useful high-level planning tool:

• Map the major landing pages and the routes to deeper content rather than documenting every page. section 5.1.1
• Show relationships between pages, but do not assume the sitemap must exactly match top-level navigation. section 5.1.1
• Choose a chart or spreadsheet according to the project’s size, documentation needs, and collaboration expectations. section 5.1.1
• Use the structure to inform wireframes and navigation before visual design or development begins. section 5.4

An e-commerce sitemap

For a shop with hundreds of product pages, map the category structure and how users reach products instead of listing every product individually. After launch, a footer sitemap can give users one clear view of the site’s main sections. section 5.1.1

Figure 5.1 An example of how a sitemap may be laid out

Inspect a visual sitemap layout to see how page hierarchy and relationships can be represented at a glance. section 5.1.1

How Design for Developers covers it

How deep it goes

Explains high-level mapping, documentation choices, navigation relationships, and later XML generation, but not detailed implementation.

Examples

Uses hierarchy diagrams, spreadsheets, footer sitemaps, and e-commerce structures that omit individually listed product pages.

What you can do after

Build it from scratch as a chart or spreadsheet that guides page organization and can inform a later XML sitemap.

How it connects

Connects information architecture with content strategy, navigation, wireframing, user research, and search engine optimization.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  WordPress Power Toolkit: Harness AI to build next-level websitesAn XML sitemap is a structured XML file that lists website URLs and related metadata for search-engine discovery and indexing.

Compare how 2 books explain sitemap →

Related concepts

• All in One SEOused by · All in One SEO (AIOSEO) is a WordPress search-engine-optimization plugin that provides site audits, sitemap generation, schema support, and content optimization features.
• main navigation menuconfigures · A main navigation menu is the primary interface control for accessing a website’s top-level sections.
• Google Search Consoleuses · Google Search Console is Google's web service for monitoring search performance, indexing, and technical issues affecting a website's presence in Google Search.
• menucontrasts with · A menu is a user-interface component that presents a group of selectable options, commands, or destinations.
• footer sectionused by · A footer is a region associated with a document or section that contains closing or supplementary content, often positioned at the bottom.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.