语言切换器的样式与位置设计：常见位置与可访问性

引言：找了半天没找到语言切换

切换器藏太深用户找不到，用国旗代表语言又踩文化坑（如用西班牙国旗代西语）。好的切换器要显眼、清晰、可访问，并链到对应语言 URL（而非仅靠 JS 跳）。

原理分析：设计要点

1. 位置：页眉右上最通用，或页脚；全站一致。
2. 标识：用语言自名（”English”/”中文”）而非国旗，避免政治/文化歧义。
3. 可访问性：链接要是真 <a href> 指向各语言 URL，方便爬虫与键盘用户；别只用 JS 下拉且毁了 hreflang。
4. 当前语言高亮：避免点回自己。

保姆级实操

用 WPML/Polylang 的语言切换器部件，放页眉。确保输出真链接：

<nav class="lang-switch" aria-label="语言切换">
  <a href="https://mimangfei.com/" hreflang="zh" lang="zh">中文</a>
  <a href="https://mimangfei.com/en/" hreflang="en" lang="en" aria-current="true">English</a>
</nav>

键盘可达：链接天然可达；下拉用 <button> + <ul> 而非纯 div。

常见坑

1. 用国旗代语言，文化歧义。
2. 切换器 JS 跳不产链接，爬虫抓不到各语言。
3. 案例：某站切换器用纯 JS，Google 只收默认语言。改真链接后各语言被收。
4. 当前语言仍可点，体验差。
5. 移动端切换器过小，点不准。

总结

判断标准：显眼位置 + 语言自名 + 真链接 + 可访问。行动清单：定位置 → 用语言名 → 真 <a> 链接 → 当前高亮 → 键盘测试。详见多语言 URL 结构对比。