给网站增加多语言支持

一个网站、一种语言、一个受众——大多数小网站都是这样起步的，但这也是天花板。增加多语言支持，能让流量翻倍，而不用翻倍地产出内容创意。下面是完整流程：从决定做哪些语言，到上线翻译好的页面。

第一步：定语言（用数据，不拍脑袋）

别凭感觉选语言。用 Semrush 之类的工具查关键词在各国的搜索量，流量来自哪些国家，就决定做哪些语言。

举例：假设你流量前六的国家是加纳、美国、尼日利亚、英国、印度、菲律宾。其中加纳、美国、尼日利亚、英国的官方语言都是英语，印度是印地语和英语，菲律宾是菲律宾语（塔加洛语）和英语。所以这个站其实只做英文就够了——但为了演示方法，我们以印地语和菲律宾语为例来做。

一个实用说明：这个流程用 AI 聊天工具，是因为多数读者是初学者。AI 既提效率，也能让不懂前端的人做出及格线以上的多语言网站。

第二步：规划 URL 结构

用 ISO 639-1 语言代码做子目录。印地语是 /hi/，菲律宾语是 /tl/，在 index.html 同级创建这两个目录。

公共文件保持公共：styles.css 留在根目录，子目录页面用 ../styles.css 引用。不要把资源文件复制到每个语言目录里。

第三步：加语言切换按钮

切换按钮要用每种语言的自称：English、印地语自称（天城体文字）、Filipino。访客一眼就能认出自己的语言。

当前语言要视觉高亮——加个 curr 类做加粗样式即可：

<div class="language-list">
  <a class="curr" href="./" title="English">English</a>
  <a href="./hi/" title="Hindi">Hindi</a>
  <a href="./tl/" title="Filipino">Filipino</a>
</div>

关键细节：切换语言时必须保持在当前页面。如果访客在 china-phone-number-generator.html，印地语链接就是 ./hi/china-phone-number-generator.html，菲律宾语链接是 ./tl/china-phone-number-generator.html。千万别把人扔回首页。

样式从简：列表右浮动，链接间距 10px，非当前语言灰色，当前语言深色加粗，hover 给个反馈色。

第四步：复制并改造文件

把处理好的 HTML 文件全部复制进 /hi/ 和 /tl/，然后逐个修改（以印地语为例，菲律宾语同理）：

1. <html lang="en"> 改为 <html lang="hi">。
2. 样式表路径改为 ../styles.css。
3. logo 的首页链接改为指向 ../hi/。
4. 语言列表链接相应调整：切回英语用 ../，切到菲律宾语用 ../tl/；curr 类移到印地语链接上。
5. 内页同理：英语版在 ../china-phone-number-generator.html，菲律宾语版在 ../tl/china-phone-number-generator.html。

是的，纯手工改很繁琐，根源是示例站是纯静态文件。我的建议：第一个站先手工做，理解原理；从第二个站开始再改动态生成提效。不懂后端就先忍着——这个阶段理解比速度重要。

第五步：用 AI 翻译，再校验

把标题和描述发给 AI 聊天工具（GPT-4 级别）翻译成目标语言，替换进去。

质量校验用回译法：新开一个对话，让 AI 把印地语译文回译成英语，对照原文，无误就说明翻译过关。

所有用户看得见的东西都要翻译：导航栏（含 title 属性）、每个板块的标题、段落、按钮文字。一条铁律：URL 永远不翻译。

全部页面照此处理完，多语言支持就做好了。移动端适配可以先放放——先上线，再打磨。

下一步做什么

多语言之后：注册域名，部署到 Vercel，用 Cloudflare 包一层，提交 Google Search Console，加上统计代码。网站现在可以接待每一种支持语言的流量了。

快速检查清单

• 语言来自各国搜索数据，不是拍脑袋
• ISO 639-1 子目录（/hi/、/tl/）
• 切换器用语言自称，当前语言高亮
• 切换保持当前页面路径
• 每个目录的 lang 属性和资源路径已修正
• AI 翻译 + 回译校验通过
• URL 从未被翻译

多语言支持看起来吓人，其实就是五步：定语言、定结构、加切换、复制改造、翻译。每一步都不难，加在一起，你的网站就能触达以前完全看不见你的受众。

系列：出海建站