How to structure a website: page hierarchy, URL structure, internal linking and flat vs deep sites, with five site-map diagrams for a roofer, restaurant, clinic, law firm and online shop, each derived from a We.Inc template design.
<p class="lead text-xl text-[#3a3a3a] mb-8"> Website structure is how your pages are organised and linked: which page sits under which, what the addresses (URLs) look like, and how visitors and search engines move between them. A good structure means anyone can reach any page in two or three clicks and every page has one clear job. Below are the rules, then five example site maps, each grown from the sections of a <strong>We.Inc template design</strong> (not a customer site). </p>
<h2>The four parts of site structure</h2> <table> <thead><tr><th>Part</th><th>What it means</th><th>Rule of thumb</th></tr></thead> <tbody> <tr><td>Hierarchy</td><td>Which pages are top level and which sit beneath them.</td><td>Five to seven top-level pages in the main menu.</td></tr> <tr><td>URL structure</td><td>The address of each page.</td><td>Short, lowercase, hyphens, and mirroring the hierarchy: /services/roof-repair.</td></tr> <tr><td>Internal links</td><td>Links from one of your pages to another.</td><td>Every page links up to its parent and across to related pages. No page is left with zero links pointing to it.</td></tr> <tr><td>Depth</td><td>How many clicks from the homepage to a page.</td><td>Important pages within three clicks.</td></tr> </tbody> </table>
<h2>Flat vs deep structure</h2> <p>A <strong>flat</strong> site keeps nearly every page one click from the homepage. A <strong>deep</strong> site nests pages in several levels (home, category, subcategory, item).</p> <ul> <li><strong>Flat suits</strong> sites with under about 20 pages: most service businesses, restaurants and portfolios. Easy to navigate, easy for search engines to find everything.</li> <li><strong>Deeper suits</strong> sites with many items of the same kind: shops, listings, large blogs, firms with many practice areas. The middle level (a category page) helps people browse and gives search engines a page that targets the broader term.</li> <li><strong>Avoid</strong> depth for its own sake. A page four or five clicks down with no other links to it may barely be visited.</li> </ul>
<h2>From one page to a site map</h2> <p>Each template below ships as a single long page whose menu links jump to sections. That is a fine start. When a section grows (more services, more menu items, more attorneys) or you want it to rank for its own search, promote it to its own page. The diagrams show that promoted version. Items in [brackets] are placeholders.</p>
<h2>1. Roofing contractor</h2> <p><em>Derived from the Ironpeak Roofing template's sections: services, materials, storm claims, reviews, free inspection.</em></p> <div role="img" aria-label="Site structure diagram for a roofing contractor" style="border:1px solid #d0d0d0;border-radius:10px;padding:12px 16px;margin:12px 0"><ul style="list-style:none;padding-left:0;margin:0"><li style="margin:4px 0"><strong>Home</strong> <code style="font-size:12px">/</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Services</strong> <code style="font-size:12px">/services</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Roof replacement</strong> <code style="font-size:12px">/services/roof-replacement</code></li><li style="margin:4px 0"><strong>Roof repair</strong> <code style="font-size:12px">/services/roof-repair</code></li><li style="margin:4px 0"><strong>Gutters</strong> <code style="font-size:12px">/services/gutters</code></li></ul></li><li style="margin:4px 0"><strong>Storm claims</strong> <code style="font-size:12px">/storm-damage</code></li><li style="margin:4px 0"><strong>Materials</strong> <code style="font-size:12px">/materials</code></li><li style="margin:4px 0"><strong>Reviews</strong> <code style="font-size:12px">/reviews</code></li><li style="margin:4px 0"><strong>Service areas</strong> <code style="font-size:12px">/areas</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>[Town A]</strong> <code style="font-size:12px">/areas/town-a</code></li><li style="margin:4px 0"><strong>[Town B]</strong> <code style="font-size:12px">/areas/town-b</code></li></ul></li><li style="margin:4px 0"><strong>Free inspection</strong> <code style="font-size:12px">/free-inspection</code></li></ul></li></ul></div> <p><strong>Why this shape:</strong> each service gets its own page so it can match its own search ("roof repair [town]"). Service-area pages only earn their place with real local detail (jobs done there, travel times); copies with the town name swapped are thin content. The free inspection page is linked from every page's header. More in <a href="/guides/roofing-seo">roofing SEO</a>.</p>
<h2>2. Restaurant</h2> <p><em>Derived from the Azafran template: the room, the menu, reservations, visit.</em></p> <div role="img" aria-label="Site structure diagram for a restaurant" style="border:1px solid #d0d0d0;border-radius:10px;padding:12px 16px;margin:12px 0"><ul style="list-style:none;padding-left:0;margin:0"><li style="margin:4px 0"><strong>Home</strong> <code style="font-size:12px">/</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Menu</strong> <code style="font-size:12px">/menu</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Dinner</strong> <code style="font-size:12px">/menu/dinner</code></li><li style="margin:4px 0"><strong>Drinks</strong> <code style="font-size:12px">/menu/drinks</code></li></ul></li><li style="margin:4px 0"><strong>The room</strong> <code style="font-size:12px">/about</code></li><li style="margin:4px 0"><strong>Private dining</strong> <code style="font-size:12px">/private-dining</code></li><li style="margin:4px 0"><strong>Reservations</strong> <code style="font-size:12px">/reservations</code></li><li style="margin:4px 0"><strong>Visit</strong> <code style="font-size:12px">/visit</code></li></ul></li></ul></div> <p><strong>Why this shape:</strong> flat. Visitors want the menu, hours and a booking, usually on a phone. Put the menu in HTML text rather than only a PDF so it can be read and found. See <a href="/guides/seo-for-restaurants">SEO for restaurants</a> and <a href="/guides/how-to-build-restaurant-website">how to build a restaurant website</a>.</p>
<h2>3. Medical or dental clinic</h2> <p><em>Derived from the Verdant Family Health template: our care, meet the team, visit us, book.</em></p> <div role="img" aria-label="Site structure diagram for a medical clinic" style="border:1px solid #d0d0d0;border-radius:10px;padding:12px 16px;margin:12px 0"><ul style="list-style:none;padding-left:0;margin:0"><li style="margin:4px 0"><strong>Home</strong> <code style="font-size:12px">/</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Our care</strong> <code style="font-size:12px">/services</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Check-ups</strong> <code style="font-size:12px">/services/check-ups</code></li><li style="margin:4px 0"><strong>Chronic conditions</strong> <code style="font-size:12px">/services/chronic-conditions</code></li><li style="margin:4px 0"><strong>Children</strong> <code style="font-size:12px">/services/children</code></li></ul></li><li style="margin:4px 0"><strong>Meet the team</strong> <code style="font-size:12px">/team</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>[Doctor name]</strong> <code style="font-size:12px">/team/doctor-name</code></li></ul></li><li style="margin:4px 0"><strong>New patients</strong> <code style="font-size:12px">/new-patients</code></li><li style="margin:4px 0"><strong>Visit us</strong> <code style="font-size:12px">/visit</code></li><li style="margin:4px 0"><strong>Book an appointment</strong> <code style="font-size:12px">/book</code></li></ul></li></ul></div> <p><strong>Why this shape:</strong> a separate "New patients" page answers the questions a first-timer has (forms, insurance, what to bring) without cluttering the homepage. Each clinician page links to the services they provide, and each service page links back to who provides it. See <a href="/guides/seo-for-dentists">SEO for dentists</a>.</p>
<h2>4. Law firm</h2> <p><em>Derived from the Sterling & Vance LLP template: practice areas, attorneys, results, contact.</em></p> <div role="img" aria-label="Site structure diagram for a law firm" style="border:1px solid #d0d0d0;border-radius:10px;padding:12px 16px;margin:12px 0"><ul style="list-style:none;padding-left:0;margin:0"><li style="margin:4px 0"><strong>Home</strong> <code style="font-size:12px">/</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Practice areas</strong> <code style="font-size:12px">/practice-areas</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Commercial litigation</strong> <code style="font-size:12px">/practice-areas/commercial-litigation</code></li><li style="margin:4px 0"><strong>Employment</strong> <code style="font-size:12px">/practice-areas/employment</code></li><li style="margin:4px 0"><strong>Real estate</strong> <code style="font-size:12px">/practice-areas/real-estate</code></li></ul></li><li style="margin:4px 0"><strong>Attorneys</strong> <code style="font-size:12px">/attorneys</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>[Partner name]</strong> <code style="font-size:12px">/attorneys/partner-name</code></li></ul></li><li style="margin:4px 0"><strong>Results</strong> <code style="font-size:12px">/results</code></li><li style="margin:4px 0"><strong>Insights</strong> <code style="font-size:12px">/blog</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>[Article]</strong> <code style="font-size:12px">/blog/article-slug</code></li></ul></li><li style="margin:4px 0"><strong>Contact</strong> <code style="font-size:12px">/contact</code></li></ul></li></ul></div> <p><strong>Why this shape:</strong> one of the deeper examples. People search by legal problem, so each practice area is its own page, and each attorney profile links to their areas. An insights section (blog) is optional; only add it if you will publish regularly. See <a href="/guides/seo-for-lawyers">SEO for lawyers</a>.</p>
<h2>5. Online shop</h2> <p><em>Derived from the Cellar & Rowan template: shop, our craft, materials, stockists, cart.</em></p> <div role="img" aria-label="Site structure diagram for an online shop" style="border:1px solid #d0d0d0;border-radius:10px;padding:12px 16px;margin:12px 0"><ul style="list-style:none;padding-left:0;margin:0"><li style="margin:4px 0"><strong>Home</strong> <code style="font-size:12px">/</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Shop</strong> <code style="font-size:12px">/shop</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>Candles</strong> <code style="font-size:12px">/shop/candles</code><ul style="margin:4px 0 4px 10px;padding-left:14px;border-left:2px solid #4F98FB;list-style:none"><li style="margin:4px 0"><strong>[Product]</strong> <code style="font-size:12px">/shop/candles/product-name</code></li></ul></li><li style="margin:4px 0"><strong>Stoneware</strong> <code style="font-size:12px">/shop/stoneware</code></li><li style="margin:4px 0"><strong>Pantry</strong> <code style="font-size:12px">/shop/pantry</code></li></ul></li><li style="margin:4px 0"><strong>Our craft</strong> <code style="font-size:12px">/about</code></li><li style="margin:4px 0"><strong>Stockists</strong> <code style="font-size:12px">/stockists</code></li><li style="margin:4px 0"><strong>Journal</strong> <code style="font-size:12px">/blog</code></li><li style="margin:4px 0"><strong>Shipping & returns</strong> <code style="font-size:12px">/shipping-returns</code></li><li style="margin:4px 0"><strong>Cart</strong> <code style="font-size:12px">/cart</code></li></ul></li></ul></div> <p><strong>Why this shape:</strong> the deepest of the five: home, category, product. Category pages are where browsing and search both happen. Keep each product at one URL even if it appears in two categories, and link policy pages from the footer and checkout. See <a href="/guides/how-to-build-ecommerce-website">how to start an online store</a>.</p>
<h2>URL rules</h2> <ul> <li>Use words people search for: /services/roof-repair, not /page?id=12.</li> <li>Lowercase, hyphens between words, no dates unless the content is truly dated.</li> <li>Do not change URLs that already get visits. If you must, add a 301 redirect from the old address and test it with the <a href="/tools/redirect-checker">redirect checker</a>.</li> <li>One page per topic. Two pages chasing the same search compete with each other.</li> </ul>
<h2>Internal linking checklist</h2> <ol> <li>Main menu: the top-level pages only.</li> <li>Footer: contact details, policies, and secondary pages.</li> <li>In the body text: link services to related services, and to the page where people act (book, quote, buy).</li> <li>Descriptive link text ("roof repair prices") rather than "click here".</li> <li>Breadcrumbs on deeper sites (Home > Shop > Candles).</li> <li>An XML sitemap listing every public page (create one with the <a href="/tools/xml-sitemap-generator">XML sitemap generator</a> and check it with the <a href="/tools/sitemap-checker">sitemap checker</a>).</li> </ol>
<h2>Plan yours in 15 minutes</h2> <ol> <li>Write every page you need on a sticky note or line.</li> <li>Group them under five to seven top-level headings.</li> <li>Write the URL next to each one.</li> <li>Draw an arrow for every link from one page to another; any page with no arrows in needs one.</li> <li>Check no important page is more than three clicks from home.</li> </ol> <p>Then pick a page layout for each type of page from <a href="/guides/website-layout-examples">website layout examples</a>, and check menus against <a href="/guides/website-navigation-examples">navigation examples</a>.</p>
<h2>Building it on We.Inc</h2> <p>Start from a <a href="/templates">template</a> close to your business. The free plan gives up to 3 template sites on a we.inc address (no AI credits, no custom domain). On Starter ($20/month) you can ask the AI builder to add pages, such as "add a page for each service with its own address", and connect your own domain; Pro is $50 and Max $99 a month (<a href="/pricing">pricing</a>). The <a href="/guides/seo-friendly-website-design">SEO-friendly website design</a> guide covers the on-page side.</p>
How a site's pages are organised and linked: the page hierarchy, the URL of each page, and the internal links between them.
Usually flat: a homepage, five to seven top-level pages, and separate pages for each main service, all within two or three clicks.
Flat for small sites; a little deeper (home, category, item) for shops, listings or firms with many services. Keep important pages within three clicks.
Short, lowercase words separated by hyphens that mirror the hierarchy, such as /services/roof-repair. Do not change URLs that already get visits without a 301 redirect.
Yes. Clear hierarchy and internal links help search engines find and understand every page, and let each page target its own search.
No. They are grown from the sections of We.Inc template designs, as examples of structure.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.