<html lang> 基本語法與功能介紹
lang 是 HTML 的全球屬性之一,用於指定元素內容的語言。通常我們會將它添加在頁面的根元素 <html> 上,以宣告整個文件的預設語言。例如,一個英文頁面應在 HTML 標籤中標明 lang="en",而中文繁體頁面則可能使用 lang="zh-Hant"(或地區代碼如 zh-TW 代表繁體中文-臺灣)。基本語法相當直觀:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is an English webpage.</p>
</body>
</html>
在上例中,<html lang="en"> 表示整個頁面內容為英文。瀏覽器、搜尋引擎以及輔助技術(如螢幕閱讀軟體)會據此將本頁視為英文內容來處理。lang 屬性值通常遵循ISO 639-1雙字母語言代碼(如英文en、法文fr、中文zh等),並可根據需要擴展為更精細的BCP 47語言標籤。例如:
- en-US 表示美式英文(英文＋美國區域代碼)。
- en-GB 表示英式英文。
- zh-Hant 表示中文繁體(漢字正體書寫系統)。
- zh-Hans 表示中文簡體。
- zh-TW 表示中文(臺灣地區,繁體)。
- zh-CN 表示中文(中國地區,簡體)。
lang 屬性不僅可以用在 <html>,也可用在任何 HTML 元素上,讓您標記文件中局部內容的語言。重要:一個頁面的 <html> 根元素只能有一個主要語言。但如果頁面某些片段是其他語言,您應在適當的元素上加上 lang。例如,英文頁面中引用一句法文,可使用 <span> 標記該句法文:
<p>He whispered, <span lang="fr">« Je t'aime »</span>, before leaving.</p>
上例中,我們在 <span> 上設置 lang="fr",標明引號內是法文內容。這樣瀏覽器或螢幕閱讀器就能切換到法語語音或字形來呈現「Je t'aime」,而不會把它當成英文唸錯。總之,<html> 的 lang 宣告定義了整體頁面的語言環境,而局部不同語言則透過內嵌元素的 lang 來覆蓋。務必將 lang 屬性放在 <html> 標籤上,而不是僅放在 <body>——因為 <body> 無法涵蓋文件 <head> 中的文字(例如 <title> 標題中的文字也需要正確語言)。這些簡單的語法規則是打造多語系網站的基礎,下面我們來看看在多語言網站中如何正確設定每個頁面的 lang。
在多語系頁面中正確設定 lang 屬性
建置多語系網站時,良好的策略是為每種語言提供獨立的頁面或路由,並確保每個頁面的 <html lang> 正確對應該頁內容的語言。換言之,不同語言版本應該有各自的 HTML 文件,而不是在同一頁面上同時呈現多種語言的長篇內容(這對使用者體驗和SEO都較差)。常見的做法包括:為不同語言使用不同的子網域或子目錄(例如 en.example.com 放英文版,tw.example.com 或 example.com/tw/ 放繁體中文版),或者使用URL路徑區隔(例如 example.com/zh/ vs example.com/en/)。無論採用何種URL結構,關鍵是在對應的頁面內部正確設置 lang。
假設我們有一個網站提供英文和繁體中文兩種語言,各自有一個首頁。英文版首頁的HTML可能如下:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 英文版頁面的 head 內容 -->
<meta charset="UTF-8">
<title>Welcome - My Site</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is the English version of our homepage.</p>
</body>
</html>
而繁體中文版首頁對應的 HTML 檔案則需將 lang 設為繁體中文,例如:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<!-- 中文版頁面的 head 內容 -->
<meta charset="UTF-8">
<title>歡迎光臨 - 我的網站</title>
</head>
<body>
<h1>歡迎來到我們的網站</h1>
<p>您現在看到的是首頁的繁體中文版本。</p>
</body>
</html>
如上所示,每個語言版本頁面的 <html> 標籤都應使用適當的語言代碼。切記在複製模板時修改這個屬性——不少開發者在建立多語言頁面時,可能因複製英文模板忘記更改 lang,導致所有語言版本的頁面都錯用了同一語言代碼。這種錯誤會讓搜尋引擎和瀏覽器難以判斷每頁的真正語言。
如果同一頁面中出現多種語言(例如雙語對照或法律條文提供多語版本等情況),建議仍以主要語言作為 <html lang> 的值,並確保為其他語言內容加上標記。比方說,一個主要為英文的頁面底部附有一段西班牙文聲明,那麼整頁 lang="en",但在包裹西班牙文聲明的元素上加 lang="es"。切勿嘗試在單一頁面的 <html> 標籤上列出多個語言(例如 lang="en, fr" 這樣的做法是無效的):HTML 規範中 lang 屬性只能接受一個語言代碼。遇到這類情況,正確做法是將不同語言的內容分隔到各自的元素,各自標註 lang。
另一方面,在多語系網站中切換語言時,通常會透過導覽連結讓使用者跳轉至另一語言的對應頁面。如果您的網站使用JavaScript 即時切換語言(如單頁應用程式 SPA 中載入不同語言的字串),務必要動態更新 <html> 的 lang 屬性以反映當前語言,確保後續內容的語意正確。總的來說,為不同語系的每個頁面正確設定 lang,是多語言網站架構的基石。這不僅對使用者明確,也為各種系統正確解讀您的頁面語言提供了依據。
lang 對於無障礙(Accessibility)的影響
正確運用 lang 屬性對網頁無障礙體驗有著實質的影響。無障礙(Accessibility)指確保各種身心障礙者都能順利使用網站。其中一個重要工具是螢幕閱讀軟體(Screen Reader),它會將頁面內容轉化為語音或點字輸出給視障使用者。當前端開發者為網站設定適當的語言屬性時,螢幕閱讀軟體能據此切換語音語調與發音規則,以正確語言朗讀內容。例如:
- 如果頁面標記為中文 (lang="zh-Hant"),螢幕閱讀軟體就會選擇中文語音,以正確的語調朗讀中文字;反之,若標記錯誤或缺失,軟體可能預設用英語語音讀中文,導致使用者聽到一連串難以理解的發音。
- 當頁面中途遇到另一種語言的片段(例如英文頁面中有一段德文引言),只要為該段文字加上對應的 lang(如 lang="de"),螢幕閱讀器便能自動切換到德語發音朗讀該段,引導視障者正確理解內容的語言轉換。
可見,lang 屬性對視障使用者非常友善:沒有它,他們可能聽不懂整個頁面;有了正確的語言標記,他們能順利跟上內容轉換。此外,語言宣告也是WCAG(Web內容無障礙指引)2.1的要求之一。根據WCAG 2.1規範的成功準則3.1.1,每個網頁都應該能夠以程式方式判斷其預設語言。也就是說,開發者必須提供像 lang 這樣的標記來讓機器知道「這個頁面主要是什麼語言」。倘若遺漏,則視為未達到無障礙合規標準的一項失誤。
除了螢幕閱讀器,lang 屬性還能幫助其他技術正確呈現文字。例如,某些瀏覽器或作業系統會根據語言選擇適當的字體字形,或決定斷字和換行規則;影音播放器插件等也可能用到語言資訊以顯示字幕或字串。當然,如果您的網站使用從右到左書寫的語言(如阿拉伯文、希伯來文),除了指定 lang 外,也務必加上 dir="rtl" 屬性,確保文字布局方向正確。同樣地,如果有左至右的內嵌段落,也可用 dir="ltr" 標明方向。雖然 dir 是另一個屬性,但它往往和 lang 並用:lang 解決「讀什麼語言」,dir 解決「閱讀方向」。兩者搭配能全面提升雙語及多語內容的可及性。
總而言之,正確標註語言對無障礙使用者是至關重要的。它讓網站真正做到以使用者為中心,照顧到不同語言和需求的族群。對開發者來說,添加 lang 不費吹灰之力,卻能大幅改善一些使用者的體驗,何樂而不為?
lang 屬性與搜尋引擎優化(SEO)的關聯
除了直接的使用者體驗,lang 屬性也在搜尋引擎優化(SEO)方面扮演一定角色。搜尋引擎在索引網頁時,會嘗試判斷內容所使用的語言,以便在用戶搜尋時提供適合語言的結果。正確使用 lang 可以為搜尋引擎提供明確的線索,告訴它「這個頁面是某種語言寫成的」,從而幫助搜索引擎將您的頁面對準正確的受眾。例如:當使用者以西班牙語搜尋某資訊時,搜索引擎傾向提供語言標記為西班牙文(lang="es")的網頁,因為這些內容更可能符合使用者偏好。若您的西班牙文內容頁面缺少語言標記,搜尋引擎雖然可能仍能憑內容自動判斷語種,但明確的標記會讓這個過程更可靠。
然而,需要說明的是:在Google等主要搜尋引擎的排名演算法中,lang 屬性本身並非一個直接的排序因素。Google 官方曾表示,他們在處理多語言網站時,更看重另一個標籤——hreflang(稍後會說明)——來識別不同語言版本的對應關係,而非單靠 <html lang> 判斷。但是,這絕不表示 lang 不重要:一方面,其他搜尋引擎如 Bing 確實會參考 lang 或 <meta http-equiv="content-language"> 等標記來分類網頁語言;另一方面,lang 是一項基本的結構化資訊,Google 雖然主要依賴 hreflang 來避免多語言內容被誤判為重複內容,但也建議站長在每頁正確設置 lang 以保持一致性。
以下是 lang 屬性對 SEO 可能產生的幾點影響:
避免重複內容懲罰: 當您的網站提供同一內容的多種語言版本時,從純文字角度看,這些頁面的內容非常相似。若沒有語言區分標記,搜尋引擎可能誤認為您在不同URL重複發佈相同內容而降低排名。有了 lang(以及更完善的 hreflang 註記),搜索引擎能理解這些頁面只是語言不同的對應版本,而非惡意重複,從而正確地索引各語言版本並避免懲罰。換句話說,lang 是讓機器知道「這不是副本,而是譯本」的第一步。
改善使用者體驗,間接提升SEO: 搜尋引擎的終極目標是提供良好使用者體驗。當您的網頁正確標注語言後,搜索結果頁(SERP)在顯示摘要時也能挑選對應語言的片段,使用者點進來後不會大失所望。另外,如果使用者透過搜尋引擎進入您的網站時,看到的是符合他們語言偏好的內容,他們停留時間更長、跳出率更低,這些使用者行為指標都是SEO考量的因素。因此,從長遠看,語言正確標記有助於提升相關性和使用者滿意度。
與 hreflang 標籤搭配: hreflang 是放在 <head> 裡的連結標籤 (<link rel="alternate" hreflang="...">),用來通知搜索引擎「某URL有其他語言或地區的版本」。這對多語系網站的SEO至關重要。例如,英文頁面可以透過一組 <link rel="alternate" hreflang="zh-TW" href="..."> 來指向繁體中文版,反之亦然。雖然 hreflang 才是Google區分語言版本的主要依據,但它依賴於每個頁面的語言宣告相符。理想情況下,您的每個語言頁面都同時具備正確的 <html lang> 和相應的 <link hreflang> 註記。如此一來,搜尋引擎在抓取頁面時,<html lang> 能立即表明語言,而爬取 head 裡的 hreflang 列表又能建立多語版本之間的關聯,兩者相輔相成。
綜上所述,儘管單靠 lang 屬性不會讓您的網站排名暴漲,但它是多語言SEO戰略中不可或缺的一環。正確標注語言有助於搜索引擎理解與歸類您的內容,避免不必要的誤判。同時,它為使用者提供更精確的資訊匹配,間接提升網站的信譽和體驗。記住:SEO 是由無數細節組成的,語言標記就是其中一個細節——簡單卻必須做好。
多語系網站架構的常見錯誤與最佳實務
打造多語系網站的過程中,開發者常會碰到一些陷阱和盲點。以下我們先列出常見錯誤,接著給出相應的最佳實務建議,協助您避開這些問題並採用正確作法。
常見錯誤
使用了錯誤或不存在的語言代碼: 這是最普遍的問題之一。開發者可能不熟悉標準代碼,導致手誤。例如,有人錯把英文標記成 lang="eng"(正確應為en),或者用lang="ch"試圖表示中文(正確應為zh)。又比如想標示繁體中文卻寫成lang="tw"(國家代碼TW本身不等於語言,需要寫成zh-TW)。任何不符合標準的代碼都無效,等同於沒標。還有一類常見疏失是大小寫或格式錯誤:根據慣例,語言代碼使用小寫,地區代碼使用大寫且用連字號連接,例如en-US。如果寫成en-us或EN_us雖不至於完全無效,但不符合標準,可能造成解析混亂。
遺漏 lang 屬性(尤其是預設語言): 有些網站乾脆沒在 <html> 標籤上聲明語言,可能是疏忽或認為只用一種語言就不需要標明。缺少語言宣告會讓瀏覽器和搜尋引擎去猜測內容語種,在多語系架構下尤為危險。這種錯誤在多語言網站中更嚴重——因為各頁語言不同,每頁都應有自己的語言標記,少任何一頁都可能影響該語言用戶的體驗和SEO。
語言標記不一致: 這裡包含幾種情況:(a) 開發者在同一頁不同地方用了衝突的語言代碼,例如 <html lang="es"> 但頁內某重要元素又寫了 lang="en"(不應該隨便在非必要元素上重複定義主要語言,更不該不一致);(b) 如果使用 XHTML 或其它需要 xml:lang 的情境,lang 和 xml:lang 屬性值不相同(應該設為相同值以避免矛盾);(c) 網站使用了 hreflang 連結不同語言頁面,但沒有跟各頁自己的 lang 對上,例如英文頁 <html lang="en"> 卻用 hreflang="en-GB"(英國英文)鏈結,或者索性漏掉某些語言的 hreflang 導致對不上。這些不一致會讓機器摸不著頭緒,不知道究竟哪個才正確。
未標記頁面內的次要語言內容: 例如一篇主要為中文的文章中引用了一句原文英文格言,但開發者沒有用 <span lang="en"> 包起來,只是直接放在段落中。這種情況下,螢幕閱讀軟體會用中文語音讀那句英文,發音錯亂;搜尋引擎在索引時也可能對該部分文字的語言產生誤判。又或者網站有一個語言切換下拉選單,列出「English, Español, Français…」等語種,如果沒對每個選項標上對應的語言(例如 <option lang="es">Español</option>),則技術上那串西班牙文單字在標記上仍被當成主要語言內容的一部分,同樣存在可及性隱患。凡出現與頁面主要語言不同的文字,都應明確標記。
忽視文字方向與其他國際化屬性: 如前節所述,在多語系網站中,如果包含中東等右至左語言內容而沒有使用 dir="rtl",只靠 lang 是不夠的。這也算是一種常見遺漏的錯誤。另一個是使用舊的 <meta http-equiv="Content-Language"> 標籤試圖聲明語言:早期做法是在 HTML <head> 放一行 <meta http-equiv="content-language" content="en">。但這做法現在已過時且可能引發混亂(特別是對於多語內容,meta標籤無法局部應用)。W3C 明確建議不要使用 meta 或 HTTP header 去宣告內容語言,而應以 lang 為準。因此,如果您的頁面存在這類 meta 標籤但 <html> 沒有正確的 lang,就屬於捨本逐末、標記錯誤的案例。
最佳實務
為避免上述錯誤,以下是構建多語系網站時的幾項最佳實踐:
- 永遠為每個頁面設定正確的 <html lang>: 將這視為標配。不管您的網站是單一語言還是多語言,每個頁面的 lang 都應明確且正確。對多語系網站而言,這意味著一旦製作新的語言版本頁面,就馬上在該頁的 HTML 標籤加上正確的語言代碼。習慣在專案啟動時就把這件事納入檢查清單,久而久之就不容易遺漏。
- 使用標準的語言代碼與格式: 依照 BCP 47 標準選取語言代碼。通常格式為「語言-地區」,語言使用ISO 639-1的兩位小寫字母,地區(國家/地區)使用ISO 3166-1的兩位大寫字母,中間以連字號-相連。例如:日文(日本)是ja-JP,德文(德國)是de-DE。若需要指定腳本(例如繁簡中文),則語言-腳本-地區皆可用:zh-Hant-TW 表示繁體中文(台灣),zh-Hans-CN 表示簡體中文(中國)。雖然完整標籤可以很長,但越精確越能避免歧義。切勿自行杜撰代碼或使用過時非標準代碼(如用 zh-CHT 企圖表示繁體中文就是過時的用法)。
- 確保多處語言設定一致: 在需要同時使用多種語言標記的情境下,務必保持一致性。例如XHTML文件中同時使用了 lang 和 xml:lang,兩者的值必須相同,避免瀏覽器解析XML時產生歧義。如果網站使用了 hreflang 連結不同語言版本頁面,那麼 hreflang 的值也應與對應頁面的 lang 保持一致。
- 局部語言轉換時明確標記: 當頁面局部出現其他語言時,使用包裹元素(例如 <span> 或 <div>)並加上適當的 lang 屬性來標示。不要嫌麻煩,這對無障礙與正確呈現至關重要。
- 同步更新語言標記與內容: 如果您的網站內容會隨使用者選擇語言即時替換(例如單頁應用的前端路由切換,或透過AJAX載入另一語言的文本),請記得在程式中同步更新 <html> 的 lang。
- 實施 hreflang 提升多語SEO: 若網站有多語版本,建議在每個版本頁面的 <head> 中加入對應其他語言版本的 hreflang 標記。
- 測試與驗證: 利用工具來檢驗您的語言標記是否正確。一些線上驗證服務(如W3C Markup Validator)或瀏覽器擴充套件可以檢查頁面的 <html lang> 是否存在且有效。
遵循以上最佳實務,您的多語系網站將具備清晰的語言結構,既避免了常見陷阱,又為使用者和搜索引擎提供了明確的一致性。正確使用 <html lang> 看似細節,卻體現了網站對不同語言使用者的尊重與照顧。
真實案例分析(知名網站的最佳實作)
理論之後,讓我們看看現實中知名網站是如何實踐這些原則的,從中觀察最佳實作的樣貌。
案例一:維基百科(Wikipedia)
作為全球最大的多語言協作百科,維基百科在語言處理上堪稱經典範例。維基百科為每種語言提供獨立的子網域(例如英文是 en.wikipedia.org,中文是 zh.wikipedia.org)。打開英文維基百科條目,您會看到頁面HTML起始為 <html lang="en">;而在中文維基百科,則是 <html lang="zh-Hant">(繁體中文)或 <html lang="zh-Hans">(簡體中文),視您選擇的字體版本而定。維基百科甚至針對中文語言內的繁簡差異提供了動態轉換,但在HTML標記上仍然保持語言標籤的一致與正確。例如,中文維基百科條目預設以繁體呈現就會標記 zh-Hant,使用者切換到簡體後(透過維基的轉換功能)lang 屬性也會同步更新為 zh-Hans,確保螢幕閱讀器等輔助工具即時調整發音。每個維基頁面的側欄還列出該條目的其他語言版本連結(Interlanguage links)。那些連結的文字是各自語言寫就的條目標題,並且通常都有對應的 lang 屬性或 hreflang 註記,告訴瀏覽器「這串字是某某語言」。透過這種架構,維基百科成功地將上百種語言的知識井然有序地組織在一起——使用者能輕鬆切換語言獲取資訊,而各種自動化系統也能準確地按語言對內容進行分類和呈現。
案例二:Apple 官網
蘋果公司的官方網站(apple.com)提供多國語言與地區版本,也是多語系網站架構的典型案例。Apple 採用了子目錄方式區分不同地區語言,比如美國英文版是 apple.com(對應 <html lang="en-US">),臺灣繁體中文版是 apple.com/tw/(對應 <html lang="zh-TW">),中國大陸簡體中文版是 apple.com/cn/(對應 <html lang="zh-CN">),等等。以 Apple 台灣站首頁為例,檢視其原始碼會發現起始標籤為:
<html lang="zh-TW" xml:lang="zh-TW" ...>
可以看出 Apple 注意在 HTML 標籤上同時設置了 lang 和 xml:lang(兼容XHTML的寫法),值均為繁體中文(台灣)代碼。這與網站URL所表示的地區/語言完全一致。更值得一提的是,Apple 網站的 <head> 裡列出了大量 hreflang 連結,覆蓋全球各國版本。例如,在台灣站的head中,你會見到一系列 <link rel="alternate" hreflang="en-US" href="https://www.apple.com/">(指向美國英文版首頁)、hreflang="zh-CN" href="https://www.apple.com/cn/"(指向中國站首頁)、以及日文版、法文版、德文版等等的連結。這些 hreflang 壓縮了Apple全球各語言地區站點之間的關係網絡,確保搜尋引擎明白哪些URL是對應的不同語言版本,同時也提供了用戶在搜尋結果中直接跳到母語版本的機會(例如在法國搜尋Apple,Google可能直接顯示Apple法語站而非英語站)。Apple 對語言屬性的運用相當嚴謹:HTML 內正確使用語言及地區碼,並輔以結構化的互聯標記,這正是大型跨國網站在SEO和體驗上都做到頂尖的祕訣之一。
案例三:其他網站速覽
還有許多國際性網站採用了類似的最佳實踐。例如 Google 搜尋頁在不同語言下有不同的網域(google.com.tw、google.fr等),其首頁HTML都使用對應語言代碼(繁體中文用 lang="zh-TW"、法文用 lang="fr")。Facebook 與 Twitter 等社群平台則多語言共存在同一網域中,靠用戶設定呈現不同語言介面,但他們仍會在HTML上標註正確的界面語言,甚至每則貼文內容若包含不同語言也可能帶有相應標記。這些巨擘網站無一不說明了一件事:正確使用語言標記是專業網站的基本素養。從維基百科的知識共享到Apple商業網站的行銷,再到Google服務的在地化,都離不開 <html lang> 這樣看似微小的細節支持。
透過上述案例,我們可以體認到,在實戰中遵循標準和最佳實務的重要性。良好的多語系策略不僅體現在後端架構和譯文品質上,也體現在前端碼的每一個屬性設定上。一個 lang 屬性,串起了使用者、開發者和機器三方的共識:讓對的人讀懂對的內容。
問與答:常見問題解答
最後,我們整理了一些開發者在實作 <html lang> 與多語系網站時經常提出的問題,並給出清晰的解答。
問: 如果一個網頁包含多種語言內容,我該如何設置 lang?可以同時指定多個語言嗎?
答: 每個 HTML 文件(頁面)僅能有一個主要語言,因此 <html> 標籤的 lang 屬性只能填入一個語言代碼。建議您將頁面的主要語言作為 lang 值。如果頁面中夾雜其他語言的片段,則應該在那些片段的元素上單獨標記 lang 屬性。例如,一篇主要語言為英文的文章中包含一小段中文引文,整頁用 lang="en",而該中文引文可用 <span lang="zh"> 圍起來。如此一來,對於整頁文件和局部內容,瀏覽器與輔助工具都能各自識別正確的語言。不能在同一個 <html> 標籤上列出多種語言(例如 lang="en, fr" 是無效的),也無需這麼做;請以主要語言為主,局部差異部分各自標記即可。
問: 我應該使用簡寫語言代碼,還是加上國家/地區代碼呢?例如要標示繁體中文,用 zh、zh-TW 還是 zh-Hant 比較好?
答: 能具體就盡量具體。兩碼語言代碼(如 zh 代表「中文」)太廣泛,無法區分繁體/簡體或地區差異。最佳做法是依內容屬性選擇合適的 BCP 47 語言標籤。如果您的頁面明確針對某個地區或書寫系統,應包含該資訊。例如:主要受眾在臺灣的繁體中文內容可用 zh-TW,針對香港的繁體中文可用 zh-HK 或 zh-Hant-HK,簡體中文內容則常用 zh-CN(中國大陸)或僅標 zh-Hans 表示簡體。對於英文這類有地域差異的語言也是類似:美式英文建議標 en-US,英式英文用 en-GB。當然,如果您的內容本身不區分地域(例如純學術文章的英文版本,同時適合美國和英國讀者),那用 en 泛指英文也沒問題。但總體而言,標籤越精確,系統判斷就越準確。切記使用規範代碼,並遵循大小寫慣例:語言小寫、地區大寫,例如不用寫成 ZH-tw 或 chinese 等非標準形式。
問: lang 屬性和 hreflang 有什麼區別?還有 <meta http-equiv="content-language">,我需要同時用到它們嗎?
答: 三者用途不同:lang 屬性是頁面內容的語言宣告,供瀏覽器和輔助技術使用;hreflang 是在頁面之間建立語言對應的SEO標記,告訴搜尋引擎「我的網站有這幾種語言版本」;而 <meta http-equiv="content-language"> 是一種舊方法,用於HTTP響應頭,指定目標受眾語言。一般來說,現代網站構建時只需確保 <html lang> 與適當使用 hreflang。<meta content-language> 並不是內容語言的可靠來源,而且搜尋引擎對它的支持不一致(如前述,Bing可能參考它,但Google基本忽略)。如果您已經正確設置了 lang 和 hreflang,完全可以不使用 meta 語言標籤。總結來說:lang 解決「這頁內容是什麼語言」,hreflang 解決「那些URL是彼此的翻譯版本」,兩者都很重要;而 <meta content-language> 可有可無,在多數情況下不建議依賴。
問: 僅靠設置 lang 就能提升我的網站SEO排名嗎?它在SEO上到底有多大作用?
答: 為頁面正確標注語言屬性屬於SEO的基礎工作,但它本身不會直接讓排名上升。換句話說,Google不會因為你有沒有加 lang 就給予權重加分。然而,lang 間接影響SEO的方式在前面已有討論:它有助於搜尋引擎更準確地理解和分類您的內容語言,避免多語內容被當成重複,也確保合適的用戶找到對應語言的頁面。特別是在實施 hreflang 以後,lang 的存在讓整個多語言標記體系更一致,減少了爬蟲混淆的可能。此外,良好的語言標記提升了使用者體驗,這對SEO的長期指標(如使用者停留時間、跳出率)都有正面效應。因此,我們不能把 lang 當作立即提升排名的魔法,但也絕不能忽視它。最佳做法是:把 lang 視為網站品質的一部分來做好。一個在細節上都嚴謹到位的網站,往往在整體SEO表現上也不會差。
問: 我的網站是一個前端單頁應用(SPA),用JavaScript實現多語言切換。當使用者切換語言時,需要更改 <html lang> 嗎?
答: 是的,建議同步更新。在SPA中,網頁不重新載入,<html> 元素會一直存在初始狀態。如果使用者透過介面選擇從英文切換到繁體中文,而您的程式碼動態替換了頁面文字內容,別忘了同時執行例如:document.documentElement.lang = "zh-TW";。這行動作會即時修改 <html lang> 的值。例如Vue、React等框架,一般會有國際化插件處理文字,但您可能需要手動或透過插件的回呼,來修改 lang 屬性。一旦更新,瀏覽器和輔助工具就能意識到語言環境改變,螢幕閱讀器可立即切換語音設定,而且若使用者將頁面加入書籤或共享,該元素也提供了正確的語言上下文。如果不更新,則表面上雖然看見中文了,但對技術上它仍被標記為英文頁,不利於後續的無障礙和SEO(例如搜尋引擎下次抓取時看到內容變中文了,卻還標著lang=en,可能會認為有矛盾)。總之,在SPA多語言切換中,語言狀態是應當被同步管理的部分,務必讓 <html lang> 反映當前顯示語言。
結語
掌握了以上原則和技巧,您就能有效地管理多語系網站的語言策略。別小看區區一個 lang 屬性,正是這類細節築起了網站在國際化上的專業度。透過正確使用 <html lang>,不僅人類訪客感受到您對不同語言文化的尊重,搜尋引擎與各類工具也會更「青睞」您的網站。現在,就為您的每一個頁面設定恰當的語言標記,讓網站在全球舞台上發聲吧!
