英文版網站怎麼做：中英文頁面互相對應、hreflang、語言切換，不裝翻譯外掛

最後更新：2026/10/15

民宿、茶行、牙醫診所、設計工作室，都有一個時間點開始想要英文版：外國客人來信、Google 地圖上出現英文評論。第一個念頭是裝翻譯外掛，WPML、Polylang 這些，然後發現要把全站幾百篇文章都翻一遍、外掛的設定頁有三十個分頁、年費要付、換主題還要重設。

多數小型網站需要的英文版沒那麼大：首頁、關於、服務或房型、聯絡，四到六頁就夠了。這種規模用「頁面對應」就好：中文頁和英文頁各是一個普通的頁面，用一段程式碼把它們對起來，程式自動在兩頁的原始碼放 hreflang 告訴 Google 這是同一內容的兩種語言、把英文頁的語言標記改成英文、放一個「English／中文」的切換連結。不用外掛、不用翻整站。

不想自己改？把這篇交給 AI

把這篇的網址（或全文）連同下面這段話貼給 AI：

我的網站是 WordPress。我想照下面這篇文章做英文版：只翻幾個頁面，把中英文頁面對應起來，輸出 hreflang 和語言切換。
請先問我：我要翻哪幾頁、英文頁的網址要用什麼開頭、選單要怎麼放英文版。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、頁面編輯頁的對應欄位怎麼填，以及改完怎麼確認。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

改之前先備份，密碼不要貼給 AI。

三種做英文版的方式

子目錄或子網域加翻譯外掛：全站翻譯，網址變成 /en/about/ 或 en.example.com，外掛管理每一篇的對應、選單、小工具。適合內容多、兩種語言都要常更新、而且有人力維護的網站。

多站台（WordPress Multisite）：一個 WordPress 裝兩個站，一個中文一個英文，各自獨立。適合兩種語言的內容和設計差很多的情況，管理也是兩倍。

頁面對應（這篇）：中英文各做幾個普通頁面，程式把它們對起來。適合五到十頁的英文版、內容不常變的小型網站。英文頁的網址建議用 /en/ 開頭的父頁面來放，例如建一個代稱 en 的頁面當父頁，英文的關於我們放在它底下，網址就是 /en/about/，整齊又方便以後搬去用外掛。

完整程式碼

// 第 90 篇：英文版網站：中英文頁面互相對應、hreflang、語言切換

// 1. 頁面編輯頁多一格「對應的另一個語言頁面 ID」，兩邊都要填
add_action('add_meta_boxes', function () {
    add_meta_box('mimi_lang', '語言對應', function ($post) {
        $pair = get_post_meta($post->ID, '_mimi_pair', true);
        $lang = get_post_meta($post->ID, '_mimi_lang', true) ?: 'zh';
        wp_nonce_field('mimi_lang', 'mimi_lang_nonce');
        echo '<p><label>這一頁的語言<br><select name="mimi_lang"><option value="zh"' . selected($lang, 'zh', false) . '>中文</option><option value="en"' . selected($lang, 'en', false) . '>英文</option></select></label></p>';
        echo '<p><label>另一個語言的頁面 ID<br><input type="number" name="mimi_pair" value="' . esc_attr($pair) . '" style="width:100%"></label></p>';
    }, ['page', 'post'], 'side');
});
add_action('save_post', function ($post_id) {
    if (!isset($_POST['mimi_lang_nonce']) || !wp_verify_nonce($_POST['mimi_lang_nonce'], 'mimi_lang')) {
        return;
    }
    update_post_meta($post_id, '_mimi_lang', $_POST['mimi_lang'] === 'en' ? 'en' : 'zh');
    update_post_meta($post_id, '_mimi_pair', (int) ($_POST['mimi_pair'] ?? 0));
});

function mimi_page_lang($post_id = null) {
    $post_id = $post_id ?: get_queried_object_id();
    return get_post_meta($post_id, '_mimi_lang', true) === 'en' ? 'en' : 'zh';
}

// 2. 英文頁面的 <html lang> 改成 en，瀏覽器、翻譯工具、讀屏軟體才知道這頁是英文
add_filter('language_attributes', function ($output) {
    return is_singular() && mimi_page_lang() === 'en' ? str_replace('lang="zh-TW"', 'lang="en"', $output) : $output;
});

// 3. <head> 裡放 hreflang：告訴 Google 這兩頁是同一個內容的中、英文版
add_action('wp_head', function () {
    if (!is_singular()) {
        return;
    }
    $id   = get_queried_object_id();
    $pair = (int) get_post_meta($id, '_mimi_pair', true);
    if (!$pair || get_post_status($pair) !== 'publish') {
        return;
    }
    $zh = mimi_page_lang($id) === 'zh' ? $id : $pair;
    $en = $zh === $id ? $pair : $id;
    echo '<link rel="alternate" hreflang="zh-Hant-TW" href="' . esc_url(get_permalink($zh)) . '">' . "\n";
    echo '<link rel="alternate" hreflang="en" href="' . esc_url(get_permalink($en)) . '">' . "\n";
    echo '<link rel="alternate" hreflang="x-default" href="' . esc_url(get_permalink($zh)) . '">' . "\n";
}, 1);

// 4. [mimi_lang_switch]：放在頁首或頁尾的語言切換連結
add_shortcode('mimi_lang_switch', function () {
    $id   = get_queried_object_id();
    $pair = (int) get_post_meta($id, '_mimi_pair', true);
    if (!$pair) {
        return '';
    }
    $label = mimi_page_lang($id) === 'zh' ? 'English' : '中文';
    return '<a class="mimi-lang-switch" href="' . esc_url(get_permalink($pair)) . '" hreflang="' . (mimi_page_lang($id) === 'zh' ? 'en' : 'zh-Hant-TW') . '">' . $label . '</a>';
});

程式碼放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。

四段各做了什麼

第 1 段在頁面和文章的編輯畫面右側加一個「語言對應」方塊：這一頁是中文還是英文、對應的另一個語言頁面的 ID。頁面 ID 在編輯頁的網址 post=123 看得到。中文頁填英文頁的 ID，英文頁填中文頁的 ID，兩邊都要填。

第 2 段把英文頁的 <html lang="zh-TW"> 改成 lang="en"。這個屬性影響的東西比想像多：瀏覽器決定要不要跳「翻譯此網頁」、讀屏軟體用哪一種語音、搜尋引擎判斷語言，都看它。

第 3 段在兩頁的 <head> 各放三行 hreflang：中文版的網址、英文版的網址、預設版（x-default，語言都不符合時給誰看，這裡用中文）。Google 看到這三行，就知道搜尋英文的人要給英文頁、搜尋中文的人給中文頁，不會把兩頁當成重複內容。兩頁的標記要互相指向對方，所以兩邊都要填對應 ID。

第 4 段是一個短代碼，印出「English」或「中文」的切換連結，中文頁連到英文頁、英文頁連到中文頁。放在頁首的選單旁、頁尾、或每一頁的最上面都可以；沒有對應頁的頁面不會印任何東西，不會出現連到空頁的連結。短代碼的放法在〈WordPress 自己寫短代碼〉。

測試結果

我們在本機測試站建「關於我們」（中文）和「About us」（英文）兩頁，互相填對方的 ID：

中文頁：<html lang="zh-TW">，<head> 裡有三行 hreflang（zh-Hant-TW 指中文頁、en 指英文頁、x-default 指中文頁），切換連結顯示「English」。
英文頁：<html lang="en">，三行 hreflang 一樣，切換連結顯示「中文」。

英文版還要注意的事

翻譯要像英文。機器翻譯的中式英文外國客人看得出來，重要的幾頁請人潤過，或用 AI 翻完請懂英文的人看一遍；〈AI 寫的文章一看就知道？〉裡去 AI 味的方法，英文也適用。

選單要分開。英文頁的選單如果還是中文項目，客人點不下去。做法是在「外觀 > 選單」另外建一個英文選單，用佈景主題的「選單位置」功能或條件式選單外掛，在英文頁顯示英文選單；簡單一點的做法是英文頁的內容最上面自己放幾個連結。

搜尋標題和說明也要英文。SEO 外掛的標題和說明欄位，英文頁填英文的；網站名稱如果是中文，英文頁的標題後綴記得改。這些欄位的作用在〈程式碼層的 SEO〉。

從五頁開始，比從一百頁開始更快上線

英文版做不出來，多半是因為想一次翻整站。先翻外國客人會看的幾頁：你是誰、你提供什麼、多少錢、怎麼聯絡，用頁面對應做好標記，兩週就能上線；之後英文客人多了，再換成翻譯外掛把全站翻完，這時候網址結構已經是 /en/ 開頭，搬過去不會斷連結。

如果你的店開始有外國客人，想做一個小而完整的英文版，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，可以替你規劃中英文頁面的對應和搜尋設定。MIMI 提供新北網頁設計服務，新北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。