網站架構圖怎麼畫？頁面層級、命名與網址，動工前跟設計公司定案

作者｜瞻新資訊　陳俊鳴顧問（資深SEO顧問・搜尋流量與銷售漏斗規劃）

同樣叫「架構圖」，工程師拿給你看的，是伺服器、資料庫、API 之間怎麼連。設計公司拿給你看的，是首頁、產品、關於我們這些頁面怎麼排。兩張都沒畫錯，只是不是同一張圖。

這篇講的是後面那一張：網站架構圖。

先講答案：網站架構圖是把一個網站有哪些頁面、頁面之間誰在誰下面，畫成一張樹狀圖的規劃文件。 訪客怎麼逛、網址長什麼樣、之後內容往哪裡加，都是它決定的。下面會講它跟幾個名字很像的東西差在哪、怎麼畫、要分幾層、每一頁要寫什麼，還有動工前怎麼跟設計公司把它定下來。

網站架構圖畫的是頁面：有哪些頁、誰在誰下面

把網站想成一棟百貨公司。網站架構圖就是一樓大廳那張樓層簡介：幾樓賣什麼、哪一櫃在哪一區，一眼看完。

它回答三個問題：

• 這個網站總共有哪些頁面
• 哪一頁在哪一頁下面（層級）
• 每一頁是拿來做什麼的

畫出來通常是一棵倒過來的樹。最上面是首頁，往下一層是主選單上的幾個大項，再往下是各大項裡的分類和內頁。所以也有人叫它網站架構樹狀圖、網站階層圖。

要留意的是，它畫的是「頁面之間的關係」，不是「一頁裡面長什麼樣」。網站架構圖上不會有顏色、圖片和版面，只有方塊、名稱和線。 看起來很陽春，可是後面所有的設計和內容，都是照這張圖長出來的。

有一個順序很多人會弄反。研究使用者體驗的機構 Nielsen Norman Group，在一篇談資訊架構與導覽差別的文章裡提醒：網站的分類方式（資訊架構）本身不在畫面上，訪客看到的選單只是它露出來的一小部分。文章還說，只憑外觀先挑好選單樣式，可能反過來逼你改掉原本合理的分類。

白話講：先決定東西怎麼分，再決定選單長什麼樣；不要先挑一個好看的版型，再把內容硬塞進它的選單。

另外，它不是非畫成圖不可。頁面不多的網站，用一份有縮排的清單或一張試算表也行，重點是層級看得出來。

網站架構圖跟系統架構圖、Sitemap、線框圖差在哪

這幾個詞常被混著用，連報價單上都會寫錯。先用一張表分開：

名稱	畫的是什麼	主要給誰看	什麼時候做
網站架構圖	有哪些頁面、誰在誰下面	業主、行銷、設計師	設計動工之前
線框圖（Wireframe）	一個頁面裡放哪些區塊	業主、設計師、工程師	架構圖之後、視覺稿之前
Sitemap（sitemap.xml）	交給搜尋引擎的網址清單檔	搜尋引擎	上線時產生，之後自動更新
系統架構圖	前端、後端、資料庫怎麼串	工程團隊、技術主管	系統設計階段

一句話記：網站架構圖畫的是頁面，系統架構圖畫的是零件，sitemap.xml 是交給搜尋引擎的清單。

回到百貨公司的比喻。網站架構圖是樓層簡介。系統架構圖是機房裡那張水電空調管線圖，客人看不到，整棟樓卻靠它運作。如果你的網站有會員、金流、庫存這類功能，那一張也要有，只是由工程團隊負責。

Sitemap 最容易搞混，因為中文都叫「網站地圖」。Google 的說明文件寫得很清楚：sitemap 是一個檔案，用來提供網站上頁面、影片和其他檔案的資訊。它是給搜尋引擎讀的，不是拿來規劃的。怎麼產生、怎麼提交，Sitemap 是什麼那一篇有完整說明。

還有一種東西也叫 sitemap：網站上的「網站導覽」頁。不少政府機關網站的頁首都有這個連結，點進去是一整頁的連結清單。W3C 的技術文件對它的定義是：提供連結到網站各個區塊的一個網頁。它是做給訪客用的頁面，內容其實就是照網站架構圖列出來的；它算成品的一部分，不算規劃文件。

線框圖則是下一步。架構圖決定「有哪些頁」，線框圖決定「每一頁裡面放什麼」。順序不能反過來：頁面清單還沒定，就開始畫某一頁的版面，畫好的東西很容易整張作廢。

網站架構圖範例：辦公家具公司的官網怎麼分層

光講定義很抽象，直接看一個例子。假設有一家賣辦公家具的公司要做官網，產品有辦公桌、辦公椅、收納櫃三大類，另外提供空間規劃和到府安裝。

它的網站架構圖畫成樹狀圖，是一棵三層的樹；寫成表格，會長這樣：

選單上的名稱	下一層（第 3 層）	網址路徑	這一頁的任務
首頁（第 1 層）	以下六項都是第 2 層	/	讓第一次來的人知道賣什麼、往哪走
產品	辦公桌、辦公椅、收納櫃	/products/	把三大類產品分流出去
規劃服務	空間規劃、到府安裝	/services/	說明能幫客戶做什麼，引導詢問
案例	沒有分類，直接是案例內頁	/cases/	用做過的案子建立信任
知識文章	選購指南、保養方法	/blog/	回答客戶下單前會查的問題
關於我們	無	/about/	交代公司是誰
聯絡我們	無	/contact/	讓人找得到、問得到

第 3 層的網址接在上一層後面，例如辦公椅是 /products/chairs/，空間規劃是 /services/space-planning/。

數一下：首頁 1 個、第 2 層 6 個、第 3 層 7 個，總共 14 個方塊。

再往下還有一層沒畫出來：每一張辦公椅的產品頁、每一個案例、每一篇文章。這些內頁會一直增加，可是長相都一樣，所以架構圖上通常只畫一個方塊，代表「這一類內頁」。

這裡可以算一筆帳。14 個方塊，加上產品內頁、案例內頁、文章內頁，真正要設計的版型大約十種。之後產品從 30 項加到 300 項，方塊和版型都不會變多，變多的只是內頁的數量。

架構圖畫得好，好處就在這裡。網站長大的時候是往既有的分類裡加東西，不用回頭重排選單、重改網址。 反過來，如果一開始只照手上現有的幾樣產品去排，第二年多了一條產品線，主選單就放不下了。

網站架構圖怎麼畫：先列頁面、再分組、最後排層級

畫的順序比工具重要。很多人一開始就打開繪圖軟體拉方塊，拉到一半才發現漏了一堆頁面。比較穩的順序是四步。

第一步：把所有要放的內容列出來

先不管順序，也不管分類，把想放上網站的東西全部寫下來。產品、服務、公司介紹、常見問題、下載檔案、徵才，想到就寫。

像搬家整理書櫃：先把所有的書從箱子裡拿出來攤在地上，才知道總共有多少。

如果是改版，這一步要多做一件事：把舊網站現有的頁面也列出來。哪些要留、哪些要合併、哪些要刪，後面才有依據。

第二步：照訪客找東西的方式分組

把攤在地上的書分堆。這一步最容易出錯的地方，是照公司內部的部門來分。

拿辦公家具公司來說。公司內部可能分成「系統家具事業部」「零售事業部」「工程部」。可是客人腦袋裡沒有這些部門，他想的是「我要買椅子」。分組的依據是訪客會怎麼找，不是公司怎麼編制。

不確定訪客會怎麼分的時候，有個做法叫卡片分類：把每一項內容寫在卡片上，請人照自己覺得合理的方式分堆。Nielsen Norman Group 的卡片分類說明建議，正式的研究至少要找 15 位受測者。中小企業不一定要做到這麼正式，找幾位客戶或不熟你們公司的朋友，拿便利貼分一次，就看得出自己想的分法跟外人差多少。

第三步：排層級

分好堆之後就是上架：決定哪幾堆放在主選單（第 2 層），哪些收在下面（第 3 層）。原則是，客人最常找、跟生意最有關的放上面。

第四步：替每個方塊補上名稱、網址和任務

這一步等於替書櫃的每一格貼上標籤，卻最常被跳過，後面會專門講。

至於工具，用什麼都可以。心智圖軟體、線上白板、簡報軟體，甚至試算表加縮排都行。工具只是把想清楚的東西畫出來，想不清楚的時候，換工具沒有用。

頁面層級要分幾層：三次點擊法則沒有數據支持

頁面層級沒有標準層數。 網路上常看到「任何頁面都要在三次點擊內找到，所以不能超過三層」，也有人說兩層、四層，這些數字都找不到可靠的出處。

Nielsen Norman Group 在〈The 3-Click Rule for Navigation Is False〉裡講得很直接：三次點擊法則是一條沒有數據支持的經驗法則。

這個說法引用的原始研究找得到。Joshua Porter 在 2003 年發表的〈Testing the Three-Click Rule〉，分析了 44 位使用者、620 個任務、8,000 多次點擊。結果是：點擊次數沒辦法預測任務會成功還是失敗，幾乎沒有人在點了三次之後就放棄，有人甚至點到 25 次才結束。研究的結論是，使用者抱怨「要點太多次」，其實是在抱怨找不到東西。

那該看什麼？看每一層的名稱。

客人願意多點一次，前提是他每點一次，都覺得自己離目標更近。回到百貨公司：你要買兒童雨鞋，看到樓層簡介寫「5 樓 童裝玩具」，你會上去；到了 5 樓看到「童鞋區」，你會走過去。走了好幾步，可是每一步都很確定。

反過來，如果樓層簡介寫的是「5 樓 生活提案」，你就卡住了。問題不在樓層多，在名稱看不懂。研究上把這種「看名稱就知道點下去有沒有我要的東西」的線索叫做資訊氣味；同一篇文章對連結名稱的要求是：簡短，而且準確描述那一頁在講什麼，避免行話和自創的品牌用語。

那層數是不是越少越好？也不是。Nielsen Norman Group 比較扁平與深層結構的文章說，其他條件相同時，層級深的網站比較難用；可是把東西全部攤在同一層，選單會又長又亂，使用者一樣吃不消。文章的結論是沒有單一正解，往任何一頭走到底都會出問題。

實務上就是兩頭都不要走到底：

• 第 2 層（主選單）放得下、看得完
• 每往下一層，名稱要比上一層更具體
• 最重要的頁面不要埋太深

畫完怎麼知道分得對不對？有一個業主自己就做得到的檢查，叫樹狀測試。做法是把架構圖改寫成純文字的層級清單，不放任何設計，然後出幾個題目，例如「你想知道辦公椅壞了怎麼保固，會點哪裡」，請不熟你們公司的人指給你看。Nielsen Norman Group 的樹狀測試說明提到，這種測試不需要視覺設計，質性的做法只要少數幾位受測者。文章裡有一句話說得很直接：不檢查，就只是在猜。

檢查一張網站架構圖，與其數它有幾層，不如把每一層的名稱唸一遍，看看聽的人知不知道點下去會看到什麼。

架構圖上每個頁面要寫三樣東西：名稱、網址、任務

多數人畫的網站架構圖，方塊裡只有一個頁面名稱。這樣不夠，每個方塊至少要寫三樣東西。

第一樣：選單上的名稱。 就是訪客實際看到的那幾個字。越短越好，而且要用訪客會講的話。「產品」比「Solutions」好懂，「聯絡我們」比「與我們同行」好懂。

第二樣：網址路徑。 這一頁的網址要長什麼樣。Google 的網址結構建議有幾個重點可以直接照做：

• 用看得懂的字，不要用一長串編號
• 單字之間用連字號（-），不要用底線（_）
• 網址有大小寫之分，統一用小寫比較不會出錯

所以辦公椅那一頁寫成 /products/chairs/，比 /p?id=1024 好。英國政府網站的網址規範也是同一個方向：全部小寫、用連字號分開單字、用完整的字而不是縮寫，目標是好讀、好打、好分享。那是英國政府自己的規定，不是台灣的法規，拿來當命名的參考倒是很實用。

Google 的文件也說可以用受眾的語言寫網址，所以中文網址是可以的。只是中文網址貼到通訊軟體時，常會變成一長串編碼，多數公司網站還是用英文小寫。

第三樣：這一頁的任務。 用一句話寫出這一頁要讓訪客做什麼、知道什麼。寫不出來的頁面，通常就是不需要的頁面。

網站架構圖上的每個頁面，至少要寫清楚選單上的名稱、網址路徑和這一頁的任務。 做到這三樣，這張圖才能直接交給設計師和工程師開工。

有餘力的話，再加第四樣：這一頁的內容由誰提供。這一欄空著的頁面，上線前多半會開天窗。

網站架構圖跟 SEO 的關係：連結走得到、網址看得懂

做 SEO 的人看網站架構圖，主要看三件事，另外有一個要老實講的但書。

第一，每個重要頁面都有連結走得到。 Google 的SEO 入門指南說，Google 主要是透過已經爬過的頁面上的連結，去發現其他頁面。另一份連結的說明文件講得更直接：每一個你在乎的頁面，站內至少要有一個別的頁面連過去。同一份文件也建議，連結上的文字要有描述性、簡潔，而且跟連過去的頁面相關。

對照到架構圖上：每個方塊都要有線連著，線上的名稱要看得懂。架構圖上沒有任何線連到的頁面，上線後就是沒有人走得到、搜尋引擎也不容易發現的孤兒頁。

第二，網址跟著層級走。 /products/chairs/ 這種網址，人看得懂，也看得出它在「產品」底下。

第三，麵包屑有依據。 麵包屑就是頁面上方那一行「首頁 > 產品 > 辦公椅」。Google 的麵包屑說明寫道，麵包屑代表這一頁在網站層級中的位置，而且建議它反映訪客典型的瀏覽路徑，不必照抄網址。換句話說，麵包屑照的就是你的網站架構圖。

順便更新一個常見的舊觀念。很多文章說「網址層級會顯示在搜尋結果上」。Google 在 2025 年 1 月 23 日的公告裡說明，手機版搜尋結果的網址已經簡化成只顯示網域，桌機版才繼續顯示網域加麵包屑。所以麵包屑現在主要是幫已經進站的訪客知道自己在哪，不要期待它在手機搜尋結果上幫你多佔版面。

最後是但書。Google 在同一份入門指南裡說，不用急著把網站整個重排，因為網站目前怎麼組織，搜尋引擎多半都看得懂；網址數量超過幾千個之後，內容怎麼分目錄才比較會影響爬取和索引。

意思是：一般中小企業的網站，不會因為多一層或少一層，排名就差很多。 網站架構圖對 SEO 的幫助很實在，不過它是打地基，不是保證排名的技巧。它真正的價值，是讓訪客找得到東西，也讓網站之後加內容時有地方放。

動工前跟設計公司把網站架構圖定案：先對五件事

這張圖該誰畫？比較順的分工是：業主提供素材和優先順序（哪些產品最重要、客人最常問什麼），設計公司負責分組、排層級、畫出來，再一起修改。

時間點上，第一版越早越好，最好詢價的時候就拿得出來。各家設計公司照同一張圖報價，價格才比得起來。定案則要排在畫線框圖之前。整條流程每一關要交什麼，網站設計流程那一篇有完整的表。

為什麼要在動工前定案？因為網站架構圖一定案，主選單、網址、麵包屑和報價範圍就跟著定了。 之後再動它，這四樣都要跟著改。

簽字之前，跟設計公司對五件事：

1. 每個方塊的內容誰提供、什麼時候交。 圖上有的頁面，就要有人負責寫。
2. 版型有幾種、哪些頁面共用。 前面算過，14 個方塊大約十種版型。設計和製作的工，多半花在版型種類和功能上，頁數反而是其次；各家算法不同，所以要先問清楚，後面加頁面才不會有爭議。
3. 網址路徑一起確認。 不要只確認名稱。
4. 如果是改版，舊網站的每個網址在新圖上要去哪裡。 留下來的、合併的、刪掉的，都要有去處。
5. 之後會長大的地方有沒有留位置。 文章分類、產品類別、外語版本，現在沒有不代表以後不會有。

第四件事值得多講兩句。改版的時候，建議先替舊網站畫一張「現況」的架構圖，再畫新的。新舊兩張網站架構圖放在一起比，哪一頁搬去哪裡一目了然，這份對照就是之後設定轉址的底稿。 Google 的網站搬遷說明也把「舊網址對應到新網址」列為重要步驟，建議用伺服器端的永久轉址，並提到中小型網站多數頁面完成轉移大約要幾週。也就是說，已經上線的網站當然可以改架構，只是要有對照表，也要有心理準備，排名會波動一陣子。

定案之後，這張圖還要有人顧。網站每加一類頁面，圖就要跟著更新。過期的架構圖，比沒有圖更容易誤導人。

如果你正準備新建或改版網站，手上還沒有這張圖，瞻新資訊可以從頁面盤點開始，陪你把網站架構圖畫出來，再往下談設計與開發。

常見問題