官網『維護中頁面』(Maintenance Page / 503) 設計完整攻略：中小企業如何在系統升級時不把訪客嚇跑、還順便建立專業感
系統升級 30 分鐘，訪客卻永遠不回來。教你用一頁維護頁面，把停機時間變成建立信任的機會。
你有沒有過這種經驗？
週四下午三點，你的網站正常上線一整年，突然要換主機、升級 PHP、或做資料庫遷移。工程師說「大概停 30 分鐘」，你想說「不過半小時，應該沒差吧」。
結果那 30 分鐘裡面：Google 搜尋來的新訪客看到「無法連線到伺服器」，直接關掉頁面去找下一家；剛剛聯絡過的準客戶要回來看報價，以為公司倒了；LINE 上被業務轉來的潛在買家，第一印象就是「這家連網站都掛掉，能做事嗎」。
停機半小時，你不知道流失了幾張詢問單。而問題不在於「有沒有停機」——所有網站都會停機，Facebook、Google、蝦皮全部都會——而在於停機的那 30 分鐘，訪客到底看到了什麼。
看到「白畫面 + 連線錯誤」，訪客覺得你倒了；看到一張精心設計的維護頁面，寫著「我們正在升級系統，預計 3:30 恢復，緊急聯絡請撥 03-3311220」，訪客會等，甚至會覺得「這家蠻專業的」。
這篇來聊，中小企業官網怎麼把維護頁面（Maintenance Page，也叫 503 頁面）做對。
Photo by Kevin Ache on Unsplash
為什麼要有維護頁面？三個很現實的理由
1. 保住訪客的信任
沒有維護頁面，訪客看到的是瀏覽器內建的錯誤畫面——「無法連線到 www.xxx.com」，或更糟的「500 Internal Server Error」。這種畫面對一般人來說就是「這網站壞了、這公司出事了」。
有維護頁面，訪客看到的是「我們正在做例行升級，30 分鐘後回來，這段時間可以先加 LINE：@313jcwtz」。這一頁的差別，是「訪客覺得你不專業就走了」跟「訪客反而順手加了 LINE」。
2. 告訴 Google 這是暫時的（保住 SEO）
這點很多人沒注意：如果 Google 爬蟲在維護時進來，看到你的頁面回傳 200（正常）但內容變成錯誤訊息，或看到 404（找不到），它可能會誤判你的網站掛了或內容改了，開始把你從搜尋結果下架。
正確的做法是回傳 HTTP 503 Service Unavailable 狀態碼，並在 header 加一個 Retry-After，告訴 Google「我暫時關閉，1800 秒（30 分鐘）後再來」。Google 收到這個訊號會乖乖等，不會傷害排名。
這是伺服器層要做的事，不是前端畫面而已。後面會講怎麼做。
3. 給團隊一個安全的施工空間
有維護頁面代表你有「維護模式開關」。工程師可以在維護模式下安心做資料庫升級、外掛更新、金流測試，不用擔心客戶剛好進來看到半殘的畫面、或在升級到一半時下單導致訂單漏掉。
沒有這個開關，很多中小企業的工程師只能挑「凌晨三點」動手，人累又危險，出錯機率反而更高。
一頁好的維護頁面，該有哪些元素？
元素一：標題要人話，不要「503 Service Unavailable」
訪客不知道 503 是什麼。標題直接寫：
- 「網站升級中，我們馬上回來」
- 「系統維護中，預計 30 分鐘後恢復」
- 「奧隆股份有限公司 - 網站正在升級」
白話、明確、不要嚇人。「Server Error」「Something Went Wrong」都會讓人覺得出大事了。
元素二：預估恢復時間（越具體越好）
模糊的「我們正在維護」跟具體的「預計 15:30 恢復」，帶給訪客的心理感受完全不同。前者訪客會關掉頁面，後者訪客會看一下時間，可能還會設個鬧鐘或加個書籤。
如果連工程師都不確定要多久，退而求其次寫「大約 30 分鐘」「今日下午 5 點前」。寧可寫寬鬆一點提前恢復給人驚喜，也不要寫太短然後 delay。
元素三：替代聯絡管道
網站掛的時候，客戶還是想找到你。所以維護頁面一定要放：
- 電話號碼（大字、可點擊撥號）
- LINE 官方帳號 QR Code 或連結
- Email 信箱
- Facebook 粉專連結
這一段的價值有時候比整個網站還高——因為看到你維護頁面的人，往往是「有明確意圖要找你」的人，比一般路過的訪客更值錢。
元素四：品牌 Logo 與識別色
維護頁面很多老闆會覺得「反正只是暫時的、隨便用個 template 就好」。錯。維護頁面反而是訪客單獨看你品牌 15 秒的少數場合——沒有選單、沒有商品分心，只有你的 Logo、你的顏色、你的一句話。這是免費的品牌曝光。
套一個免費模板配你的 Logo 也可以，重點是不要讓訪客看到「Bootstrap 官方範例配一個灰色齒輪」，那太廉價。
元素五（加分）：一點點幽默或人味
如果你的品牌調性允許，可以在維護頁面上加一點自嘲、一點幽默。例如：
- 「工程師正在跟 bug 談判，很快就好」
- 「我們的網站在健身房，馬上回來得更強壯」
- 「請倒杯咖啡，30 分鐘後見」
這種頁面反而讓人印象深刻。不過如果你是律師事務所、醫療診所、金融產品，還是穩重一點比較好。
Photo by Josh Olalde on Unsplash
技術怎麼做？三種常見做法
做法一：WordPress 用外掛（最快）
WordPress 有內建的「維護模式」，執行 wp maintenance-mode activate 或用外掛例如 WP Maintenance Mode、SeedProd、Coming Soon Page & Maintenance Mode，都可以一鍵切換維護畫面。
優點：3 分鐘搞定、可以自訂畫面、有倒數計時器、有訂閱表單。
缺點：外掛品質參差，選錯外掛可能連 admin 都進不去。建議選下載數 10 萬以上、最近半年有更新的。
WordPress 在自動更新核心時本來就會建立一個 .maintenance 檔案觸發預設維護頁，那個預設頁很醜，強烈建議覆蓋 wp-content/maintenance.php 換成你自己的品牌版本。
做法二：Nginx / Apache 反向代理層切換（推薦）
如果你的網站是自架、或有用 Docker、或有反向代理，最乾淨的做法是在 Nginx 層做維護模式切換。原理：
- 準備一個純 HTML 的維護頁面
/var/www/maintenance/index.html，裡面含 Logo、聯絡方式、CSS 內嵌，不依賴任何後端。 - 在 nginx.conf 加一個判斷：
if (-f /var/www/maintenance.flag) { return 503; }error_page 503 @maintenance; - 要進維護模式時：
touch /var/www/maintenance.flag；要結束時：rm /var/www/maintenance.flag
這個做法的好處：後端不管掛不掛（就算 PHP 死了、資料庫升級中），維護頁一定顯示得出來。而且天然回傳 503 狀態碼，SEO 友善。
做法三：Cloudflare 頁面規則（零技術門檻）
如果你的網站已經用 Cloudflare 代理（有些主機商預設就開了），可以在 Cloudflare 的 Workers 或頁面規則設定：「當來源伺服器沒回應時，顯示這個備用頁面」。這叫 Always Online 或 Custom Error Pages 功能。
這個做法連 SSH 都不用登，適合非技術背景的老闆。缺點是自訂彈性比較低，但拿來當保底方案很划算——就算連你的主機商機房整個燒起來，訪客還是看得到品牌頁面。
常見的三個地雷
地雷一：狀態碼給錯
維護頁面一定要回傳 HTTP 503，不要回 200、不要回 404。回 200 Google 會以為你的網站正常但內容變成錯誤訊息開始降權；回 404 Google 會以為頁面消失開始從索引移除。
檢查方法：Chrome 開發者工具的 Network tab，看第一個 request 的 Status Code。或用 curl -I https://你的網址.com 看回傳的第一行。
地雷二：忘記 Retry-After header
Retry-After 告訴 Google「多久後再來」。單位是秒。設定 1800 就是 30 分鐘後、3600 就是 1 小時後。這個 header 加上去，Google 就會乖乖等。不加的話，Google 可能明天才來，中間流量計算會出問題。
地雷三：維護頁面自己也依賴那台掛掉的伺服器
看過很多案例：維護頁面裡面 Logo 圖檔連到 /uploads/logo.png，結果 Nginx 也在維護，圖片載不出來變成一個叉叉。或者維護頁面的 CSS 從被關掉的伺服器拿，整個頁面裸奔沒樣式。
維護頁面應該是完全自給自足的：圖檔用 base64 內嵌或 CDN、CSS 內嵌在 HTML 裡、字型用系統字型或 Google Fonts、不 call 任何後端 API。這樣就算整個機房只剩 Nginx 還活著，這一頁還是完美顯示。
Photo by Greg Rosenke on Unsplash
維護頁面的「進階玩法」
玩法一：加一個 Email 收信欄
寫一句「網站恢復後想被通知？留下 Email 我們寄給你」。看到維護頁面還願意留 Email 的訪客是超級精準的名單，比你花廣告費買來的還值錢。這一步不難做，用 Mailchimp、ConvertKit、或自己 Google Form 收都可以。
玩法二：把重點資訊留下
如果你的網站有幾個核心資訊，例如「地址、電話、營業時間、菜單」（餐廳）或「服務項目、報價區間、聯絡方式」（服務業），可以直接把這些放在維護頁面上。讓維護頁面本身也是一張迷你名片。
特別適合「品牌搜尋量高」的公司：訪客本來就是搜你名字進來，維護頁面能告訴他你在哪、營業到幾點、怎麼聯絡，這一頁就完成了任務。
玩法三：加倒數計時器
用 JavaScript 寫一個 30 分鐘倒數，或倒數到某個特定時刻。這個小效果讓「維護中」從一個模糊概念變成「還有 27:15 就好」，訪客等的意願會大很多。實作只要 20 行 code，網路上到處有範例。
該花多少時間做維護頁面？
對中小企業老闆來說，這個問題的答案是：做一次，用五年。維護頁面不需要常改，做好一次以後所有停機都用同一頁。所以花 3-4 小時把它做到位、驗證好 HTTP 狀態碼、測試好聯絡連結，是很划算的投資。
如果你的 IT 是外包給我們這種數位公司，可以直接請他們「幫我設計一個維護頁面 + 反向代理層的維護模式開關」，通常一個工作天可以搞定。價格不會太高，但這件事一輩子只做一次，之後每次升級都能安心切換。
結語：把停機時間變成品牌機會
網站停機是必然的——遲早會遇到主機商大機房斷電、遲早會遇到 WordPress 核心更新失敗、遲早會遇到資料庫要升級。差別只在，那 30 分鐘裡面，你把訪客晾在錯誤畫面前，還是把他接進一個專業、有品牌、能聯絡到你的維護頁面。
行動建議三件事：
1. 這週就打開你網站的網址，如果現在讓它停機，訪客會看到什麼？如果是瀏覽器內建錯誤畫面，趕快處理。
2. 準備一個純 HTML 維護頁面，含 Logo、電話、LINE、Email、預估時間佔位，先存起來備用。
3. 跟你的網站廠商（或我們）確認一下：伺服器的維護模式切換方式是什麼？切換時 HTTP 狀態碼是不是 503？
下次要停機時，只要 touch maintenance.flag，客戶就會看到一個讓他們願意等你的頁面。這件事做對，是中小企業能拿來跟大公司比拚的少數細節之一。