為什麼這些屬性不能忽略
你的頁面語言設錯，後果有兩個方向：
- 使用者體驗：螢幕閱讀器根據
lang決定發音引擎。lang="en"的頁面用中文寫，VoiceOver 會用英文腔朗讀中文字，聽起來完全不對。 - SEO：多語系網站沒設
hreflang，Google 不知道哪個版本要推給哪個地區，可能把繁體中文頁推給中國用戶（反之亦然），或重複內容互相蠶食排名。
lang — 宣告頁面語言
<!-- 正確：放在 <html> 標籤 -->
<html lang="zh-Hant-TW">
<!-- 常見錯誤：lang 沒設或設錯 -->
<html lang="en"> <!-- 整頁中文但宣告英文 -->
<html> <!-- 完全沒有 lang -->語言代碼格式是 BCP 47：語言-字體-地區
| 頁面 | lang 值 |
|---|---|
| 繁體中文（台灣） | zh-Hant-TW |
| 繁體中文（香港） | zh-Hant-HK |
| 簡體中文（中國） | zh-Hans-CN |
| 英文 | en |
| 英文（美國） | en-US |
| 日文 | ja |
頁面內部局部語言切換也可以加 lang：
<html lang="zh-Hant-TW">
<body>
<p>這是中文段落。</p>
<p lang="en">This paragraph is in English.</p>
<p>回到中文。</p>
</body>螢幕閱讀器遇到 lang="en" 的段落會切換到英文發音引擎，讀完再切回來。
dir — 文字方向
大多數語言不需要設，預設 ltr（left-to-right）。阿拉伯語、希伯來語、波斯語是 rtl（right-to-left）。
<!-- 阿拉伯語頁面 -->
<html lang="ar" dir="rtl">
<!-- 混合方向：局部覆蓋 -->
<p dir="rtl" lang="ar">هذا نص عربي</p>
<p>Back to left-to-right English.</p>如果你的網站有 RTL 語系，CSS 要同步處理：margin-left / margin-right 要用邏輯屬性 margin-inline-start / margin-inline-end 取代，flex 和 grid 在 RTL 模式下會自動反向。
hreflang — 告訴 Google 多語系版本的對應關係
這是多語系 SEO 最容易出錯的地方。hreflang 放在 <head> 裡，告訴 Google「這頁的繁體中文版在這裡、簡體中文版在那裡」。
<!-- 繁體中文頁面的 <head> -->
<link rel="alternate" hreflang="zh-Hant-TW" href="https://example.com/zh-tw/about/">
<link rel="alternate" hreflang="zh-Hans-CN" href="https://example.com/zh-cn/about/">
<link rel="alternate" hreflang="en" href="https://example.com/en/about/">
<!-- x-default：語言無法匹配時的預設版本 -->
<link rel="alternate" hreflang="x-default" href="https://example.com/about/">三個常見的坑：
坑一：只有一個方向的對應
每個語系版本的頁面都要互相指向對方。繁體中文頁要指向簡體中文，簡體中文頁也要指回繁體中文——Google 稱這個為「雙向確認」，缺一邊整組會被忽略。
坑二：hreflang 的 URL 和 canonical 矛盾
<!-- ❌ canonical 指向 A，hreflang 卻指向 B -->
<link rel="canonical" href="https://example.com/about/">
<link rel="alternate" hreflang="zh-Hant-TW" href="https://example.com/zh-tw/about/">hreflang 裡每個 URL 都應該和那頁自己的 canonical 一致，否則 Google 會困惑。
坑三：用 hreflang 區分繁簡體但沒有 x-default
x-default 是「使用者語言不在清單裡時的 fallback」。沒設的話，語言不匹配的使用者 Google 不知道要推哪頁。
translate — 告訴翻譯工具要不要翻
<!-- 不要翻譯品牌名稱 -->
<span translate="no">Claude Code</span>
<!-- 明確允許翻譯（預設就是 yes，不需要特別寫） -->
<p translate="yes">這段文字可以翻譯。</p>Chrome 的自動翻譯功能和 Google Translate 會尊重 translate="no"。技術名詞、品牌名稱、程式碼片段建議加上，避免被翻譯成奇怪的東西。
快速檢查清單
<html lang="...">有設，且語言代碼正確（BCP 47 格式）- 頁面內部有語言切換的段落加了局部
lang - 有 RTL 語系需求時設了
dir="rtl"並調整 CSS 邏輯屬性 - 多語系網站每個語系版本都有完整的
hreflang互相對應 hreflang的 URL 跟各自頁面的canonical一致- 有設
hreflang x-default - 品牌名稱 / 技術術語加了
translate="no"
相關文章
- [[frontend/html/24-head-checklist|正常網站
<head>完整清單]] — 這些屬性在<head>裡的位置 - Technical SEO — hreflang 完整的 SEO 效果說明