網路架站

網頁設計是什麼?做網站前後該弄懂的流程、費用與規範

本篇內容更新/查核

2026年08月05日

  1. 新增:「網頁設計與網站設計,兩個說法各自對應的範圍」完整一節,分三個小節說明:網頁設計偏向單一頁面的視覺與版面呈現、網站設計則涵蓋整個網站的架構規劃與頁面串接,是網頁設計的上位概念;網頁設計與網頁程式設計(開發)分屬設計介面體驗與撰寫程式碼兩種不同專業角色;以及「網頁製作」「網站建置」「架站」幾個常被交替使用的說法各自的語感差異。
  2. 更新:「AI 開始滲入網頁設計的每個環節」一節補上兩項最新進展,開發端程式編輯器新增「代理模式」(agent mode),能讀懂整個專案的程式碼架構、一次改動多個檔案並自主執行測試;建站端的無程式碼平台已能在幾分鐘內一次生成包含多個頁面、版面、配色與初步文案的完整網站草稿,不只是單一頁面模板。
  3. 新增:三種基礎版型一節補上挑選版型的實務判斷方式,留意主要內容區塊占比夠不夠大、側邊欄放的是不是真正對訪客有用的輔助資訊、版型收合到手機版會不會打散變形,並依內容類型給出建議:以敘事為主的服務型網站適合單欄式,需要同時呈現分類與大量文章的知識庫或部落格適合雙欄式。
  4. 更新:免費架站平台範例列出 Wix、Google Sites。Weebly 已宣布在包含台灣的 67 個國家終止服務,網站將於 2026 年 9 月 27 日全面下線,不再適合列為現行的架站選項。
  5. 新增:正式上線前補上用瀏覽器無痕視窗開啟正式網址、確認沒有殘留測試用浮水印或「建置中」提示,並搜尋網站名稱檢查主機商或架站平台預設歡迎頁面有沒有還留在某個網址下的檢查步驟。
  6. 新增:「上線前的驗收,該逐項檢查的項目」完整章節,整合跨裝置實際開啟畫面與 PageSpeed Insights 複驗核心網頁指標,並新增「表單、金流與會員登入的功能測試」「基本 SEO 設定與內容校對」「後台權限交接」三個小節。
  7. 新增:「網站的五項資產,先確認各自的歸屬」完整章節,逐一說明網域註冊人、主機控制台權限、原始設計稿與程式源碼、CMS 後台帳號等級、SSL 憑證歸屬這五項資產各自該在合作之初問清楚的事,並附一張資產交付清單示意圖。
  8. 新增:「網站改版和搬遷,避免流量與排名一併流失」完整章節,說明網址結構調整可能讓舊排名與外部連結權重歸零,因應做法是 301(或 308)永久轉址搭配一對一的新舊網址對應表,對應表可從網站地圖、伺服器紀錄與 Search Console 外部連結報表盤點;把所有舊網址通通轉到新首頁是常見的錯誤做法,會讓權重跟著流失;並說明 301(或 308)永久轉址與 302(或 307)暫時轉址的適用情境差異、Search Console 地址變更工具僅適用於換網域且需先驗證新舊兩個資源、流程會持續運作 180 天,以及沒有用搬遷工具時轉址至少要保留一年;換平台時,頁面內嵌的圖片、影片、JavaScript 與 CSS 檔案網址、網站驗證檔案與多語系 hreflang 標記也要一併重新設定,不然會跟著網址一起斷掉,並附一張 301 轉址流程示意圖。
  9. 新增:「台灣無障礙網頁規範,公部門與教育標案的硬門檻」完整章節,說明 A、A+、AA、AAA 四種標章的檢測基準條數(A 29 條、A+ 35 條、AA 68 條、AAA 90 條)與組合關係、通過 AA 不代表符合 A+、公部門與教育標案通常以 AA 為門檻,以及替代文字、色彩對比、鍵盤操作、表單標籤等常見扣分項目,並附一張四種標章對照圖。
  10. 新增:「AI 搜尋時代,網站要符合的 GEO 要求」完整章節,說明 Google 官方指出 AI Overview 與 AI Mode 用的是跟一般搜尋一樣的排名系統,疊加 RAG(檢索增強生成)與 query fan-out(查詢展開)兩層技術,並說明段落結構要讓 H2、H3 各自對應明確子主題、內容不必刻意拆成碎片、要寫出獨到觀點,以及網站要能被正常爬取索引,這些條件才容易被 AI 摘要引用。
  11. 刪除:「新手做網站,最常見的迷思有哪些?」整節與其下 7 個子節,內容涵蓋架站方式選擇、內容準備時機、手機版排版、免費工具限制、AI 生成網站的認知、上線後維護,以及網站目的與資訊架構。

2026年08月09日

  1. 新增:「網頁設計與網站設計,兩個說法各自對應的範圍」完整一節,分三個小節說明:網頁設計偏向單一頁面的視覺與版面呈現、網站設計則涵蓋整個網站的架構規劃與頁面串接,是網頁設計的上位概念;網頁設計與網頁程式設計(開發)分屬設計介面體驗與撰寫程式碼兩種不同專業角色;以及「網頁製作」「網站建置」「架站」幾個常被交替使用的說法各自的語感差異。
  2. 更新:「AI 開始滲入網頁設計的每個環節」一節補上兩項最新進展,開發端程式編輯器新增「代理模式」(agent mode),能讀懂整個專案的程式碼架構、一次改動多個檔案並自主執行測試;建站端的無程式碼平台已能在幾分鐘內一次生成包含多個頁面、版面、配色與初步文案的完整網站草稿,不只是單一頁面模板。
  3. 新增:三種基礎版型一節補上挑選版型的實務判斷方式,留意主要內容區塊占比夠不夠大、側邊欄放的是不是真正對訪客有用的輔助資訊、版型收合到手機版會不會打散變形,並依內容類型給出建議:以敘事為主的服務型網站適合單欄式,需要同時呈現分類與大量文章的知識庫或部落格適合雙欄式。
  4. 更新:免費架站平台範例列出 Wix、Google Sites。Weebly 已宣布在包含台灣的 67 個國家終止服務,網站將於 2026 年 9 月 27 日全面下線,不再適合列為現行的架站選項。
  5. 新增:正式上線前補上用瀏覽器無痕視窗開啟正式網址、確認沒有殘留測試用浮水印或「建置中」提示,並搜尋網站名稱檢查主機商或架站平台預設歡迎頁面有沒有還留在某個網址下的檢查步驟。
  6. 新增:「上線前的驗收,該逐項檢查的項目」完整章節,整合跨裝置實際開啟畫面與 PageSpeed Insights 複驗核心網頁指標,並新增「表單、金流與會員登入的功能測試」「基本 SEO 設定與內容校對」「後台權限交接」三個小節。
  7. 新增:「網站的五項資產,先確認各自的歸屬」完整章節,逐一說明網域註冊人、主機控制台權限、原始設計稿與程式源碼、CMS 後台帳號等級、SSL 憑證歸屬這五項資產各自該在合作之初問清楚的事,並附一張資產交付清單示意圖。
  8. 新增:「網站改版和搬遷,避免流量與排名一併流失」完整章節,說明網址結構調整可能讓舊排名與外部連結權重歸零,因應做法是 301(或 308)永久轉址搭配一對一的新舊網址對應表,對應表可從網站地圖、伺服器紀錄與 Search Console 外部連結報表盤點;把所有舊網址通通轉到新首頁是常見的錯誤做法,會讓權重跟著流失;並說明 301(或 308)永久轉址與 302(或 307)暫時轉址的適用情境差異、Search Console 地址變更工具僅適用於換網域且需先驗證新舊兩個資源、流程會持續運作 180 天,以及沒有用搬遷工具時轉址至少要保留一年;換平台時,頁面內嵌的圖片、影片、JavaScript 與 CSS 檔案網址、網站驗證檔案與多語系 hreflang 標記也要一併重新設定,不然會跟著網址一起斷掉,並附一張 301 轉址流程示意圖。
  9. 新增:「台灣無障礙網頁規範,公部門與教育標案的硬門檻」完整章節,說明 A、A+、AA、AAA 四種標章的檢測基準條數(A 29 條、A+ 35 條、AA 68 條、AAA 90 條)與組合關係、通過 AA 不代表符合 A+、公部門與教育標案通常以 AA 為門檻,以及替代文字、色彩對比、鍵盤操作、表單標籤等常見扣分項目,並附一張四種標章對照圖。
  10. 新增:「AI 搜尋時代,網站要符合的 GEO 要求」完整章節,說明 Google 官方指出 AI Overview 與 AI Mode 用的是跟一般搜尋一樣的排名系統,疊加 RAG(檢索增強生成)與 query fan-out(查詢展開)兩層技術,並說明段落結構要讓 H2、H3 各自對應明確子主題、內容不必刻意拆成碎片、要寫出獨到觀點,以及網站要能被正常爬取索引,這些條件才容易被 AI 摘要引用。
  11. 刪除:「新手做網站,最常見的迷思有哪些?」整節與其下 7 個子節,內容涵蓋架站方式選擇、內容準備時機、手機版排版、免費工具限制、AI 生成網站的認知、上線後維護,以及網站目的與資訊架構。

第一次要做網站,真正讓多數人猶豫的不是要不要做,而是緊接著冒出來的一連串問題:該選哪種方式架站、預算大概要抓多少、網站背後靠哪些技術運作、內容要怎麼準備,還有整個製作流程會經過哪幾關。這幾題,幾乎是每個第一次接觸網頁設計的人都會問一輪的疑問,少一題沒想清楚,後面往往就得回頭重做。

這幾年連怎麼做網站這件事本身也在變。AI 已經能直接依一句話描述生成整個網站雛形,Google 搜尋結果也有愈來愈多問題被 AI 摘要直接整理成答案,點進網站的機會跟著變少。這些變化多數教學都會提到,但還有幾個更容易被忽略、卻可能事後吃虧的環節:網站做完之後,網域、主機、原始檔這些資產登記在誰名下;舊網站改版或換平台時,會不會把累積多年的排名一併弄丟;如果日後有機會承接公部門或教育機構的案子,無障礙網頁規範會不會變成一道過不了的門檻。這幾件事第一次做網站的人很少會事先想到,卻常常是後來最花時間補救的部分。

網頁設計涵蓋哪些概念、技術怎麼分工、預算與時程要抓多少,加上 AI 建站、GEO(生成式引擎優化)、資產歸屬、改版遷移與無障礙規範這幾個容易被忽略的環節都先搞懂,動手做網站前才不會漏想,做完之後也才顧得到長期經營。

網頁設計是什麼?整合視覺、內容與技術的過程

網頁設計是把視覺、內容與技術整合在一起,讓網站真正被使用者看得懂、讀得下去、也用得順手的過程。它不只是把畫面弄漂亮,還牽涉版面配置、操作流程、資訊層級與程式技術,目標是同時做到好看、好讀、好用這三件事。

網頁設計把視覺、內容與前後端技術三個層面整合,才能同時做到好看、好讀與好用
網頁設計不是只把畫面弄漂亮,視覺、內容、技術三層整合,網站才會被看得懂、讀得下、用得順。

對任何品牌或個人來說,網站都是線上最重要的門面。訪客要在幾秒內判斷這個網站可不可信、找不找得到自己要的資訊,好看的外觀只是第一步,接下來還要讓使用者順利完成填表、瀏覽服務、下單或發出詢問這些動作,少了任何一步,前面的視覺投入都會白費。

「網頁設計」聽起來範圍很明確,但實務上常有人拿它跟「網站設計」混用,兩個詞各自對應的範圍其實不完全一樣,值得先分清楚。

網頁設計與網站設計,兩個說法各自對應的範圍

很多人把「網頁設計」和「網站設計」當成同一件事的兩種說法,講的時候交替著用,不會特別區分。這種混用不是講錯,只是不夠精確,英文的 web design 本身就同時涵蓋單頁視覺與整體架構兩層意思,翻成中文之後也沒有嚴格切分,久而久之兩個詞就被當成同義詞使用。除了這兩個詞,市面上還有幾個常被拿來交替使用的說法,一併弄清楚,之後討論需求時比較不會出現認知落差。

網頁設計偏重單頁呈現,網站設計涵蓋整體架構

實務上把兩者拆開看,範圍其實不一樣。網頁設計比較偏向單一頁面的視覺與版面呈現,關心的是這一頁看起來好不好看、排版順不順,屬於介面層(UI)的工作。網站設計則涵蓋整個網站的架構規劃,包含資訊層級怎麼區分、有哪些頁面要串接、後端功能怎麼安排,是網頁設計的上位概念。一個網站設計專案裡,通常會包含好幾次網頁設計的工作。找人「設計一個頁面」跟「做一個網站」,牽涉的規劃範圍差異不小,前者可能只需要處理一頁的視覺呈現,後者要連同架構規劃、多頁串接一起考慮。

網頁設計與網頁程式設計,分屬不同的專業角色

另一組容易混淆的說法,是網頁設計跟網頁程式設計(開發)。設計負責看得到、摸得到的介面與體驗,包括版面配置、色彩字體、按鈕位置與操作動線;程式設計負責讓這個介面真正動起來,把設計稿轉換成瀏覽器能執行的程式碼,處理表單送出、資料讀寫、會員登入這類實際的功能邏輯。用比較直白的說法,設計決定畫面長什麼樣子、用起來順不順手,開發決定畫面背後的功能能不能真的跑起來。實務上這兩個角色常常是同一個團隊裡的分工,一人畫視覺稿、另一人接手切版與寫程式,規模較小的團隊也可能由同一人身兼兩種角色。市面上不少人習慣用「網頁設計」統稱從畫面到功能的整個製作過程,也有人嚴格區分成設計跟開發兩個階段分開報價。開始討論案子前先確認這次講的「設計」,指的是只到視覺稿為止,還是連同開發一起算,能提前避開報價範圍認知不一致的狀況。

還有幾個容易混用的相近說法

除了上面兩組,「網頁製作」「網站建置」「架站」也是市面上常被交替使用的詞。網頁製作通常指從設計到完成網頁的整個實作過程,強調的是把網頁真正做出來這個動作本身;網站建置語感偏向整體性,從規劃、設計、開發到上線通常都算在內,比較常出現在企業或機構型的專案描述裡;架站則是比較口語、範圍也最鬆散的說法,用免費平台幾分鐘拉出一個網站雛形,跟自己架設一套完整的內容管理系統,都可能被稱作架站。這幾個詞彼此沒有嚴格的界線,遇到時與其糾結名詞本身該怎麼定義,不如直接問清楚這次要包含哪些工作項目,例如含不含後續維護、有沒有包含程式開發,實際內容確認清楚,比爭論用詞更有意義。

這不是在爭學術定義,而是接下來要做網站時,溝通需求會直接用到的實務區分。開始討論需求前先弄清楚自己要的是哪一種,需求範圍談清楚了,報價才會落在同一個基準上,不會出現一方以為只做視覺稿、另一方以為連程式都包在裡面這種落差。

網站由五個核心元素共同組成

一個網站不是只靠畫面撐起來,而是由好幾個環節共同組成,少一塊都會露出破綻。視覺設計與使用者體驗、內容規劃、前後端技術分工、響應式設計,加上載入速度與效能表現,是構成一個網站的幾個基本環節;SEO 與 GEO 同樣是核心的一環,只是牽涉的技術細節與判斷邏輯份量吃重,適合獨立成一個完整主題深入討論。

一個網站由視覺設計、內容規劃、前後端技術、響應式設計、載入速度與 SEO/GEO 六個核心元素組成
網站是由這六個環節共同撐起來的,少了任何一塊都可能露出破綻、留不住訪客。

視覺設計負責好看,使用者體驗負責好用

視覺設計(UI, User Interface)決定網站的第一印象,包括排版、配色、字體、圖示與整體風格,是使用者一進站最先感受到的東西。良好的視覺設計能提升品牌形象,也讓使用者更輕鬆吸收資訊。

但畫面好看只是一半,另一半要靠使用者體驗(UX, User Experience)撐起來。UX 關心的是導覽設計、資訊層級、按鈕位置與操作流程順不順,讓使用者不迷路、不困惑,能順利完成填表、瀏覽或找到需要的內容。UI 與 UX 是分工關係,UI 負責讓網站好看,UX 負責讓網站好用,兩者只顧一邊,網站往往留不住人。畫面漂亮卻找不到聯絡按鈕,或動線清楚卻顯得粗糙沒質感,結果都一樣讓訪客提早離開。

內容規劃是網站真正留住訪客的關鍵

網站真正留住人的,往往不是版面,而是內容本身。內容要清楚、有層次、容易閱讀,還要能回答訪客真正關心的問題,而不是自顧自地講。文案撰寫、圖片搭配、服務介紹與常見問題整理,都屬於內容規劃的範圍,也是整個網站裡最容易被低估、卻最花時間準備的一塊。

前端負責畫面,後端負責看不到的運作邏輯

前端負責使用者看得到、摸得到的部分,包括排版、圖片、顏色、互動效果,以及在不同裝置上的版面調整,讓網站不只好看,還能被操作。後端則負責使用者看不到的運作邏輯,像是表單資料處理、使用者登入驗證、內容管理與資料讀寫,讓網站的功能真的能跑起來。簡單說,使用者看到的是前端,讓功能真正運作的是後端,兩者缺一不可,網站愈複雜,愈依賴後端撐住穩定度。

響應式設計(RWD),手機版不能將就的理由

使用者會透過手機、平板、桌機等各種裝置瀏覽網站,響應式設計(RWD, Responsive Web Design)讓網站能依裝置尺寸自動調整版面,確保內容不變形、不擁擠,在哪種螢幕上都維持一定的閱讀品質。

這件事對台灣使用者格外重要。財團法人台灣網路資訊中心(TWNIC)委託國立陽明交通大學執行的《2025 台灣網路報告》顯示,台灣的行動上網率已經達到 87.12%。換句話說,多數訪客第一眼看到的網站,很可能就是手機版,如果手機版排版跑掉、字太小或按鈕點不到,等於直接把大半潛在訪客擋在門外。手機版從來不是可有可無的選配,而是設計時就該擺在優先順位的主要版本。

同一個網站在桌機顯示水平導覽列,到手機自動收合成漢堡選單並改為單欄,版面不變形
響應式設計讓同一頁在桌機與手機間自動切換版面,手機版收合成單欄與漢堡選單,內容依然好讀。

載入速度與 Core Web Vitals 三項指標

網站速度會直接影響使用者願不願意留下來。圖片壓縮、程式優化、主機品質與 CDN 使用,都會左右頁面讀取的快慢,速度也是搜尋引擎評估網站體驗的重要依據。

Google 現在是用三項名為 Core Web Vitals(核心網頁指標)的數據評估真實使用者的體驗,不是憑感覺評分。這三項指標分別是:LCP(Largest Contentful Paint,最大內容繪製)衡量主要內容多快出現在畫面上,及格門檻是 2.5 秒以內;INP(Interaction to Next Paint,互動到下一次繪製)衡量使用者點擊或輸入後畫面多快有反應,門檻是 200 毫秒以內;CLS(Cumulative Layout Shift,累計版面配置轉移)衡量畫面會不會在載入過程中突然跳動,門檻是 0.1 以下。

新手不需要自己抓數字,可以直接用 Google 提供的 PageSpeed Insights 工具檢測,或到 Search Console 查看網站速度報告,兩者都會直接標出哪些頁面沒過門檻、問題出在哪一項指標。

PageSpeed Insights 報告顯示 LCP、INP、CLS 三項核心網頁指標的實測數值與是否通過
用 PageSpeed Insights 檢測,就能直接看到 LCP、INP、CLS 三項核心網頁指標各自的實測數值與通過與否。

網頁設計仰賴的技術與工具

網站由哪些概念組成,最終都要靠實際的技術與工具做出來,這些技術大致分成前端、後端、資料庫與設計開發工具四大類。

網頁設計技術棧分成前端 HTML/CSS/JavaScript、後端語言、資料庫與設計開發工具四大類
前端負責使用者看得到的畫面,後端語言與資料庫則撐起看不到的運作,各有常用的技術與工具。

前端技術是畫面呈現的基礎

前端負責使用者在螢幕上直接看到的內容,包括排版、圖片、顏色、互動效果,以及不同裝置上的版面調整。目前所有網站都少不了三項核心技術:HTML 負責建立頁面的基本結構,CSS 負責控制樣式與版面呈現,JavaScript 負責提供互動效果與前端邏輯。無論是企業網站、電商還是平台型網站,都以這三項技術為主體。

後端技術與資料庫,讓功能和資料真正運作

後端負責網站背後的運作邏輯,包括表單資料處理、使用者登入驗證、內容管理與資料讀寫,常見的後端語言有 PHP、Node.js(JavaScript)、Python(Flask、Django)與 C#(ASP.NET),不同語言適用的系統架構不同,但目的都是支撐功能與資料處理。目前一般網站最常見的仍是 PHP,Node.js 與 Python 在 API 與後台系統中成長快速,C#(ASP.NET)則常見於政府與大型企業內部系統。

網站的文章、產品資訊、設定與會員資料,都需要儲存在資料庫裡才能持續讀取與更新。常見的資料庫有 MySQL、MariaDB、PostgreSQL 與 MongoDB,其中 MySQL 與 MariaDB 仍是一般網站最常使用的資料庫。

設計與開發工具,從介面稿到寫程式

視覺與介面規劃通常靠 Figma 完成,它目前是 UI/UX 領域最普及的工具;Photoshop 與 Illustrator 則用來處理圖片與視覺素材。開發階段最普遍使用的程式編輯器是 Visual Studio Code(VS Code),因為彈性高、擴充性強;其他常見的專業工具還有 WebStorm(前端與 JavaScript 常用)、PhpStorm(適合 PHP 開發)與 Visual Studio(用於 C#、.NET 系統)。

AI 開始滲入網頁設計的每個環節

這幾年 AI 開始滲透進網頁設計的每一個環節,而且進展比多數人想像的快,主要分成兩個層面。

在設計與開發端,程式編輯器內建的 AI 功能已經不只是自動補全。除了依描述產生程式片段,現在多了「代理模式」(agent mode),AI 能自己讀懂整個專案的程式碼架構,一次改動多個檔案,甚至能自主執行測試指令、依結果反覆修正,工程師的角色從逐行寫程式,變成審核與調整 AI 產出的結果。

在建站端,不少無程式碼平台已經把「用一句話描述需求,AI 直接生成整個網站雛形」做成內建功能,而且愈做愈完整:不只是產出單一頁面的模板,而是能一次生成包含多個頁面、版面、配色與初步文案的網站草稿,讓新手連挑模板的步驟都能省略。

不過 AI 生成的初稿通常還需要人工把關三件事。第一是品牌一致性,AI 生成的版型與文案通常還帶著範本感,需要重新調整用色、字體與文案語氣,才貼近自己的品牌調性;第二是 SEO 與內容深度,AI 生成的文字容易流於空泛,缺乏真正的產業知識與細節;第三是資安與資料掌控權,使用免費或 AI 平台時,網站的資料仍然掌握在平台手上,不是完全自己的。AI 能幫新手快速跨出第一步,但生成完的版本比較接近初稿,而不是可以直接上線的成品。

常見的三種基礎版型與挑選判斷

選好技術與工具,接下來要面對的是版面怎麼擺,這是新手最常拿不定主意的視覺決策之一。版面配置決定資訊怎麼呈現,也直接影響使用者的閱讀體驗。最常見的版型結構有單欄式、雙欄式與三欄式,多數網站都是從這三種架構延伸出來的。行動裝置普及之下,單欄式(尤其是手機版)已經是多數網站的預設起點,雙欄與三欄則多半是桌機版才會用到的加值,不是每個網站都需要。

挑版型之前,看範例網站時可以留意幾件事:主要內容區塊占的比例夠不夠大、側邊欄放的是真正對訪客有用的輔助資訊,還是塞滿了行銷版位、版型收到手機版時會不會整個打散變形。判斷自己適合哪種版型,可以從內容類型下手,以敘事為主、想讓訪客專心閱讀的服務型網站,通常單欄式就夠用;需要同時呈現分類、搜尋與大量文章的知識庫或部落格,雙欄式的側邊導覽會更好用。

單欄式、雙欄式與三欄式三種基礎版型的結構對照,主內容區塊以橘色標示
多數網站都從單欄、雙欄、三欄這三種結構延伸;行動裝置普及下,單欄式已是預設起點。

單欄式(Single Column)

單欄式排版以直向瀏覽為主,沒有左右欄位分心,讓使用者能專注在主內容上。常見於部落格文章內容頁、Landing Page 與銷售頁、產品或服務的單頁介紹、公司網站的敘事式內容區段、聯絡表單與登入註冊等單功能頁,以及手機版網頁(RWD 的主流架構)。

雙欄式(Two Column)

雙欄式排版通常是主內容搭配側邊欄,讓資訊層次更清楚。常見於部落格文章列表頁、企業網站的側邊導覽架構、電商商品分類頁(左側篩選、右側商品)、教學站或知識庫,以及需要顯示分類、搜尋、推薦文章或 CTA 的頁面。

三欄式(Three Column)

三欄式多用在大型資訊型網站,中央呈現主內容,左右兩側顯示輔助資訊。常見於新聞網站的內容與推薦並列頁、大型內容平台、後台管理介面、論壇與教育平台等內容密集網站,以及儀表板(Dashboard)類型的頁面。

常見的三種架站方式

選定版型之後,接下來要決定的是由誰來做,這通常也是新手第一個要拿定主意的問題。多數人第一次做網站時,會在三種主要方式之間做選擇,分別是免費/無程式碼架站平台、自行架設內容管理系統(CMS),以及委託專業網頁設計公司或自由設計師。三種方式在成本、彈性與技術門檻上都不一樣,適合的族群也各有差異。

免費平台、自行架設 CMS 與委託設計三種架站方式在成本、彈性與技術門檻上的高低對照
三種架站方式的成本、彈性與技術門檻各不相同,先看整體適合誰,再往下比細節。

免費與無程式碼架站平台,也懂得用 AI 生成網站

免費架站平台使用預設模板與拖曳式操作介面,不需要程式背景,是許多新手最容易上手的架站方式,常見平台像是 Wix、Google Sites 這類服務。

優點:

  • 操作簡單,不需要技術背景即可製作頁面
  • 建置速度快,幾小時內就能完成網站雛形
  • 主機、備份與 SSL 由平台管理,不需要自己設定
  • 初期成本低,多數平台提供免費方案或月租制

缺點:

  • 客製化有限,版型與功能受平台規範影響
  • 功能擴充通常需要額外付費
  • SEO、速度與效能多半不如自行架設的系統
  • 資料移轉不容易,未來換平台成本較高
  • 模板使用者多,網站風格容易重複

這幾年這類平台的 AI 生成功能又進一步了,不只是輸入一句話描述需求就自動產出單一頁面雛形,有的平台已經能一次生成包含多個頁面、版面、配色與初步文案的完整網站草稿,整個過程只要幾分鐘。門檻比過去更低,但生成後還是建議自己再調整一次文案與品牌細節,不要照單全收,AI 給的初稿通常只是起點,不是成品。

比較適合個人作品集、小型活動網站,或是想快速展示內容、預算有限、沒有技術背景又希望快速上線的人。

自行架設內容管理系統(CMS)

自行架設 CMS 是台灣最常見的做法,以 WordPress 為主,其次還有 Joomla、Drupal、Ghost,以及電商常用的 Shopify。這種方式彈性高,可以完整掌握網站架構與資料。

優點:

  • 版面與功能自由度高,可依需求調整
  • 能透過模組擴充電商、預約、會員、多語系等功能
  • 主機與資料自主管理,不受平台綁定
  • 對 SEO 友善,能建立完整的內容架構
  • 成本彈性也高,主機加網域一年大約落在 2,500 元到 6,000 元之間就能運作

缺點:

  • 需要具備主機管理、備份與安全性的基本技術
  • 外掛與版型更新可能出現相容性問題
  • 流量增加時需要做效能最佳化,例如快取與 CDN
  • 程式、安全與維護事項都要自己負責

比較適合想長期經營品牌或內容的人、中小企業網站、對 SEO 或功能擴充有需求,以及不想被平台綁定的使用者。

委託專業網頁設計公司或自由設計師

由專業設計團隊協助打造網站,能提供從規劃到上線的完整流程,適合需要品牌形象呈現、客製化功能或完整規劃的個人與企業。

優點:

  • 提供從架構、視覺、前端、後端到 SEO 基礎設定的完整規劃
  • 視覺風格可依品牌量身打造,整體品質一致
  • 能開發客製功能,例如 API 串接、預約系統、會員中心
  • 遇到問題有專業團隊協助排查
  • 在效能、安全性與 RWD 方面通常也更完整

缺點:

  • 預算較高,通常落在 30,000 元到 200,000 元以上
  • 製作需要經過規劃、設計、討論與測試,時間較長
  • 需要提供品牌素材、文案與圖片才能推進製作

比較適合中小企業與品牌形象官網、有明確視覺風格需求的個人或企業、需要客製功能或系統整合,以及希望省時省力、不想自己維護網站的人。

三種架站方式的優缺點對照表

架站方式優點缺點適合對象
免費/無程式碼平台快速、簡單、初期成本低客製化有限、功能受限、SEO 較弱個人、學生、小型展示網站
自行架設 CMS高彈性、可擴充、完整掌握資料、SEO 友善需要自行處理主機、更新、安全等技術門檻個人品牌、中小企業、長期經營者
專業設計公司/自由設計師品質穩定、可客製化、品牌一致性高費用較高、製作週期較長中小企業、品牌官網、高階需求

網站預算的五個組成項目

決定好架站方式之後,接下來最實際的問題就是要花多少錢。網站的費用通常由五個項目組成:網頁設計及功能擴充、主機費用、網域費用、SSL,以及維護費用。不同架站方式,加上網站內容多寡與功能複雜度,都會讓費用出現落差。以下整理三種常見架站方式在第一年與次年(後續每年)的費用區間,提供估算參考。

網站預算由網頁設計、主機、網域、SSL 與維護五個項目組成,各自為一次性或年費
網站費用主要由這五個項目組成,先看錢花在哪幾塊,再依架站方式估算金額落差。

使用免費架站平台的第一年與次年費用

第一年費用大約落在 0 元到 15,000 元之間:網頁設計及功能擴充 0 到 5,000 元,主機費用通常已包含在平台方案中(每月 0 到 1,000 元),網域費用 500 到 1,200 元,SSL 多半免費,維護費用則是 0 元。

次年(後續每年)費用大約落在 1,000 元到 20,000 元之間,主機費用視方案而定,可能落在 0 到 12,000 元,其餘項目與第一年相近。

自行架設 CMS 的第一年與次年費用

第一年費用大約落在 5,000 元到 30,000 元以上:網頁設計及功能擴充 0 到 10,000 元,主機費用 4,500 到 12,000 元,網域費用 500 到 1,200 元,SSL 可用 Let’s Encrypt 或 Cloudflare 等方式免費取得,維護費用則落在 0 到 10,000 元。若使用免費資源並自行維護,第一年費用可壓在 5,000 元到 6,000 元左右。

次年(後續每年)費用大約落在 5,000 元到 22,000 元以上,各項目區間與第一年相近;若全部使用免費資源自行維護,每年約 5,000 元到 6,000 元就能維持運作。

委託專業設計公司製作的第一年與次年費用

第一年費用大約落在 35,000 元到 230,000 元以上:網頁設計及功能擴充 30,000 元到 200,000 元以上,主機費用 4,500 到 12,000 元,網域費用 500 到 1,200 元,SSL 通常免費或由設計公司提供,維護費用則依需求議定,落在 0 到 20,000 元。

次年(後續每年)費用,主機、網域與 SSL 的區間與第一年相近,網頁設計及功能擴充則依實際需求另計,維護費用同樣依需求議定。

三種架站方式的費用對照表

費用項目免費架站平台自行架設 CMS專業網頁設計
第一年網頁設計及功能擴充0~5,000 元0~10,000 元30,000~200,000+ 元
主機費用(年)0~12,000 元(含在平台方案)4,500~12,000 元4,500~12,000 元
網域費用(年)500~1,200 元500~1,200 元500~1,200 元
SSL免費免費(Let’s Encrypt/Cloudflare)免費或由設計公司提供
維護費用(年)0 元0~10,000 元0~20,000 元(依需求議定)
第一年總費用0~15,000 元5,000~30,000+ 元35,000~230,000+ 元
次年(後續每年)總費用1,000~20,000 元5,000~22,000+ 元5,000 元以上(依需求另計)

網站製作所需的時間,因架站方式而不同

預算有了譜,時間通常是新手接下來最想知道的事,網站要做多久才能上線。這個問題會受架站方式、內容準備度、功能複雜度與操作熟悉度影響,沒有單一答案,但每種架站方式都有大致的區間可以參考。

三種架站方式的製作時間區間

架站方式製作時間主要原因
免費/無程式碼平台數小時至數天模板與拖曳式介面為主,流程最精簡,素材齊全甚至一天內可完成
自行架設 CMS1~6 週套版主題約 1~2 週,需要調整佈景主題、外掛設定或客製功能則可能拉長到 4~6 週以上
專業設計公司/自由設計師1~3 個月完整流程含企劃、視覺設計、前端切版、後端開發與測試,複雜或多語系網站可能超過 3 個月

拉長或縮短製作時間的關鍵因素

製作時間長短,主要取決於幾個變數:

  • 內容確認與回覆速度
  • 文案、圖片等素材是否準備齊全
  • 視覺設計或版面調整的複雜度
  • 是否需要客製化功能或 API 串接
  • 頁面數量多寡
  • 是否需要 RWD 客製調整
  • 是否包含電商、會員系統、多語系等進階功能

素材準備得愈完整、回覆確認得愈快,整體製作時間通常就愈短。

網站從概念到上線的製作流程

不管最後選的是哪一種架站方式,網站從概念變成能上線運作的成品,大致都會經過幾個階段,自行架設或委託設計公司時流程最完整,選擇免費平台則會省略其中幾個步驟。

網站製作流程六階段:規劃整理、視覺設計、前端製作、後端開發、測試調整到上線維護
網站從概念到上線大致會經過這六個階段,前面規劃得愈清楚,後面愈不容易走回頭路。

規劃與資訊整理,先確定網站目的與內容架構

開始製作之前,要先確認網站的目的、目標族群、核心內容與預計呈現的功能,同時整理網站架構(Sitemap)、重要頁面列表與風格方向。這一步規劃得愈清楚,後續流程愈不容易走回頭路。

視覺設計,決定網站的第一印象

依據前一步的規劃完成整體視覺設計,包括色彩設定、字體選擇、排版方式與圖片風格。視覺設計決定訪客對網站的第一印象,也是品牌呈現的重要環節。

前端製作,把設計稿變成能瀏覽的網頁

這一步用 HTML、CSS 與 JavaScript,把視覺設計稿實作成真正能瀏覽的網頁,包含版面、互動效果與 RWD 跨裝置布局,確保網站在不同裝置上都維持良好體驗。

後端開發,讓網站的功能真正能運作

實作網站需要的動態功能,例如資料處理、後台管理、使用者登入、預約系統、表單驗證與金流串接。後端開發是讓網站真正能處理資料、執行功能的關鍵一步。

上線,正式啟用主機、網域與 SSL

完成製作與測試後,最後一步是設定主機、綁定網域並啟用 SSL,正式讓網站公開讓外界瀏覽。主機要先設定好正式環境,網域的 DNS 記錄要指向正確的主機位置,SSL 憑證安裝完成後,網址才能用 https 開頭安全連線。確認這幾件事都到位、正式環境放的是製作完成的最終版本而不是測試用的暫存內容,網站就算正式上線。

正式上線前也別忘了做一次外部視角的檢查:用瀏覽器的無痕視窗開啟正式網址,確認沒有殘留測試用的浮水印、佔位圖片或「建置中」提示;也建議搜尋一下網站名稱,看看主機商或架站平台預設的歡迎頁面有沒有還留在某個網址底下沒清掉。這類小細節在製作階段用內部測試網址檢查時很容易被忽略,等到真正上線後才被訪客發現。

動工前要準備好的核心素材

決定好架站方式、抓好預算與時間之後,動工前還有一步不能省,就是把核心素材準備好,這能大幅提升製作效率,也能減少反覆修改的次數。

動工前必須準備的七類核心素材

開始製作前,建議先準備好以下幾類核心素材:

  • 品牌識別素材:Logo(準備標準版,以及適用淺色、深色背景的變體)、明確的主色與輔助色系,以及指定的內文與標題字型
  • 公司或個人介紹:品牌故事與核心理念,能強化訪客信任感,也有助於後續的內容佈局
  • 服務或產品說明:清楚描述流程、特色與優勢,幫助訪客理解並提升轉換意願
  • 高品質視覺素材:產品照片、作品集、團隊或環境照,建議統一風格與畫質以維持一致性
  • 案例或作品集:服務型網站建議準備一到兩個代表性案例,說明需求、執行過程與成果
  • 行動引導(CTA)設定:明確規劃希望訪客採取的動作,例如聯絡預約、加入社群、訂閱或購買
  • 網站架構(Sitemap)草案:列出所需頁面,例如首頁、關於、服務、案例、部落格與聯絡等

讓準備工作更有效率的實務建議

  • 內容完整性是關鍵:內容準備不足是專案延遲最常見的原因,建議及早開始彙整與撰寫
  • 重視素材質感:高品質圖片與清晰文案,通常比複雜動畫更能塑造專業印象
  • 明確設定行動目標:提前決定主要的轉換動線,能避免後期反覆調整結構
  • 建立有序的檔案夾:依品牌識別、圖片、文案、案例等分類整理素材,提升交付與溝通效率
  • 提供參考網站範例:提供二到三個風格或功能參考的網站,有助於快速對齊設計期望
  • 兼顧 SEO 與擴充性:初步規劃內容分類與標題結構,方便後續的內容擴充與搜尋引擎優化

上線前的驗收,該逐項檢查的項目

網站做完,正式上線前還有一關不能省,就是自己逐項確認過一次,而不是只聽到「我們測過了」就簽收。用瀏覽器實際打開來看、拿數據複驗速度、把關鍵功能操作過一輪、確認基本 SEO 設定到位,再檢查一次自己有沒有拿到後台的完整權限,這幾件事做完,才算真正驗收。

跨裝置實際開啟畫面,不只是看設計稿

在正式簽收前,找一支手機、一台平板,加上桌機瀏覽器,把網站從頭到尾實際打開來看一次,不要只看設計稿,也不要只聽對方說「這個有做 RWD」。重點檢查排版有沒有跑掉、字會不會小到看不清楚、按鈕在手機上點不點得到、表單欄位好不好填、圖片會不會被裁到看不出重點。

多測幾種瀏覽器與作業系統的組合也有幫助,Safari 跟 Chrome 對某些 CSS 屬性的支援程度不完全一樣,在其中一個瀏覽器看起來正常,換到另一個未必如此。如果自己手邊裝置有限,就找家人或同事的手機借測幾分鐘,也比完全沒測過好。

用 PageSpeed Insights 複驗核心網頁指標

把正式網址貼進 PageSpeed Insights 或 Search Console,直接看 LCP、INP、CLS 這三項核心網頁指標有沒有過門檻,而不是憑感覺覺得「網站看起來速度還可以」。工具會直接標出哪個頁面沒過、問題出在哪一項指標,比自己用眼睛猜準確得多。

這是上線前第一次完整把關,找出來的問題趁著還沒正式讓大量訪客看到之前先處理掉,成本最低。上線之後這三項指標還要持續複查,那是另一件事,這裡先確保第一次測出來的結果過關再讓網站公開。

表單、金流與會員登入的功能測試

網站上有表單、金流或會員系統,上線前都要真的操作過一輪,而不是只看畫面有沒有跑版。填一次聯絡表單,確認後台或信箱真的收到通知信;金流串接要完成一筆真實的小額付款測試,確認金額對得上、付款成功後訂單狀態也正確更新;會員系統要實際註冊一組帳號、登入登出,確認驗證信與忘記密碼流程都能用。

順手把網站上所有的按鈕與連結都點過一輪,特別是頁尾、選單裡容易被忽略的連結,確認導向的都是對的頁面,沒有連到還在製作中的暫存網址,或是連結整個是空的。這是上線前的一次性把關,跟上線後定期複測的持續性工作不同,重點是先確保「從沒人用過」到「正式公開給訪客用」這個轉換的當下,功能是完整可用的。

基本 SEO 設定與內容校對

上線前也該把基本 SEO 設定檢查一遍:每個頁面的 Title 與 Meta Description 有沒有分別設好、標題階層(H1、H2)用得對不對、Sitemap 有沒有提交到 Search Console 讓搜尋引擎知道網站有哪些頁面。這幾件事上線後才補做也可以,但愈早設好,搜尋引擎開始收錄的時間點就愈早。

同時也該把內容再校對一次,包括圖片有沒有加上替代文字(alt)、文案有沒有錯字或格式跑掉,以及隱私權政策這類法規要求的頁面是不是已經真的上線,而不是還停在草稿階段。這幾項看起來瑣碎,但都是訪客與搜尋引擎第一次接觸網站時就會碰到的東西。

後台權限交接,確認自己拿到最高管理權限

驗收清單裡還有一條容易被忽略,就是後台管理員帳號拿到了沒有、權限等級對不對。網站做完卻只留一組編輯者權限的帳號,之後想自己調整版面設定或安裝新外掛時會處處受限,甚至得回頭再問一次。

這一條只是驗收清單裡的其中一項提醒。網域、主機、原始檔與 SSL 憑證各自登記在誰名下,是動工前就該問清楚、驗收時再次確認的完整資產範圍。

網站的五項資產,先確認各自的歸屬

網站做完,不代表每一樣東西都已經在自己手上。網域註冊人是誰、主機控制台誰能登入、當初的設計稿與程式源碼有沒有拿到、CMS 後台開到哪一個權限等級、SSL 憑證掛在誰的帳號底下,這五件事分別對應著網站能不能真的被自己掌握。

東西掛在設計公司名下,不代表哪裡有問題,這件事要先說清楚。實務上很多長期配合的案子,網域、主機都是由設計公司集中管理,出狀況時對方能立刻處置,不必等人找帳號密碼,運作起來反而更單純,這類安排本身沒有問題。真正重要的是兩件事,知道現在這些東西掛在誰的名下,以及在合作之初就把這些問題問清楚,而不是等到有一天想換人維護,才發現自己什麼都拿不到。

網域、主機、原始檔、CMS 帳號與 SSL 憑證五項資產,各自對應一件合作之初就該問清楚的事
這五項資產由設計公司集中管理很常見,重點是知道現在掛在誰名下,並在簽約前把右邊那幾件事問清楚。

網域註冊人欄位的登記對象,用 WHOIS 就查得到

要查自己的網域目前登記在誰名下,用 WHOIS 查詢就看得到,搜尋「WHOIS 查詢」就能找到免費的查詢工具,輸入網域名稱,畫面上的「Registrant(註冊人)」欄位,寫的就是目前登記的對象。

查到的結果通常是兩種情況,而且都合理:登記在自己名下,主導權最清楚,往後不管要換主機、調整 DNS 設定或轉移到別的服務商,都不需要經過誰同意;由設計公司代辦、掛在對方名下,好處是續約、DNS 調整這類事情對方可以直接處理,不用每次都要來回要帳號密碼,長期配合下來反而省事。

真正要問清楚的是,之後如果想把註冊人改到自己名下,流程怎麼走、需要多久、要不要另外收費。這個問題在簽約前問一次,比事後才問清楚容易得多。

主機控制台的最高權限,自己能不能拿到

主機或雲端服務的控制台權限也是同樣的道理。委託代管時,帳號握在設計公司或代管服務商手上很常見,也確實比較好維護,主機出狀況需要重開服務、還原備份,對方能立刻動手處理,不必先等誰授權才能操作。

要問清楚的是,真的需要的時候,自己能不能拿到一組具備管理權限的帳號,以及未來如果想把主機轉移到別的服務商,流程怎麼走、費用怎麼計算。這個問題平常不會被想起來,但真的要問通常是遇到緊急狀況,例如原本配合的對象突然聯繫不上,那時候才問就太晚了。

原始設計稿與程式源碼,不是每種方案都會交付

有些網頁設計方案,本來就不會交付程式源碼。做出來的是一個可以正常使用、也能自己改內容的成品網站,但拿不到最底層的程式碼本身,套用固定版型或訂閱制的服務尤其常見,這是方案設計本來的樣子,不是刻意藏著不給。

視覺設計稿的原始檔也是同一回事,像 Figma、PSD 或 AI 這類原始檔案,有的方案本來就含在報價裡,有的則要另外計費才會交付。

這件事最好在簽約前就問清楚,不要等到專案結束才發現拿不到,可以直接問對方這個方案含不含程式源碼與設計原始檔,如果要,是不是需要另外報價。未來如果想換人維護,或是想在既有基礎上做二次開發,這個答案會直接影響能不能順利接手。

CMS 後台帳號的權限等級,決定自己能動的範圍

用 WordPress 這類 CMS 架設網站時,後台帳號的權限等級決定了自己能動的範圍有多大。最高等級(WordPress 稱為 Administrator,管理員)可以安裝外掛、調整系統設定,幾乎所有東西都能動;等級較低的編輯者帳號,通常只能修改文章與頁面內容,碰不到後台的系統設定。

兩種安排各有各的道理。只開放編輯者權限,好處是不會有人誤觸設定選項把網站弄壞,長期配合維護的案子這樣分工其實很常見,也算是一種保護機制。要確認的只有一件事,自己目前拿到的帳號是哪一個等級,以及日後如果需要更高權限,能不能申請調整。

SSL 憑證的歸屬帳號,續約通知才不會漏接

SSL 憑證需要定期續約,多數主機或服務商現在都會自動處理,不太需要自己動手。但憑證終究是掛在某一個帳號底下,到期提醒信也只會寄到某一個信箱,如果那個帳號跟自己完全沒有連結,一旦真的漏掉續約,往往是等到瀏覽器跳出「不安全」的警告,訪客都看到了才知道出事。

要確認的事情很簡單,問一句「SSL 續約是誰負責、會不會自動續」,通常答案就夠清楚了,不需要因為這件事另外準備一整套監控機制。

網站改版和搬遷,避免流量與排名一併流失

網站用了幾年之後,常會遇到需要改版、換主機,或整個換一套 CMS 的時候。這件事本身沒有問題,真正容易出包的是新舊網址的對應——如果沒處理好,原本累積好幾年的搜尋排名,跟其他網站連過來的外部連結權重,可能在改版上線那天就直接歸零重來。

網址結構打掉重練,舊排名與外部連結權重會一併流失

改版最常見的雷,是趁機把網址結構整個重新設計。例如原本的服務頁網址是 /service/logo,改版時想把架構弄得更清楚,換成 /products/logo-design,這種調整看起來只是網址變漂亮了,但如果沒有做好新舊網址的對應,Google 會把新網址當成一個從沒看過的全新頁面,過去這一頁累積的排名,還有其他網站連過來的外部連結權重,都不會自動跟著搬過去,等於歸零重新評估。這件事不是只有整個網站搬家才會遇到,改版時只調整某個分類的網址結構,一樣算在內。

網址結構要不要調整,是設計上的合理考量,不是不能改,只是改的時候要有配套,而不是直接把舊網址關掉、換上新的就結束。

301 永久轉址與新舊網址對應表

配套做法是設定 301(或 308)永久轉址,這是 Google 官方建議的處理方式,而且轉址本身不會造成 PageRank(網頁排名權重)流失,舊網址的權重會透過轉址傳遞到新網址。

重點是要做一份「一對一」的新舊網址對應表,舊的服務頁轉到新的服務頁、舊的文章頁轉到新的文章頁,一筆對一筆。盤點舊網址可以從網站地圖、伺服器紀錄與 Search Console 的外部連結報表下手;頁面少逐筆核對,頁面多先照規則批次處理,再抽樣確認轉址內容對不對。

把所有舊網址通通轉到新首頁,是改版時最容易出現的偷懶做法,等於把原本頁面累積的排名與外部連結權重一起丟掉。Google 官方文件明確提到,不建議把大量舊網址轉址到一個不相關的單一目的地,例如首頁,可能讓使用者感到困惑,也可能被視為軟性 404 處理;唯一合理的情境,是原本分散在好幾個頁面的內容真的合併成一個頁面。

轉址還分永久與暫時兩種。301(或 308)是永久轉址,Google 會把新網址當成正式版本看待,適合固定搬過去、不會再改回來的情況;302(或 307)是暫時轉址,Google 仍保留原網址在搜尋結果裡,適合暫時性移動、之後還會改回來的情況。網站改版屬於永久性搬遷,原則上都該用 301(或 308),誤用暫時轉址,排名信號不會確實轉移過去。

Search Console 網站搬遷工具與上線後的觀察期

如果這次改版連網域都換了,可以在 Search Console 用「地址變更工具」通知 Google,加快確認新網址身分的速度。這個工具只適用於換網域或子網域,同網域內調整網址結構並不適用,把轉址設好、新版網站地圖送出就足夠。使用前要先在 Search Console 分別驗證舊、新網站兩個資源,且用同一個 Google 帳號管理。

上線之後也別急著鬆一口氣,建議持續觀察 Search Console 的索引涵蓋範圍與搜尋分析報表,確認新網址正常收錄、排名沒有異常掉幅。用地址變更工具搬遷時,流程會持續運作 180 天,轉址至少要維持這麼長時間;單純調整網址結構、沒用搬遷工具時,Google 官方建議轉址盡量保留久一點,至少一年,確保排名訊號完整傳輸過去。

換平台時,網址以外還有幾項容易跟著斷掉

換一個架站方式,例如從免費架站平台搬到自己架設的 CMS,會斷掉的不只是網頁本身的網址。頁面裡內嵌的圖片、影片、JavaScript 與 CSS 檔案也各自有自己的網址,同樣要列進盤點清單一併設定轉址,不然頁面轉過去了,圖檔或嵌入內容還是會壞掉。網站原本用來驗證身分的檔案跟驗證碼,也要在新平台重新設定一次;如果原本有多語系版本,語言對應的標記(hreflang)也要跟著新網址更新,沒同步改,搜尋引擎可能會抓到語言版本彼此指錯網址的情況。

舊網址透過 301 永久轉址指向新網址,權重隨轉址傳遞,並用一對一對應表取代全部導到首頁
改版換網址時做一份一對一的新舊對應表,舊網址的排名與外部連結權重才會透過 301 轉址接到新頁面(資料來源:Google)。

網站上線後的七項維護工作

上線並不是專案的終點,而是進入持續維護的新階段。前面的驗收是上線前確認一次,這裡要講的是上線之後得持續做下去的事,系統性的維護,才能確保網站穩定、安全、高效,並持續提供良好的使用體驗。

主機和網域,合約與續約要定期確認

主機與網域是網站運作的根基,需要定期管理合約與續約(網域通常按年續約,主機則依方案而定),避免因為疏忽繳費導致服務中斷,讓網站無法被訪客存取。

網站狀態監控,掌握可訪問性與速度

建立即時監測機制,持續檢查網站的可訪問性、回應速度與穩定狀態。一旦發生異常中斷或效能嚴重延遲,就能第一時間發現、快速排錯,把網站的正常運作時間拉到最高。

程式與安全更新,修補漏洞並強化防護

核心架構、外掛或模組要定期更新到最新穩定版本,主要目的是修補安全漏洞、強化系統防護,同時確保功能相容。更新前務必先完整備份,避免更新後出現相容性問題影響網站運作。

定期備份與災難復原,網站安全的最後防線

資料庫、程式碼與媒體檔案都要完整備份,並訂出明確的備份頻率,例如每日或每週一次。遇到人為誤刪、主機故障或資安攻擊時,才能依靠備份快速恢復服務,把損失降到最低。

功能測試與驗證,表單與金流要定期複測

表單提交、會員登入、購物車與金流串接等關鍵互動功能,都需要定期做端對端測試。外部服務更新或程式異動都可能讓功能悄悄壞掉,例行測試能確保核心流程一直順暢。上線前的驗收只測一次,這裡強調的是上線之後定期反覆測,兩者不是同一件事。

內容更新與優化,資訊不過時才留得住訪客

定期檢視並更新產品資訊、部落格文章與聯絡資料等內容,維持資訊的正確性與時效性。持續提供有價值的內容,也有助於提升使用者參與度與搜尋引擎的收錄表現。

效能與 Core Web Vitals,定期用數據複查

定期用 PageSpeed Insights 或 Search Console 的網站速度報告,複查 LCP、INP、CLS 這三項核心網頁指標,而不是單憑感覺覺得網站好像變慢了。同時也該檢視 Title、Meta Description 與標題結構(H1、H2)這些基本 SEO 元素有沒有跟著內容更新同步調整,維持網站的能見度與使用者體驗。

驗收階段的複驗是上線前確認一次過關就好,這裡則是隨著網站資料量增長、內容持續迭代,運作效能也可能跟著改變,需要拉長時間軸持續追蹤,才能確保長期維持在最佳的瀏覽速度與使用者體驗。

網站蒐集個資前,法規要求的告知義務

網站上線、也開始蒐集訪客資料之後,還有一件容易被忽略、卻可能帶來麻煩的事,就是個資與隱私權政策。只要網站有聯絡表單、會員系統、電子報訂閱,或使用 Google Analytics 這類會蒐集使用者資料的工具,就已經構成蒐集個人資料,不是只有電商或大公司才需要處理這件事。

個資法規定,蒐集資料前要告知的六項事項

只要網站蒐集使用者的姓名、Email、電話等個人資料,不論是聯絡表單、會員註冊或電子報訂閱,都算在內。依《個人資料保護法》第 8 條規定,蒐集個人資料時須告知當事人以下事項:蒐集者的名稱、蒐集目的、個人資料的類別、個人資料利用的期間地區對象與方式、當事人可以行使的權利,以及若拒絕提供資料會有什麼影響。

重點是,這件事不能只在網站角落貼一則公告就算了事,而是要讓使用者在提供資料之前,就能明確知道這些內容。

隱私權政策與 Cookie 同意的準備要點

隱私權政策頁面通常要涵蓋幾項基本內容:蒐集哪些資料、用途是什麼、保存期限多久、是否使用 Cookie 或分析工具,以及使用者可以怎麼行使查詢或刪除資料的權利。

有一個實務細節新手很容易漏掉。Google Ads、Meta 廣告這類平台在審核廣告帳號時,會檢查網站是否具備隱私權政策與 Cookie 相關說明,沒有的話廣告可能被直接拒登。這是不少新手上線後才發現的疏漏,建議在網站上線清單裡就把它排進去,不要等到要下廣告才臨時補做。

台灣無障礙網頁規範,公部門與教育標案的硬門檻

除了個資與隱私權,另一項容易在動工前被忽略的法規門檻,是網站的無障礙規範。台灣自 2017 年 2 月正式實施「網站無障礙規範」,內容參酌 W3C 的 WCAG(網頁內容可及性規範),把網頁分成 A、AA、AAA 三個檢測等級。對一般商業網站來說,做到無障礙是加分項,讓視覺、聽覺或行動能力受限的訪客也能順利使用網站;但對公部門網站、學校、教育機構,或承接政府標案的網站,這通常不是加分,而是規格書上白紙黑字寫著的硬性門檻。

三個優先等級,組合出四種無障礙標章

規範把檢測項目分成三個優先等級。第一優先等級是開發網頁必須滿足的最基本要求,共 29 條檢測基準,沒做到,身心障礙使用者可能完全無法取得網站上的部分資訊。第二優先等級是應該要滿足的等級,沒做到雖然不至於完全看不到內容,但會讓部分使用者遇到明顯困難。第三優先等級則是最高規格,多半屬於額外的加分項目,一般網站不強制要求做到。

容易被搞混的是,標章不是三種而是四種,因為它們是這三個優先等級的不同組合。A 標章對應第一優先等級的 29 條;AA 標章(雙 A)須同時符合第一與第二優先等級,共 68 條;AAA 標章(三 A)須符合三個優先等級,合計 90 條。夾在中間的是 A+ 標章,內容是第一優先等級的 29 條,再加上第二優先等級其中 5 條與第三優先等級其中 1 條,總計 35 條。

這個組合方式帶出一個反直覺的結果:通過 AA 不代表就符合 A+。A+ 裡面那 1 條來自第三優先等級的檢測碼,是網頁導盲磚(:::)搭配快速鍵的設計,而 AA 的範圍並不包含它。看標案規格書時要看清楚要求的是哪一種標章,別以為等級數字看起來比較高就一定涵蓋得住。

無障礙標章有四種,A 標章 29 條、A+ 標章 35 條、AA 標章 68 條、AAA 標章 90 條檢測基準,由三個優先等級的不同組合而成,通過 AA 不代表符合 A+
四種標章是三個優先等級的不同組合,A+ 多了一條第三優先等級的項目,通過 AA 並不等於符合 A+(資料來源:數位發展部)。

公部門與教育標案,幾乎把 AA 等級標章當門檻

政府機關網站、學校網站,或是承接政府標案的網站,規格書通常會直接要求取得 AA 等級無障礙網頁標章,並且接受定期與不定期稽核,沒有達標的話標章可能被取消,連帶影響案子能不能結案驗收。

如果知道自己的網站將來有機會承接這類案子,例如學校、公部門或政府補助的專案,這件事最好在網站規劃階段就排進去,而不是等標案來了才臨時補做。事後回頭調整既有的版面結構與程式碼,成本比一開始就規劃進去高出不少。

常被扣分的檢查項目,替代文字與色彩對比最常見

實際檢測時,最常被扣分的幾個項目其實不難改善。圖片有沒有加上替代文字(alt),讓螢幕報讀軟體能唸出圖片內容;文字與背景的色彩對比夠不夠,太淺的字配上太淺的底色,一般人可能也要瞇眼才看得清楚;整個網站能不能只靠鍵盤完整操作,不依賴滑鼠點擊;表單的每個欄位是否都有對應的標籤(label),而不是只靠一個看起來像提示文字的灰色 placeholder。

這幾項檢查即使不是為了拿標章,套用在一般商業網站上也是好事,色彩對比不夠、表單填寫困難,本來就是會讓訪客提早放棄的常見問題,無障礙檢查等於是拿一套更嚴謹的標準,把這些容易被忽略的細節一次抓出來。

AI 搜尋時代,網站要符合的 GEO 要求

網站做出來之後,能不能被找到,決定了前面所有投入值不值得。這件事的基礎規則沒有變,但這幾年多了一個新變數,就是愈來愈多搜尋結果會先被 AI 摘要整理過一次,才顯示給使用者看。

SEO 基礎,決定網站能不能被找到

SEO(搜尋引擎優化)決定網站能不能被 Google 等搜尋引擎找到,做法包括標題結構、關鍵字佈局、內容品質、Meta 設定與結構化資料規劃,是網站曝光與流量成長的基礎。這件事沒有因為 AI 搜尋興起而過時,反而是接下來要談的 GEO(生成式引擎優化)討論的前提,不是被取代的舊做法。

零點擊搜尋成長,GEO 成為新變數

這個新變數具體來說,是愈來愈多人的問題會被 Google 的 AI 摘要功能或 ChatGPT 這類 AI 工具直接整理成答案,使用者不一定需要點進網站才能得到解答,這種現象叫做零點擊搜尋(zero-click search)。Pew Research Center 在 2025 年的一項分析發現,搜尋結果出現 AI 摘要時,使用者點進傳統搜尋結果連結的比例只剩 8%,沒有 AI 摘要時則是 15%,幾乎少了一半。Similarweb 的另一份數據也顯示,Google 上新聞相關搜尋的零點擊占比,一年之內從 56% 成長到 69%。

搜尋結果出現 AI 摘要時,使用者點進傳統搜尋連結的比例從 15% 降到 8%,幾乎減半
搜尋結果一旦出現 AI 摘要,點進傳統連結的比例就從 15% 掉到 8%,這正是要開始顧 GEO 的原因(資料來源:Pew Research Center)。

對第一次做網站的人來說,這代表除了傳統 SEO,還要留意內容會不會被 AI 摘要或引用,這種作法稱為 GEO(生成式引擎優化,Generative Engine Optimization)。

Google 官方對 GEO 的說法,沒有專屬的優化秘技

新手不需要為 GEO 另外學一套新技術。Google 官方本身的說明就指出,沒有專屬於 AI 的優化秘技,重點仍然是把內容寫得清楚、結構化、對使用者真正有幫助。Google 也明確說明,AI Overview 與 AI Mode 用的其實是跟一般搜尋一樣的排名系統,而不是另外一套獨立機制,只是多疊了兩層技術:一層是 RAG(檢索增強生成),從既有的搜尋索引裡抓出最新、最相關的網頁內容當依據;另一層是 query fan-out(查詢展開),把使用者原本的一句提問,自動拆成好幾個相關的子查詢,各自去搜尋結果裡找答案,最後再整合成一段回應。換句話說,網站在一般搜尋排得上去,才有機會被這套機制抓到、引用進 AI 產生的答案裡。

段落結構清楚,才容易被 AI 摘要引用

同一份指引裡有幾個具體、可以直接照做的建議。內容要先為真人讀者寫,不是為了搜尋引擎湊字數;用清楚的標題階層與段落把內容組織好,讓 H2、H3 各自對應一個明確的子主題,邏輯順暢的內容本身就比較容易被 AI 系統抓到重點。

這份指引也特別提到一個容易被誤解的地方,不需要為了讓 AI 讀懂而刻意把內容拆成一小段一小段的碎片,那種做法反而沒有幫助,正常寫成完整、易讀的段落就好。真正有幫助的是寫出獨到的觀點,而不是重複別人已經講過的內容。AI 系統會同時分析很多頁面,找的是真正提供新資訊或新角度的內容,二手整理的內容很容易被忽略。

最後一件容易被忽略的事,是網站本身能不能被正常爬取與索引。內容寫得再好,如果網站的技術設定擋住了搜尋引擎的爬蟲,或是頁面根本沒有被收錄,前面談的這些 GEO 做法都無從發生,這也是為什麼 SEO 基礎永遠是討論 GEO 之前必須先做好的前提。

網頁設計依然是視覺、內容、使用者體驗與技術的整合,這個核心沒有變。但現在多了幾層過去不太被提起的責任,從內容會不會被 AI 讀懂引用、資產有沒有真的握在自己手上,到改版搬遷會不會讓多年累積的排名平白流失、上線之後願不願意把維護當成長期要做的事,這些過去容易被忽略的細節,才是網站做完之後撐不撐得久的關鍵。

技術與工具會一直變,AI 生成網站雛形只會愈來愈快、愈來愈普及,這件事不必抗拒,也不用神化。但真正決定一個網站能走多遠的,終究是清楚的目的、扎實的架構,以及做完之後有沒有把它當成一項資產長期經營下去。

讀完文章後,想了解如何將這些觀念落實到自己的新網站或改版規劃中?歡迎直接查看龐果網頁設計服務,開啟您的建站專案。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

網頁設計和網站設計的範圍有什麼不同?

網頁設計偏重單一頁面的視覺與版面呈現,重視版面好不好看、排版順不順,屬於介面層的工作;網站設計則涵蓋整個網站的架構規劃,包含資訊層級、頁面串接與後端功能安排,是網頁設計的更上層概念,一個網站設計專案通常包含好幾次網頁設計工作。

手機版網頁排版跑掉,對訪客有什麼影響?

台灣行動上網率已達 87.12%,多數訪客第一眼看到的,多半是手機版網站;手機版排版一旦跑掉、字太小或按鈕點不到,就等於把大半潛在訪客擋在門外。因此手機版應該是設計時優先考慮的主要版本,而不是可有可無的選配。

改版換掉網址結構,沒做轉址會怎樣?

Google 會把新網址當成從沒看過的全新頁面,原本頁面累積多年的搜尋排名,以及其他網站連過來的外部連結權重,都不會自動跟著搬過去,等於歸零重新評估。因此改版時要設定 301(或 308)永久轉址,做好新舊網址的一對一對應。

蒐集個資前,法規要求告知使用者哪些事項?

依《個人資料保護法》第 8 條規定,蒐集個人資料時須告知蒐集者名稱、蒐集目的、個人資料類別、利用的期間地區對象與方式、當事人可行使的權利,以及拒絕提供資料會有什麼影響。而且不能只在網站角落貼一則公告就算了事。

政府標案通常要求哪個等級的無障礙標章?

政府機關、學校或承接政府標案的網站,規格書通常直接要求取得 AA(雙 A)等級無障礙網頁標章,須同時符合第一與第二優先等級、共 68 條檢測基準,並接受定期與不定期稽核。如果沒達標,可能連帶影響案子能不能結案驗收。

資料來源
  1. 2025 台灣網路報告-整體使用概況 — 台灣網路資訊中心(TWNIC)
  2. Understanding Core Web Vitals and Google Search results — Google
  3. Google's Guide to Optimizing for Generative AI Features on Google Search — Google
  4. Do people click on links in Google AI summaries? — Pew Research Center
  5. GenAI and How It's Impacting US Publishers — Similarweb
  6. 個人資料保護法第8條 — 法務部
  7. Redirects and Google Search — Google
  8. How to move a site — Google
  9. Change of Address tool — Google
  10. 無障礙網路空間服務網 — 數位發展部
  11. 各優先等級之比較 — 數位發展部
  12. Web Content Accessibility Guidelines (WCAG) — W3C