PHP 與 JavaScript 實現瀏覽器語言自動跳轉中英文頁面

前言

在開發多語言網站時，根據訪客瀏覽器的語言偏好自動導向對應語言版本，能大幅提升使用者體驗。本文將介紹兩種常見的實作方式：伺服器端的 PHP 方案與客戶端的 JavaScript 方案，並提供可直接套用的程式碼範例。

一、PHP 伺服器端語言偵測與跳轉

PHP 透過 $_SERVER['HTTP_ACCEPT_LANGUAGE'] 取得瀏覽器傳送的語言標頭，解析前幾個字元即可判斷主要語言。以下範例示範如何將中文使用者導向中文目錄，其餘語言導向英文目錄：

<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 5);
if ($lang === 'zh-cn' || $lang === 'zh-tw' || $lang === 'zh-hk') {
    header('Location: /zh/index.php');
} else {
    header('Location: /en/index.php');
}
exit;
?>

說明：

• 使用 header('Location: ...') 進行 302 重導向，比較 meta refresh 更符合 HTTP 標準且速度更快。
• 語言代碼可依需求擴充，例如 zh-tw（繁體中文）、zh-hk（香港中文）等。
• 務必在輸出任何 HTML 內容前呼叫 header()，否則會觸發「headers already sent」錯誤。

二、JavaScript 客戶端語言偵測與跳轉

若不想在伺服器端處理，或需在靜態 HTML 頁面實作，可使用 JavaScript 的 navigator.language 或 navigator.userLanguage（IE 專屬）取得語言代碼：

<script>
(function () {
    var lang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
    var targetUrl = '/en/'; // 預設英文

    if (lang.startsWith('zh')) {
        targetUrl = '/zh/'; // 中文包含 zh-cn, zh-tw, zh-hk 等
    } else if (lang.startsWith('de')) {
        targetUrl = '/de/'; // 德文範例
    }
    // 可依需求增加更多語言判斷

    window.location.replace(targetUrl);
})();
</script>

優點： 無需伺服器端支援，可直接放在靜態 HTML 的 <head> 中。

缺點： 依賴客戶端啟用 JavaScript；搜尋引擎爬蟲可能不會執行跳轉，影響 SEO。建議搭配 <noscript> 提供手動選擇連結。

三、最佳實踐建議

1. 優先使用伺服器端導向：確保搜尋引擎能正確索引各語言版本，且不依賴客戶端腳本。
2. 提供手動切換功能：在頁面明顯位置放置語言選單，讓使用者可覆蓋自動偵測結果。
3. 記住使用者選擇：使用 Cookie 或 Session 儲存使用者偏好，下次造訪時優先套用。
4. 正確設定 hreflang 標籤：在每個語言版頁面加入 <link rel="alternate" hreflang="x" href="...">，幫助搜尋引擎理解多語言結構。

四、完整範例：PHP + JavaScript 混合方案

為了兼顧 SEO 與使用者體驗，可採用「伺服器端優先，客戶端備援」的策略：

<?php
// 1. 先嘗試從 Cookie 讀取使用者偏好
if (isset($_COOKIE['lang_pref'])) {
    $lang = $_COOKIE['lang_pref'];
} else {
    // 2. 無 Cookie 時解析 Accept-Language
    $acceptLang = $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'en';
    $lang = substr($acceptLang, 0, 2); // 只取語言代碼 (zh, en, de...)
}

// 3. 映射到支援的語言目錄
$supported = ['zh', 'en', 'de', 'ja', 'fr'];
$targetLang = in_array($lang, $supported) ? $lang : 'en';

// 4. 若非 AJAX 請求且非目標語言頁面，則導向
$currentLang = basename(dirname($_SERVER['REQUEST_URI']));
if ($currentLang !== $targetLang && empty($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header("Location: /$targetLang" . $_SERVER['REQUEST_URI'], true, 302);
    exit;
}
?>
<!DOCTYPE html>
<html lang="<?php echo $targetLang; ?>">
<head>
    <meta charset="UTF-8">
    <title>多語言網站範例</title>
    <!-- hreflang 標籤 -->
    <link rel="alternate" hreflang="zh" href="https://example.com/z/<?php echo $_SERVER['REQUEST_URI']; ?>">
    <link rel="alternate" hreflang="en" href="https://example.com/en/<?php echo $_SERVER['REQUEST_URI']; ?>">
    <link rel="alternate" hreflang="x-default" href="https://example.com/en/<?php echo $_SERVER['REQUEST_URI']; ?>">
</head>
<body>
    <nav>
        <a href="/zh/<?php echo $_SERVER['REQUEST_URI']; ?>">中文</a> |
        <a href="/en/<?php echo $_SERVER['REQUEST_URI']; ?>">English</a> |
        <a href="/de/<?php echo $_SERVER['REQUEST_URI']; ?>">Deutsch</a>
    </nav>
    <h1>歡迎來到我們的網站</h1>
    <p>當前語言：<strong><?php echo $targetLang; ?></strong></p>
</body>
</html>

結語

自動語言跳轉是多語言網站的基礎功能。選擇 PHP 還是 JavaScript 取決於專案架構與 SEO 需求。現代最佳實踐傾向於伺服器端處理，並輔以 hreflang 標籤與手動切換功能，確保搜尋引擎與使用者都能順暢瀏覽對應語言內容。