404 頁面是品牌態度的縮影
當用戶看到一個純文字的「404 Not Found」頁面，他感受到的是：這個品牌做事不夠細心，或者根本不在意用戶體驗。
當用戶看到一個設計精良、語氣友善、提供清楚出路的 404 頁面，他感受到的是：這個品牌在每個細節上都用心。
404 頁面是個「觸達率低但印象分高」的設計機會——它不常被看到，但被看到的時候，往往是用戶已經有點沮喪的狀態，一個好的 404 頁面能立刻轉換這個負面情緒。
好的 404 頁面必備要素
1. 清楚說明發生了什麼（但不要技術術語）
「找不到這個頁面了！」比「HTTP 404 Error: The requested URL was not found on this server.」讓用戶好受得多。
用第一人稱的語氣說話：「哎呀，我們找不到這個頁面了」比「頁面不存在」更有人情味。
2. 保持品牌風格一致
404 頁面的設計要和整個網站的視覺系統一致——相同的顏色、字型、語氣。
很多網站的 404 頁面感覺像是從另一個網站複製來的，和整體品牌完全脫節。
3. 提供可行的出路
不要讓用戶「死在」404 頁面上。提供：
- 回首頁的大按鈕（最重要）
- 搜尋功能（如果你的網站有）
- 3–5 個熱門頁面的連結（服務、作品集、部落格）
- 聯絡連結（如果用戶需要幫助）
4. 加入品牌個性
404 頁面是品牌展現幽默感或獨特個性的機會。你不需要「嚴肅」地對待錯誤頁面。
好的範例：
- 設計工作室：「這個頁面跑去度假了，讓我們帶你回正確的方向」
- 科技公司：「404：找不到，就像那個昨天的靈感……」
- 餐廳品牌：「這道菜今天沒有供應，但還有很多其他選擇」
語氣要和你的品牌調性一致——不是每個品牌都適合幽默，但可以選擇「友善」作為基調。
5. 視覺設計
404 頁面通常有較大的創作自由度。常見的有效設計方向：
- 大字的「404」搭配品牌插圖或動畫
- 品牌吉祥物在「找不到東西」的場景中
- 反轉主題（例如像素化的「遊戲失敗」畫面，適合科技品牌）
- 簡潔的大圖 + 友善文字 + 清楚 CTA
讓 404 頁面也能追蹤
在 GA4 中追蹤 404 頁面的訪問，可以幫你發現：
- 哪個 URL 最多人訪問 404（代表你有失效連結需要修復）
- 404 之後用戶去了哪裡（代表你的出路設計是否有效）
設定方法：在 GA4 中，查看「頁面 + 頁面標題」報告，篩選頁面標題包含「404」或「找不到」的頁面。
Next.js 中的 404 頁面
在 Next.js App Router 中，在 app 目錄下建立 not-found.tsx 文件，這個組件就會在訪問不存在的路由時顯示。
這個文件可以使用你的 Navbar 和 Footer 組件，保持導覽一致性，讓用戶容易找到出路。
定期檢查失效連結
404 頁面設計好了，更重要的是減少用戶看到它的機會。
每季用 Screaming Frog 或 Google Search Console 的「涵蓋範圍」報告檢查你的網站是否有產生 404 錯誤的連結：
- 在 Search Console 中，「指標」→「涵蓋範圍」→「排除」→ 找到「找不到（404）」的頁面
- 修復：刪除或更新這些失效連結，或對已不存在的頁面設定 301 重定向