網站架構圖規劃全攻略:SEO 友善的網頁結構設計心法與實例解析
網站架構圖是把網站頁面層級、分類關係與導覽動線用樹狀視覺呈現的規劃藍圖,做法是同時操作四條軸線:控制點擊層級深度、設計互斥的分類邏輯、維持語意化一致的 URL 路徑、佈建把首頁權重…
網站架構圖怎麼做:用層級、分類、URL、內部連結同時服務人與爬蟲
網站架構圖是把網站頁面層級、分類關係與導覽動線用樹狀視覺呈現的規劃藍圖,做法是同時操作四條軸線:控制點擊層級深度、設計互斥的分類邏輯、維持語意化一致的 URL 路徑、佈建把首頁權重往下傳的內部連結,讓使用者三點內找到內容、讓搜尋引擎與 AI 平台快速收錄整站。想知道 SEO 友善的網站架構到底長什麼樣,可以先看這篇SEO 友善的網站架構。Google 在 Search Central 官方文件中明確指出,越深層的頁面越不容易被收錄,這也是為什麼形象網站的層級建議壓在兩層內、電商最多到四層的根據。
重點先看:網站架構的成敗有八成取決於使用者看不到的三層東西:點擊深度、URL 一致性、內部連結權重分配。Google Search Central 的官方說明指出越深的頁面越難被收錄,把這三層顧好,內容才長得大、爬蟲才抓得到。
很多教學把網站架構當成「首頁要放哪些區塊」的版面問題,這是抓錯重點。版面只是樹狀圖展開後的視覺結果,真正決定網站能不能被 Google 找到、被 AI 引用的,是使用者根本看不到的工程層:你離首頁點了幾下才到這頁、這頁的網址長什麼樣、這頁被多少內部連結指到。只盯著把樹狀圖畫好看的人,網站越長大越亂,分類半年後失去邏輯,深層頁根本沒被收錄。接下來把這套底層工程拆開,從名詞定義一路講到既有網站怎麼安全重整。
網站架構圖是什麼:決定收錄與動線的底層工程
網站架構圖是用樹狀視覺呈現頁面層級、分類關係與導覽動線的藍圖,在動工前畫,目的是讓使用者三點內找到內容、讓爬蟲與 AI 平台快速理解整站主題。它跟提交給 Google 的 Sitemap 不同:架構圖是給人看、用來跟團隊與客戶溝通的規劃工具,Sitemap 則是提交給搜尋引擎的收錄清單,想知道兩者差異可以參考這篇網站 Sitemap 入門指南。
架構圖其實只回答三件事:網站有哪些頁面、頁面之間誰連誰、從首頁到任一頁要點幾次。把這三件事想清楚,後面所有的版面、選單、網址設計才有依據。反過來說,跳過這一步直接套版的人,多半半年後就會在選單裡塞了一堆沒有邏輯的分類,連自己都找不到某篇文章在哪。
有結構圖跟沒結構圖的差別,會在內容增長那一刻爆發。一開始十幾頁的時候,你隨便排都還算順;等文章累積到兩三百篇、商品到上千件,沒有架構圖當骨架的網站會出現孤兒頁、重複分類、點擊五層才到的深層內容。這些問題不是寫多一點內容能救的,是結構債。所以架構圖要同時服務兩個客戶:真實使用者的動線,以及搜尋引擎與 AI 爬蟲的收錄效率,缺一不可。如果你要往上接到技術性 SEO 的完整框架,可以再看這篇技術性 SEO 與網站架構優化。而把這些頁面串起來的內部連結(Internal Link),正是架構能不能被爬蟲走通的核心機制。
- 架構圖/樹狀圖:規劃藍圖,動工前畫,給人看與溝通。
- Sitemap:提交給搜尋引擎的收錄清單,通常是 XML 格式,產出與提交可參考Sitemap 產生與提交教學。
- Wireframe:單頁的版面草圖,畫的是某一頁裡面有哪些區塊,不是整站關係。
這三樣東西服務的對象完全不同。拿 Sitemap 當架構圖來用,等於拿發票去跟客戶解釋設計。
為什麼網站架構直接影響 SEO 與 AI 引用
網站架構對 SEO 的影響是真的,而且影響的是收錄效率與排名天花板,不是關鍵字密度。層級越淺、內部連結越合理的網站,爬蟲越快抓完全站,重點頁面也越容易繼承首頁權重而被優先排名;AI 引擎引用內容時,同樣依賴清楚的層級與主題聚類來判斷一段內容屬於哪個領域。
先講爬蟲的現實。Google 的爬蟲有抓取預算(crawl budget)與深度上限,一個頁面如果藏在首頁四層、五層以下,常常根本沒被抓到,等於白寫。這不是我的推測,Google Search Central 的官方說明文件就明白指出:離首頁越遠的頁面,被發現與收錄的機率越低。所以把重點轉換頁排在離首頁一到兩層的位置,不是美感問題,是工程問題。想深入了解抓取預算的運作,可以看這篇爬取預算優化策略。
一個殘酷的現實是,絕大多數頁面根本拿不到任何來自 Google 的自然流量。Ahrefs 從其 Content Explorer 資料庫抽取約 140 億個頁面進行分析,發現其中 96.55% 的頁面從 Google 拿不到任何自然流量 [來源:Ahrefs〈96.55% of Content Gets No Traffic From Google. Here's How to Be in the Other 3.45% [New Research for 2023]〉 https://ahrefs.com/blog/search-traffic-study/ 2023-12-01]。會落到這九成六的池子裡,結構問題是主因之一:層級太深、沒有內部連結指到、分類邏輯混亂讓爬蟲判讀不出主題,頁面就等於在 Google 眼裡不存在。這也正是前面講的點擊深度、URL 一致性與內部連結,會直接決定你的內容有沒有機會離開「零流量」那九成六。
再講權重傳遞。內部連結的作用,是把首頁累積的權重一層層往下傳。你希望被找到的那個產品頁、那篇精選文章,如果沒有從分類頁或首頁有清楚的連結指到它,它在 Google 眼裡就等同不存在。這也是為什麼網站內部連結策略要跟架構一起規劃,而不是文章寫完才補,相關做法在這篇網站內部連結策略有展開。想要把權重分配接上一整套排名實戰,可以再看SEO 排名攻略學,把產業分析到落地的流程串起來。
結構混亂還會啟動一個負向循環。使用者進站找不到目標頁,三秒離開,跳出率上升;跳出率這個訊號回頭再壓低排名,排名掉下去流量更少,內容再好也沒人看。跳出率與排名的關係不是玄學,這篇跳出率與 SEO 排名關係有具體說明。而 AI 平台現在引用內容時,會看一個網站的主題聚類清不清楚,架構亂的網站,AI 根本判斷不出你這段話是哪個領域的權威,自然不會引用,這在AI 搜尋時代的 SEO 策略與AEO 答案引擎優化指南都有討論。
還有一個常被忽略的結構事實:Google 從 2020 年開始把全網推向行動優先索引,並已在 2023 年 10 月正式宣告完成,凡是能在行動裝置上運作的網站,一律以行動版爬蟲作為主要收錄來源 [來源:〈Google Search Central Blog — mobile-first is here〉〈https://developers.google.com/search/blog/2023/10/mobile-first-is-here〉〈2023-10-31〉]。這代表選單、內部連結、分類動線在行動版上必須跟桌機版一樣完整。很多網站把行動版選單折疊成漢堡選單後,就漏掉了桌機版第二層才有的分類入口,深層頁在行動版變成孤兒,等於在主要收錄版本裡消失了。再搭配行動裝置已占全球網站流量過半的現況 [來源:〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉],行動版結構的完整度已經跟桌機版同等重要,任何只在桌機出現的導覽入口都算結構缺口。
| 架構狀態 | 對爬蟲的影響 | 對使用者的影響 | 對 AI 引用的影響 |
|---|---|---|---|
| 層級淺、分類互斥 | 抓取快、收錄率高 | 兩三點找到內容 | 主題聚類清楚,易被引用 |
| 層級深、孤立頁多 | 深層頁常沒被收錄 | 找不到就跳出 | 難判斷主題領域 |
| 分類重複、命名混亂 | 重複內容、權重分散 | 分類越看越亂 | 權威訊號被稀釋 |
| 內部連結斷裂 | 權重傳不到深層 | 動線卡住 | 頁面彼此關聯讀不出來 |
架構的每個缺陷,會在同一時間分別在三個對象身上現形,症狀不同,源頭是同一個。
從受眾到樹狀圖,網站架構怎麼一步步排出來
從零規劃網站架構,順序是先定受眾與網站目標,再列出必備頁面清單、排出層級關係畫成樹狀圖,最後用數據持續優化動線。這個順序不能跳,跳過受眾就直接排頁面,幾乎一定會排出一個自己覺得滿意但使用者逛不下去的結構。
第一步:定受眾
在排任何頁面之前,先問網站是做給誰看的。不同族群的瀏覽習慣差很多:找資料的學生習慣搜尋框、年長族群習慣大字選單、採購人員習慣直接看報價與案例。結構要跟著他們的習慣走,不是跟著你自己的美感走。受眾不清楚的時候,用人物誌或 STP 分析先把目標族群框出來,這篇Persona 人物誌建立與STP 行銷定位分析能幫你把這一步做完,整體的數位行銷脈絡也可以對照數位行銷入門建立框架。
第二步:定網站類型與目標
形象、部落格、電商三類網站的必備頁面與分類邏輯完全不同,先選型再排。形象網站的重點是諮詢動線,部落格的重點是文章分類與內部導流,電商的重點是商品分類與結帳。同一套結構套到三種網站上,每一種都會用起來卡。如果你是用 WordPress 架站,選型確定後可以對照這篇WordPress 架站與 SEO 優化把基礎結構先搭起來。
第三步:列頁面清單並畫成樹狀圖
把必備頁面一條條列出來,再以首頁為根,依層級展開分類節點,畫成樹狀圖。視覺化的好處是你一眼就能看到哪些頁面變成孤兒、哪些分類其實重複了。這一步如果用 WordPress,可以先認識WordPress 文章與頁面差異,決定哪些內容用文章、哪些用頁面承載。
- 列出必備頁面:首頁、關於、服務或產品、文章列表、案例、聯絡。
- 決定分類:分類名互斥、不重複、對使用者有意義。
- 排層級:形象網站壓兩層,電商最多四層,任一內容頁離首頁不超過四層。
- 標內部連結:哪些頁要互相指,把權重導到重點轉換頁。
第四步:上線後用數據持續優化
結構不是一次定案,是活的。上線後用 GA4 看實際動線、跳出點,回頭調整選單順序與內部連結。哪一頁的跳出率特別高,多半是動線或內容的問題,不是排版的問題。GA4 的基本操作可以看這篇Google Analytics 完整分析教學,工作階段與行為的解讀在GA4 工作階段與使用者行為。結構之外的內容保鮮也很關鍵,定期的SEO 年度內容更新能避免既有頁面隨時間流失排名。
用一個常見的情境來檢驗這條規則。假設一個原本只做企業形象、層級很淺的網站,在營運第二年決定加入內容部落格、第三年又開了線上購物車,三套截然不同的邏輯全部塞進同一個主選單裡。最直接的後果,是最重要的諮詢表單被擠到選單第四層,使用者要點四下才看得到。用 GA4 的到達路徑去驗證,這類被深埋的轉換頁到達率通常會掉到個位數百分比,這就是沒有重新畫架構圖的代價。結構債不會自己消失,只會隨著功能越加越多而越欠越深。
要避免這種情境,每次新增一種網站功能,就要回頭問三個問題:這個功能跟既有的分類邏輯相容嗎、它的轉換頁要不要往上拉、舊的選單結構還撐不撐得住。把這三個問題當成新增功能的強制檢核表,能擋掉八成以上的結構失控。
層級、分類、URL、Sitemap:不能妥協的四條軸線
規劃網站結構時,有四條不能妥協的軸線:控制點擊層級深度、分類命名清楚不重複、URL 結構一致且語意化、製作並提交 Sitemap。這四項任何一項擺爛,網站都會在內容變多後開始失序、收錄變慢、排名卡住。
技巧一:控制點擊層級深度
形象網站的層級建議控制在兩層內,電商因為分類多可以到四層,但任一內容頁離首頁不宜超過四層。理由前面講過:越深的頁面越難被收錄。一個常見的誤區是,新手想到什麼就加什麼,分類一層疊一層,最後使用者要點五六次才到目標頁,爬蟲也懶得抓。
技巧二:分類命名互斥不重複
分類名要互斥、不重複、對使用者有意義。大型站還要預留擴充空間,避免日後大改。一個判斷方法:同一篇文章或商品如果可以同時被放進兩個分類,就代表你的分類邏輯有重疊,需要重新切。分類重疊會造成關鍵字蠶食,這在關鍵字蠶食與重複內容修復有完整說明。如果你用的是 WordPress,分類排序的方法可以參考WordPress 分類排序教學;要評估分類對應的搜尋需求,也能用Bing 關鍵字搜尋量免費查詢做交叉比對。
技巧三:URL 結構一致且語意化
URL 要用小寫英文、短而有意義、以連字號分隔,路徑要呼應實際層級,方便人與爬蟲判讀主題。例如服務頁的網址用 yourdomain.com/web-design-service/,一看就知道這頁講什麼、屬於哪一層。URL 規則的細節在SEO 網址與 URL 命名規則有展開;如果你用 WordPress,永久連結的設定看WordPress 永久連結與網址結構設定。打好基礎觀念,建議先弄懂網域與網址的差別,後面的路徑設計才不會搞混。
語意化 URL 不只是好讀,還會直接影響點擊率。Backlinko 分析約 400 萬筆 Google 搜尋結果發現,網址包含與關鍵字相近詞彙的頁面,點擊率比網址完全不含關鍵字的頁面高出 45%,這也是為什麼上面會堅持路徑呼應層級、用連字號分隔有意義的單字,而不是丟一串參數 [來源:Backlinko〈Google CTR Stats: We Analyzed 4 Million Google Search Results〉 https://backlinko.com/google-ctr-stats 2025-04-16]。
- 網址要有意義,能看出頁面主題。
- 盡量短、好記,能用單字就不用一串參數。
- 用英文小寫命名,避免大小寫混用造成重複網址。
- 以連字號分隔單字,例如 web-design-service。
技巧四:製作並提交 Sitemap
把所有允許收錄的頁面整理成 XML Sitemap,提交給搜尋引擎,特別能補救那些沒進主選單的深層頁。Sitemap 不能取代好的架構,但它能在架構還沒重整前,先讓深層頁有機會被收錄。提交前先用Google Search Console 完整教學確認收錄狀態,這一步也是技術性 SEO 健檢的基本功,整體的技術設定可以對照WordPress SEO 必做設定。想控制哪些頁面不要被收錄,則要搞懂noindex 指令。
層級、分類、URL、Sitemap 是互相牽動的,不能分開修。層級一深,URL 就會跟著變長;分類一亂,內部連結與權重就跟著散;Sitemap 補得再勤,也救不回點擊五層才到的孤兒頁。所以四條軸線要一起看。如果你是用 WordPress 架站,頁面的建立與編輯可以對照WordPress 頁面建立與編輯,側邊欄與小工具的配置看WordPress 區塊小工具與側邊欄。URL 這條軸線想再往下拆,可以從網址的組成元件看起。
內部連結架構:把首頁權重傳到深層頁的工程
前面四條軸線裡,內部連結是最容易被低估、卻最能決定深層頁生死的一條。層級決定的是「理論上要點幾下才到」,內部連結決定的是「爬蟲與使用者實際走不走得過去」。一個網站就算層級畫得很淺,只要該有的內部連結沒有佈上去,重點頁一樣拿不到權重、一樣等於不存在。
主題聚類與 Hub-and-Spoke 模型
內部連結最有系統的佈法是主題聚類,又稱 Hub-and-Spoke。做法是先選一個足以承載整個主題的支柱頁(pillar page),例如「網站架構」這個主題,再把所有相關的長尾文章當作支點頁,全部從支柱頁往下指、同時彼此之間互相串連。這樣的結構讓爬蟲從支柱頁出發,能在兩三步內走完整個主題群,主題權威也會集中累積在支柱頁上,而不是散落在各篇支點文章。想把這套模型接到關鍵字佈局,可以搭配關鍵字分類與佈局與長尾關鍵字佈局策略。
主題聚類要成立,有三個條件缺一不可:支柱頁的內容深度足以當成入口、每篇支點頁都有一條連回支柱頁的連結、支點頁彼此之間有語意相關的橫向連結。少了第一項,支柱頁撐不起整個主題;少了第二項,權重回不到支柱頁;少了第三項,聚類只是各自獨立的文章,主題訊號聚不起來。
孤立頁偵測與修復
孤立頁(orphan page)指的是站內沒有任何內部連結指向它的頁面,它只能靠 Sitemap 或外部連結被發現,是深層頁收錄失敗的最大來源。檢查的方法是用爬蟲模擬工具從首頁出發走一遍,把走不到的頁面全部列出來。修復的優先順序是:先判斷這頁還有沒有價值,有價值就從所屬分類頁與支柱頁補上一條連結,沒有價值就直接移除或設為 noindex,避免浪費抓取預算。想知道 noindex 的正確用法,可以看noindex 指令;收錄狀態的查證則用網頁收錄查詢與索引確認。
- 支柱頁:承載整個主題的入口頁,所有支點頁都連回它。
- 支點頁:長尾內容頁,從支柱頁往下指,彼此橫向互連。
- 錨點文字:連結的可見文字,要用描述性詞彙而非「點這裡」,幫助爬蟲判讀目標頁主題。
- 連結位置:正文內的連結權重高於頁尾或側邊欄,重點連結要放進正文。
一個判斷連結佈得好不好的快速標準:從首頁出發,任意一篇重點內容能不能在三條連結以內被點到。做得到就過關,做不到就是權重傳遞有斷點。這也是為什麼內部連結要跟架構一起規劃,文章寫完才補的做法通常來不及,相關策略在這篇網站內部連結策略有展開。
網址結構的決策矩陣:扁平、層級、混合該怎麼選
網址該採用扁平結構(所有頁面都掛在根目錄下)、層級結構(按分類一層層往下分)、還是兩者混合,沒有標準答案,要看網站規模與內容性質。底下這個決策矩陣把三種結構的適用情境一次列清楚。
| 網址結構 | 範例 | 最適合 | 主要風險 |
|---|---|---|---|
| 扁平結構 | /about/、/contact/ | 頁面少、主題集中的形象網站 | 頁面一多就失去主題線索 |
| 層級結構 | /blog/seo/url-guide/ | 內容多、分類清楚的文章站或電商 | 層級一深就影響收錄與網址長度 |
| 混合結構 | /services/web-design/、/blog/post-slug/ | 同時有轉換頁與內容頁的綜合站 | 兩套邏輯要清楚區隔,否則互相干擾 |
實務上多數中小型網站適合混合結構:把轉換導向的服務、關於、聯絡頁放在根目錄或淺層,把內容導向的文章放在 /blog/ 或 /resources/ 之下,兩套路徑各自獨立、互不干擾。電商因為分類層級天生較深,會偏向層級結構,但要把商品頁的層級壓在四層內。選定結構之後,全站的網址規則就要一致,避免同一類頁面有的掛分類、有的掛根目錄,造成主題判讀混亂。網址命名的細節規則在SEO 網址與 URL 命名規則有完整展開。
有一個常見的錯誤值得特別提醒:很多網站把分類資料夾開得太細,例如 /blog/2026/06/seo-guide/ 這種把年月日都放進網址的做法。日期資料夾會讓舊文章在讀者眼裡顯得過時,也讓網址無謂變長。除非內容真的是按時間序列消費的(例如每日新聞),否則分類資料夾用主題而不用日期。
部落格、形象、電商三種網站,架構差在哪
不同類型的網站,架構長得完全不一樣。部落格重文章分類與內部導流、形象網站重轉換頁面與諮詢動線、電商重商品分類層級與篩選結帳流程;三者的層級深度與必備頁面差很大,照搬同一套結構會讓網站不符合該類型的使用情境。架構決定的是骨架,骨架上的單頁該長什麼樣,還要回到網頁排版設計範例與響應式網頁設計 RWD來處理。
部落格:分類與內部導流為主
部落格的首頁通常帶最新與熱門文章,主分類下掛子分類,每篇文章配相關推薦與標籤,把讀者留在站內。以知名的雜誌媒體網站為例,主分類如科技底下會再切出半導體、軟體服務等子分類,讀者能依類別快速找到有興趣的內容,每篇文章還有延伸閱讀連結把流量導回站內。這種結構的重點是文章分類層級與內部連結密度,想做長尾流量佈局可以搭配長尾關鍵字佈局策略與關鍵字搜尋意圖分析,選題源頭則從關鍵字研究終極指南開始。
形象網站:轉換動線為主
形象網站以首頁、關於、服務、案例、聯絡為主軸,轉換重點放在聯絡表單與 CTA,層級盡量壓在兩層。一個企業形象網站的標準做法是首頁帶出核心服務,關於頁建立信任,案例頁展示成果,最後用聯絡頁收單。形象網站的價值與常見頁面可以參考企業形象網站的價值,品牌官網的整體設計思路看品牌官網設計全攻略;如果你是要把品牌官網從零搭起來,實戰流程可以對照品牌官網架設實戰。CTA 的設計直接影響諮詢量,做法在CTA 行動呼籲按鈕設計與提升網站詢問與轉換。
電商:分類層級與結帳流程為主
電商網站在女裝、男裝等大類下細分外套、洋裝,再進商品頁,可依尺寸顏色篩選,結帳流程要獨立且流暢。以知名服飾電商為例,女裝、男裝、童裝、嬰兒服飾為第一層,底下再細分外套、洋裝、配件,並有特價與期間限定分類,商品頁還能依尺寸、顏色篩選。這是典型的大型電商架構,分類多但層級控制在四層內。如果用 WooCommerce 架站,購物流程的搭建可以看WooCommerce 購物網站架設,平台比較看電商平台比較與選擇。
一個判斷準則:分類數量與層級深度應該與商品或內容總量成正比。少量內容卻開深層分類,反而會拖累收錄、製造一堆只有一兩篇文章的空分類。內容還沒累積起來的時候,先扁平,等量到了再往下分。如果是內容極少的單一活動或產品,建議改用一頁式網頁設計,把動線壓在同一頁完成,硬開分類反而會拖累收錄。
| 類型 | 主要目標 | 建議層級 | 必備頁面 | 結構重點 |
|---|---|---|---|---|
| 部落格 | 內部導流、停留 | 3 層內 | 分類、標籤、相關推薦 | 文章分類邏輯、內部連結 |
| 形象網站 | 諮詢轉換 | 2 層內 | 關於、服務、案例、聯絡 | CTA 動線、表單 |
| 電商 | 商品查找、結帳 | 4 層內 | 大類、子類、商品頁、結帳 | 分類層級、篩選、結帳流程 |
電商的隱形陷阱:篩選與分頁的重複內容
電商架構最棘手的部分其實是篩選(faceted navigation)與分頁,分類層級通常已經處理得當。當使用者用尺寸、顏色、價格區間去篩選商品時,每種篩選組合都會產生一組新的網址參數,例如 ?color=red&size=m。這些參數組合可以輕易膨脹到數千、數萬個網址,絕大多數內容高度重複,會大量消耗抓取預算,也會稀釋主分類頁的權重。
處理篩選網址有幾種常見做法,要根據篩選組合有沒有搜尋需求來決定:對有穩定搜尋需求的篩選組合(例如「紅色洋裝」這種使用者真的會搜的詞),把它變成可被收錄的靜態分類頁,並寫進 Sitemap;對搜尋需求低、純粹用來輔助瀏覽的篩選組合,用 robots.txt 或參數處理把它排除在收錄之外;對內容只是排序或分頁差異的網址,用 canonical 指向主版本。重複內容的收束方法在Canonical URL 解決重複內容有完整說明,而抓取預算的分配在爬取預算優化策略。把篩選網址管好,電商站的收錄效率會出現明顯改善。
網站架構圖怎麼畫:免費與付費工具選擇
不會設計也能畫出可溝通的網站架構圖。新手用免費的線上白板或向量設計工具就夠了,重點在於先把頁面清單與層級想清楚,工具只是把它視覺化給團隊與客戶看,功能強大與否是次要考量。
市面上常用的幾類工具,各自適合不同情境。向量設計工具適合要同時做 Wireframe 與架構圖、需要多人協作的團隊;線上白板類工具上手最快,適合腦力激盪、快速把分類節點拉出來討論;專門的網站規劃工具能直接產出多層級結構,免費版就夠中小型站使用。具體來說,向量設計工具如 Figma 可以自由拖曳元件、多人即時協作,操作教學看Figma 設計工具完整教學,網格系統看Figma 網格與排版系統。白板類工具如 Miro 操作直覺、有現成模板,適合把分類節點快速拉出來討論。專門規劃工具如 Slickplan 能快速建立多層級頁面結構,免費版就足以應付中小型網站的設計需求。架構落地後想追蹤排名變化,可以挑一套Ranking SEO 工具搭配使用。
選擇的準則很單純:先求能把層級與關係講清楚,再考慮匯出格式與協作需求,不要為了工具而工具。一個常見的浪費是,團隊花一週學一套複雜的設計工具,結果架構圖只畫了三層。如果你的網站結構簡單,白板加一張紙就夠了。要進到單頁的版面草圖,再換到 Wireframe 與原型工具,相關流程可以參考Wireframe 線框圖設計、UI Prototype 原型設計,以及UI 與 UX 設計差異解析。
| 工具類型 | 代表工具 | 最適合 | 上手難度 |
|---|---|---|---|
| 向量設計工具 | Figma | 同時畫架構圖與 Wireframe、多人協作 | 中 |
| 線上白板 | Miro、Whimsical | 腦力激盪、快速拉節點 | 低 |
| 專門規劃工具 | Slickplan | 直接產出多層級結構 | 低 |
決定工具之前,先把你的網站類型想清楚。形象網站結構單純,白板就夠;電商分類多又深,用專門工具產出可匯出的結構會省很多事。如果你是用 WordPress 架站,架構確定後可以直接套到選單設定,相關做法看WordPress 選單與導覽設定。
網站架構常見問題:重整、掉排名、深層頁收錄
網站結構上線後才發現有問題,是可以補救的,但結構大改必須搭配 301 轉址與 Sitemap 重送,否則既有的排名與收錄會在短期內掉一大截。調整前先用 GA4 與 Search Console 找出真正的問題頁,小範圍分批改比一次大翻修安全得多。若是整站搬家或大規模改版,風險又更高,完整流程可以參考SEO 網站搬家與改版。改版期間也要留意頁面體驗分數,Core Web Vitals 指標一旦惡化,收錄與排名都會跟著受牽連。除了 Google,也建議同步安裝Bing Webmaster Tools,從第二個搜尋引擎交叉觀察收錄變化。
改結構之前有三樣東西不能少:完整備份、新舊 URL 對照表、301 轉址計畫。缺一就別動。網站結構大改卻沒做 301 轉址,等於把過去累積的排名與外部連結權重一次清空,這不是慢慢會恢復的小事,是可能半年都爬不回來的大事。301 與 302 的差異與正確用法看這篇301 與 302 轉址完整教學。如果你是從顧客旅程的角度回頭檢視哪些頁面該優先重整,可以先畫一份顧客旅程地圖規劃,把轉換關鍵頁標出來再決定調整順序。動工前也建議先把Google Search Console 安裝與設定完成,才能即時看到收錄與排名變化。
深層頁沒被收錄
深層頁沒收錄,先別急著改網址。先把這些頁面補進 Sitemap、加內部連結、降低層級,再手動請求索引。很多時候問題不是頁面不夠好,而是它根本沒有路被爬蟲走過去。確認收錄狀態用網頁收錄查詢與索引確認,而收錄速度往往也跟頁面載入表現有關,技術體質的檢查可以對照Core Web Vitals 核心指標與網站速度優化技巧。
分類重複或命名混亂
分類重複要合併時,一定要設轉址,避免產生大量 404 與重複內容。兩個分類講的是同一件事,就合併成一個,舊分類的網址 301 指到新分類。重複內容的另一個常見來源是 URL 參數與分頁,這部分用 canonical 來收束,做法在Canonical URL 解決重複內容。子網域與子目錄的選擇也會影響結構與權重,差異在子網域與子目錄的 SEO 差異,www 與 non-www 的設定看www 與 non-www 網址設定。
網址結構要不要一次重排
寧可分批調整、每次觀察排名與收錄變化,也不要賭一次大改。每次改一小段、改完看 Search Console 的收錄數有沒有掉、看 GA4 的流量有沒有異常,確認穩了再動下一段。這個節奏比一次翻修安全十倍。改完之後,結構化資料的標記也要跟著檢查,這在結構化資料 Schema 標記有說明;想長期累積 Google 信任,可以對照EEAT 贏得 Google 信任。如果你同時要把重點頁改造成高轉換的登陸頁,可以參考Landing Page 轉換率優化,搭配關鍵字佈局則看關鍵字分類與佈局。
架構重整前的檢核表
把上面這些零散的動作收斂成一張檢核表,動工前逐條打勾,能擋掉絕大多數的結構事故。
- 完整備份網站檔案與資料庫,並確認備份可還原。
- 列出全站新舊 URL 對照表,標出哪些要改、哪些保持原樣。
- 為每條變更的網址準備好 301 轉址,指向對應的新位置。
- 確認內部連結、選單、麵包屑都更新到新網址,不留舊連結。
- 更新 XML Sitemap 並重新提交到 Search Console 與 Bing Webmaster Tools。
- 更新結構化資料標記,特別是麵包屑與商品 Schema 的網址欄位。
- 設定觀察期,逐週比對收錄數、排名、流量的變化,有異常就回滾。
說到底,架構重整的核心觀念是:動得越少、轉址越齊、觀察越細,越不容易出事。結構是長出來的,不是一次定型的,這點對接手既有網站的行銷人尤其重要。你不用也不該一次把整站翻過來,你要做的是先找到那些點擊太深、沒被收錄、分類重疊的頁面,一個一個修。
架構是工程問題,不是版面問題
回顧一下這套思路。網站架構圖不是用來交差的樹狀圖,是用四條軸線同時服務人與爬蟲的工程:點擊層級深度決定收錄、分類邏輯決定動線、URL 一致性決定主題判讀、內部連結決定權重分配。這四條軸線顧好,網站才長得大、內容才會被找到、AI 才引用得到。面對越來越普及的AI 友善網站與 Agentic Browsing,清楚的架構更是讓 AI 代理能正確走讀整站的基礎,而架構調整後被引用的狀況,可以用Ahrefs Brand Radar追蹤品牌提及與引用的變化。對電商來說,Google UCP 走向 AI 購物的發展,更讓分類清楚的網站有機會被 AI 採購流程直接帶入。
自架的人,動工前先把受眾、網站類型、必備頁面、層級與內部連結想清楚,再選工具把圖畫出來。接案設計師要意識到,這張圖跟客戶溝通的份量比任何視覺稿都重。剛接手既有網站的人,別急著大改,先用 GA4 與 Search Console 把問題頁撈出來,分批修、分批看數據,每一次結構調整都配上 301 轉址與 Sitemap 重送。架構做對了,後面的內容與 SEO 才有地方可以放。而好的架構配上穩定的曝光,還能用SERPO 技巧把排名累積成品牌信任感,這是長期才看得到複利的資產。
想再往上下游延伸,從零架站的完整流程看如何從零架設網站與WordPress 架站新手教學;站內 SEO 的整體優化看站內 SEO 優化攻略與SEO 搜尋引擎優化完整教學;想做答案引擎與生成式搜尋的引用,看GEO 生成式引擎優化與Google AI Overviews 與 SEO。網頁設計的整體入門則可以從網頁設計完整入門指南與網頁版面與 RWD 排版開始。
網站架構圖常見問題
幾個最常被問到的問題,整理在這裡方便快速判斷。
網站架構圖是什麼?跟網站地圖有什麼不同?
架構圖是動工前那張樹狀藍圖,用途是規劃頁面層級跟動線,對象是團隊跟客戶;Sitemap 則是網站上線後才產出、提交給搜尋引擎的收錄清單,對象是爬蟲。一個在規劃階段,一個在營運階段。
網站架構層級要控制在幾層?
形象網站建議兩層內,電商最多四層,任一內容頁離首頁不要超過四層。越深的頁面越難被收錄,這是 Google 官方說明文件就指出的現象。
網站架構對 SEO 真的有影響嗎?
有。架構影響的是收錄效率與排名天花板,不是關鍵字密度。層級淺、分類清楚、內部連結合理的網站,爬蟲抓得快,重點頁也容易繼承首頁權重。
網站結構已經上線了還能改嗎?
能,但大改要配 301 轉址與 Sitemap 重送,否則排名與收錄會短期內掉一大截。先備份、列新舊 URL 對照表,分批小改比一次大翻修安全。
電商跟形象網站的架構差在哪?
形象網站層級壓兩層,重點是諮詢與 CTA 動線;電商因為商品多可以到四層,重點是分類層級、尺寸顏色篩選與獨立流暢的結帳流程。兩者必備頁面與結構重心完全不同。
畫網站架構圖要免費工具還是付費?
新手用免費的線上白板或向量設計工具就夠了。重點是先把頁面清單與層級想清楚,工具只是把它視覺化給團隊看,不需要為了功能強大而選付費方案。
URL 結構要怎麼設計對 SEO 最好?
用小寫英文、短而有意義、以連字號分隔,路徑呼應實際層級。一致且語意化的網址,方便人與爬蟲判讀主題,也降低重複網址的風險;想進一步理解路徑的意義,可以看網址路徑的基本觀念。
網站需要做 Sitemap 嗎?
需要。Sitemap 把所有允許收錄的頁面整理成 XML 提交給搜尋引擎,能補救沒進主選單的深層頁,加快索引。它不能取代好的架構,但能在架構重整前先讓深層頁有機會被收錄。
內部連結為什麼會決定頁面能不能被收錄?
爬蟲主要靠頁面上的連結往下發現新頁面,沒有任何內部連結指向的孤立頁,只能靠 Sitemap 或外部連結被找到,收錄機率明顯較低。把重點頁從支柱頁或分類頁補上連結,是讓深層頁被走通、繼承權重的第一步。
行動版選單跟桌機版不一樣會影響 SEO 嗎?
會。Google 已全面採行動優先索引,行動版是主要收錄來源。如果行動版選單把桌機版第二層的分類入口折疊掉,深層頁在行動版就會變成孤兒,等於在主要收錄版本裡消失。行動版的導覽與內部連結要跟桌機版一樣完整。