Apache .htaccess 設定自訂 404 錯誤頁面完整教學

.htaccess 自訂 404 頁面：從入門到避坑指南

使用 Apache 的 .htaccess 設定自訂 404 錯誤頁面，是提升使用者體驗、保持品牌一致性的基本功。本文涵蓋基本設定、常見陷阱、進階技巧與除錯步驟。

基本設定（最簡單有效）

在網站根目錄建立/編輯 .htaccess：

# 設定 404 錯誤頁面（相對於 DocumentRoot）
ErrorDocument 404 /404.html

# 或使用 PHP 動態頁面
ErrorDocument 404 /404.php

404.html 範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁面不存在 - 我的網站</title>
</head>
<body>
    <h1>404 - 找不到頁面</h1>
    <p>抱歉，您請求的頁面不存在或已移動。</p>
    <a href="/"><- 返回首頁</a>
</body>
</html>

關鍵前置條件：Apache 必須允許 .htaccess 覆蓋

httpd.conf / apache2.conf 中對應目錄設定：

<Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All  # 關鍵：允許 .htaccess 覆蓋 ErrorDocument 等指令
    Require all granted
</Directory>

• AllowOverride All：允許所有指令覆蓋。
• AllowOverride FileInfo：僅允許檔案資訊類指令（包含 ErrorDocument），較安全。
• 修改主設定檔後必須重啟 Apache：systemctl reload apache2 或 apachectl graceful。

常見陷阱與解決方案

進階技巧

1. PHP 動態 404 頁面：記錄日誌、顯示建議連結

<?php
// 404.php
http_response_code(404); // 關鍵：確保回傳 404 狀態碼

$requestUri = $_SERVER['REQUEST_URI'];
$referer = $_SERVER['HTTP_REFERER'] ?? '直接存取';

// 記錄 404 日誌（資料庫/檔案/系統日誌）
error_log("404: $requestUri | Referer: $referer | IP: {$_SERVER['REMOTE_ADDR']}");

// 簡易建議：嘗試匹配相似網址
$suggestions = [];
// 實作邏輯：資料庫 LIKE 查詢、Levenshtein 距離等

// 輸出 HTML
?>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>頁面不存在</title></head>
<body>
    <h1>404 - 找不到頁面</h1>
    <p>請求網址：<code><?= htmlspecialchars($requestUri) ?></code></p>
    <?php if ($suggestions): ?>
        <p>您可能想找：</p>
        <ul>
        <?php foreach ($suggestions as $url => $title): ?>
            <li><a href="<?= $url ?>"><?= htmlspecialchars($title) ?></a></li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    <a href="/">返回首頁</a>
</body></html>

2. 多語系 404 頁面

# .htaccess
ErrorDocument 404 /404-handler.php

# 404-handler.php
<?php
http_response_code(404);
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'en', 0, 2);
$lang = in_array($lang, ['en', 'zh', 'ja']) ? $lang : 'en';
include "404.$lang.php";
?>

3. SPA (Vue/React/Angular) 專用：避免刷新 404

# .htaccess for SPA
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

# 真正的 404 由前端路由處理，或在 index.html 內判斷
# 此設定下 Apache 不會觸發 ErrorDocument 404

除錯檢查清單

1. AllowOverride FileInfo 或 All 已設定並重啟 Apache？
2. .htaccess 檔案權限正確（644），擁有者為 Apache 使用者？
3. 路徑為相對 DocumentRoot 的絕對路徑（以 / 開頭）？
4. 瀏覽器開發者工具 Network 分頁確認回應狀態碼為 404？
5. 自訂頁面內容正確顯示，無 500 錯誤？
6. 錯誤日誌 /var/log/apache2/error.log 無相關錯誤？

其他常見錯誤頁面設定

ErrorDocument 400 /errors/400.html
ErrorDocument 401 /errors/401.html
ErrorDocument 403 /errors/403.html
ErrorDocument 500 /errors/500.html
ErrorDocument 502 /errors/502.html
ErrorDocument 503 /errors/503.html

善用自訂錯誤頁面，不僅能提供友善體驗，還能透過日誌分析發現死連結、攻擊嘗試、爬蟲異常等問題，是網站維運的重要一環。