官網『語系切換器』(Language Switcher) 設計完整攻略：中小企業如何用一顆下拉選單同時做好海外訂單、SEO 與訪客第一印象
外國客戶點進來卻看不懂、Google 只認得一個語系？一顆看似簡單的語系切換器，決定了海外訂單、SEO 收錄與品牌專業感的分水嶺。
你以為的「多語系」，其實是慢慢把海外訂單送給對手
很多中小企業老闆做官網時，都會問一個問題：「我要不要做英文版？」，然後聽到報價心臟一縮，最後常見的做法有兩種——第一種是直接放棄，全站只有中文；第二種是花錢做了英文版，但在頁面右上角放一顆小到看不見的「EN」按鈕，覺得「有做就好」。
結果，你會發現一個奇怪的現象：明明公司產品是外銷型的、明明產品照拍得像國際品牌、明明業務辛苦帶著客戶到 Google 搜自家品牌，可是海外客戶點進官網之後就消失了；LINE 也沒進來詢問、聯絡表單也沒動靜。你以為是產品沒吸引力，但很多時候，真正卡住的其實是那顆你隨手放上去的「語系切換器」。
它看起來只是一個下拉選單、或者一顆小旗子，可是這一顆按鈕背後牽涉到：訪客第一眼的信任感、Google 對你網站的收錄邏輯、後台維運的成本、以及未來要不要拓展新市場時的擴充彈性。這篇文章想跟你聊清楚：一顆「語系切換器」，中小企業到底要怎麼做才不會白花錢。
Photo by Kyle Glenn on Unsplash
先搞清楚：訪客其實不是靠「按下語系按鈕」進來你的網站
這是最多老闆誤會的地方。你可能會想：「我先讓網站進來預設是中文，客戶如果是外國人再自己按 EN 就好啦」——聽起來很合理，但實際上，超過 8 成的海外訪客不是從你的首頁進來的。
他們是從 Google 搜「你產品的英文關鍵字」找過來，落地在某一個內頁；或者是點了 LinkedIn 貼文、Meta 廣告、Email 裡的連結，直接跳進特定頁面。這意味著：如果你的英文版跟中文版是「同一個網址」、只是靠一顆切換按鈕在前端換文字，Google 只會收錄其中一個版本，另一個版本等於不存在。
換句話說，語系切換器要做對，第一件事不是「按鈕放哪裡好看」，而是「每個語系要有自己獨立的網址結構」。這是後續所有事情的地基。做錯了，畫面再漂亮都是白搭。
三種常見的網址結構，中小企業該怎麼選？
目前業界常見的多語系網址結構有三種，各有優缺點，我用白話幫你比較：
第一種：子網域（en.yourdomain.com）。優點是英文版跟中文版在技術上完全獨立，可以放在不同伺服器、用不同的 CMS，甚至交給不同團隊維護。缺點是 SEO 權重比較分散，Google 有時候會把 en.yourdomain.com 當成另一個網站，主網域累積的信任度沒辦法完整帶過去。適合有專門海外行銷團隊、預算充足、想要各國獨立行銷的品牌。
第二種：子目錄（yourdomain.com/en/）。這是我最常推薦給中小企業的做法。優點是共用同一個網域的 SEO 權重，主網域衝上來的排名可以幫助英文版一起加分；管理成本相對低，通常在同一個後台就搞定。缺點是伺服器設定要小心，如果沒設對 hreflang 標籤，Google 可能會誤判成重複內容。
第三種：URL 參數（yourdomain.com/?lang=en）。優點是最省事，很多套版工具直接支援。但缺點很致命——Google 不太喜歡這種寫法，很多爬蟲會忽略參數版本，等於英文版根本不會被收錄。除非你完全不在意海外 SEO、只是想「有個切換就好」，否則不要用這種做法。
簡單結論：中小企業預算有限、想要英文版真的能被 Google 找到，選子目錄結構，配上正確的 hreflang 設定，投報率最高。
Photo by Hal Gatewood on Unsplash
語系切換器擺哪裡？視覺該怎麼設計？
網址結構搞定之後，才輪到「按鈕本身長什麼樣」這件事。這裡有幾個實務上很常踩到的坑：
不要用國旗代表語言。這是最容易被忽略的細節。語言跟國家並不是一對一的關係——英文有英國、美國、加拿大、澳洲；西班牙文有西班牙、墨西哥、南美各國。用一面國旗代表一種語言，本身就會遺漏或誤觸到某些客戶。做外銷生意的公司，這種可能引起政治敏感或文化爭議的細節一定要避開。建議直接用語言本身的名字：中文寫「中文」、英文寫「English」、日文寫「日本語」，不要翻譯成訪客看不懂的字。
位置放在右上角導覽列，是全球約定俗成的位置。訪客會下意識往那邊找。如果你把它藏在頁尾、或者做得很小很淡，海外訪客常常會直接按上一頁離開。切換器的字級不要小於 14px，點擊區域至少 40x40 像素，手機上才點得到。
下拉選單 vs. 並列按鈕的選擇。如果只有 2-3 個語系，直接並列顯示「中文 | English | 日本語」最清楚，訪客一眼就知道有哪些選項。如果超過 3 個語系，才使用下拉選單，避免導覽列被塞爆。
切換之後要「停在原本那一頁」。這是最常被忽略、但體驗差距最大的細節。訪客滑到「產品介紹 > 型號 A」的中文頁，按了 EN 之後，理想狀態是跳到「Products > Model A」的英文頁；但很多網站按了 EN 就會把訪客丟回首頁，等於逼客戶再找一次自己剛剛在看什麼。這是把訪客推走的最快方式，開發時一定要交代清楚。
hreflang 標籤：讓 Google 認識你有幾個版本
做多語系網站有一個技術細節，很多老闆聽都沒聽過，但工程師沒做對就會出事，那就是 hreflang 標籤。它的作用是告訴 Google：「這個頁面有中文版跟英文版，中文版在這裡、英文版在那裡，請你根據使用者的語言喜好顯示對應的版本。」
沒做 hreflang 會發生什麼事？最常見的狀況是：外國客戶在 Google 搜英文關鍵字，結果 Google 卻把你的中文頁面丟給他看，因為 Google 不知道你有英文版存在；或者 Google 把中英文版當成重複內容，兩邊排名都被壓下去。這對外銷型公司來說，等於是白花錢做了英文版卻沒發揮 SEO 效果。
hreflang 的語法本身不複雜，就是在每一頁的 <head> 加上幾行標籤，指明「這個頁面對應到哪些語系的哪些網址」。中小企業自己做網站時如果找的是套版工具（例如 WordPress + 多語系外掛），大多可以自動生成；如果是客製化開發，就要跟工程師確認這一項有沒有做，別讓「英文版寫了但沒人看到」這種悲劇發生。
要不要做「自動偵測語系」？我的建議是不要
有些網站會偵測訪客的瀏覽器語言、或者 IP 位置，然後自動幫他切換到對應的語系版本。聽起來很貼心，但這是一個雙面刃。
問題在於：偵測不一定準。例如一個在台灣工作的美籍工程師，他的 Chrome 設定是英文，但他要查你公司的中文技術文件，結果一進網站就被強制轉去英文版，反而找不到他要的內容；或者一個台灣使用者用了 VPN，IP 被判成日本，結果被丟到日文版看不懂。
更好的做法是：第一次進來的訪客給他一個「輕量提示」，例如頁面上方跳出一條淡淡的橫幅：「偵測到您可能想看英文版，要切換嗎？」讓訪客自己決定，也記錄他的選擇，下次就不再問。這樣既尊重訪客、也不會用強制邏輯把人氣走。
後台維運才是真正的成本大魔王
做多語系網站，最容易被低估的成本不是「開發費」，而是「上線之後的維運成本」。老闆常常一開始很興奮做了英文版，結果三個月後中文版更新了一波產品資訊、加了三篇部落格文章，英文版卻通通沒跟上；訪客點進英文版看到的還是半年前的舊產品，反而覺得公司不專業。
Photo by Mario Gogh on Unsplash
所以在決定要不要做多語系之前，先問自己三個問題：誰負責翻譯？多久更新一次？沒跟上時要怎麼提醒？如果內部完全沒有能寫英文的同事、也不打算長期委外翻譯，那英文版與其做完之後爛在那邊、變成活廣告告訴客戶「這家公司很久沒更新了」，不如一開始就聚焦在中文版做好、把海外客戶用 Email 或簡單一頁式英文介紹接下來。
如果決定要做，後台要具備幾個基本功能：每一篇文章／每一個產品頁都有「翻譯狀態」欄位（未翻譯、進行中、已上線）；後台可以清楚看到哪些頁面英文版還沒跟上；發布中文版時可以直接建立英文草稿當作提醒。這些是讓多語系網站能「活得下去」的關鍵。
給中小企業老闆的行動建議
如果你的公司符合下列狀況中的任一項：有外銷業務、有海外經銷商、有國際展覽固定接觸外國客戶、產品照片放到 Google 圖片會被外國人找到——那就值得認真規劃多語系官網。反之，如果目前業務 95% 都在台灣、也沒有海外拓展的短期規劃，可以先把資源花在把中文版做好。
要開始的話，建議這樣做：第一步先確定要做哪幾個語系（別貪心，通常中文＋英文起手最務實）；第二步選定子目錄的網址結構、把 hreflang 設定好；第三步設計右上角的語系切換器，用語言原文命名、切換後停在同一頁；第四步排定內部翻譯／維護流程，不要開了英文版之後放著不管。做對這幾件事，你的官網才有機會真的把海外訪客變成訂單。
一顆看似簡單的「EN」按鈕，其實決定了你的公司在 Google 上有沒有第二個市場、你的官網對海外客戶有沒有專業感、你的維運團隊要不要為了它每個月多花時間。這不是設計題，是經營題。做網站前想清楚這一件事，比多花幾萬塊做華麗動畫還值得。