3步搞定企业网站双语，一文搞懂技术选型与避坑指南
还在被那些千篇一律的模板网站折磨？打开后台一看，全是生硬的占位符，改个颜色得翻半天代码，做双语更是难上加难，简直让人头大。这种“不够用”的痛，做过站的老鸟都懂。今天咱们不聊虚的，直接掰开揉碎，带你一文搞懂企业网站怎么做两种语言，从需求拆解到代码落地，全是干货。
很多福建做外贸的朋友问我，为什么官网一定要做双语？因为你的客户就在地球另一端，语言不通，流量再大也留不住人。别觉得多语言很复杂，其实只要思路对，用对工具，比你想的简单得多。
需求分析：先想清楚，别上来就写代码
做双语站，最大的坑就是“想当然”。很多老板拍脑袋说“给我做个英文版”，结果做出来的全是中式英语，或者把中文直接扔给机器翻译，读起来像机器人说话。
第一步：明确受众与场景。
你的客户主要在哪里？如果是东南亚，可能涉及繁体中文或马来语；如果是欧美，标准美式英语是底线。不同地区对排版习惯也有要求，比如英文单词比中文长，同样的内容在英文下可能会撑破布局。这时候，响应式设计不仅仅是屏幕适配，更是内容长度的适配。
第二步：确定内容策略。
是“伪多语言”还是“真本地化”？伪多语言：仅改变界面语言（按钮、导航），正文内容保持中文。适合内部管理系统或客户群体单一的站点。
真本地化：所有文案、图片、甚至电话号码格式都进行翻译和适配。这是企业官网的标准配置。第三步：技术选型初探。
是独立开发还是用CMS（内容管理系统）？
如果是设计师转前端，我建议优先考虑 WordPress 或 Strapi 这类成熟的系统，或者使用前端框架 Next.js 结合 i18n 库。前者省事，后者灵活。对于追求高性能和SEO的站，Next.js 是目前的优选，因为它支持 SSR（服务端渲染），搜索引擎爬虫能直接抓到翻译后的文本，而不是等待 JavaScript 执行。
环境准备：工欲善其事，必先利其器
别嫌麻烦，环境搭好了，后面少掉坑。以 Next.js 为例，这是目前做企业级双语站最稳的方案之一。
1. 初始化项目
打开终端，执行以下命令。注意，Next.js 13+ 默认使用 App Router，这对 SEO 更友好。
npx create-next-app@latest my-bilingual-site
cd my-bilingual-site2. 安装 i18n 库
推荐使用 next-i18next，它集成了 Next.js 的路由系统，处理得很干净。
npm install next-i18next3. 配置基础文件
创建 next.config.js 并配置国际化选项。这一步至关重要，它告诉 Next.js 有哪些语言，以及默认语言是什么。
const { i18n } = require('./i18n.config.js'); // 假设你单独抽离了配置/** @type {import('next').NextConfig} */
const nextConfig = {i18n: {locales: ['zh', 'en'], // 支持的语言：中文和英文defaultLocale: 'zh', // 默认语言localeDetection: false, // 关闭自动检测，通过 URL 强制指定，利于 SEO},
};module.exports = nextConfig;4. 创建字典文件
在根目录创建 public/locales/zh/common.json 和 public/locales/en/common.json。这是你的“翻译本”，所有文案都放这里，别硬编码在页面里！
核心步骤：从路由到组件，全流程拆解
很多新手卡在“怎么切换语言”这一步。其实核心逻辑很简单：通过 URL 路径区分语言，通过 JSON 文件存储文案，通过 Hook 获取当前语言。
1. 动态路由结构
在 pages 或 app 目录下，利用 [locale] 动态参数来区分语言版本。
例如：/zh/about - 中文关于页
/en/about - 英文关于页2. 封装语言切换组件
做一个通用的 LanguageSwitcher 组件，放在导航栏。
import { useRouter } from 'next/router';
import Link from 'next/link';export default function LanguageSwitcher() {const { pathname, locale } = useRouter();// 定义当前语言对应的目标语言const targetLocale = locale === 'zh' ? 'en' : 'zh';return (Link href={{ pathname, locale: targetLocale }} locale={targetLocale}button className=btn-lang{targetLocale === 'en' ? 'EN' : '中文'}/button/Link);
}3. 页面中使用翻译
在具体的页面组件中，使用 useTranslation Hook 获取翻译函数 t。
import { useTranslation } from 'next-i18next';
import Head from 'next/head';export default function HomePage() {const { t, i18n } = useTranslation('common');const locale = i18n.language;return (div{/* SEO 关键：动态设置 HTML lang 属性和 meta 标签 */}Headhtml lang={locale} /title{t('home.title')}/titlemeta name=description content={t('home.description')} //Headh1{t('home.headline')}/h1p{t('home.intro')}/p/div);
}重点注意：html lang={locale} / 这一行代码不能少！这是告诉搜索引擎和屏幕阅读器，这个页面是什么语言。Google 的算法非常依赖这个标签来判断页面内容的语言归属。
代码/配置示例：实战中的两个关键片段
光看原理不够，这里给两个在福建某外贸企业建站项目中实际用到的片段，可以直接抄作业。
片段一：带 hreflang 标签的 SEO 优化
很多站长做了双语，但 Google 索引里还是乱串，甚至认为两个页面是重复内容。解决办法是正确输出 hreflang 标签。
// components/SeoTags.js
import Head from 'next/head';
import { useRouter } from 'next/router';export default function SeoTags({ title, description }) {const { pathname, asPath } = useRouter();const domain = process.env.NEXT_PUBLIC_SITE_URL || 'https://www.example.com';// 生成当前路径的 zh 和 en 版本 URLconst zhUrl = `${domain}/zh${pathname}`;const enUrl = `${domain}/en${pathname}`;return (Headtitle{title}/titlemeta name=description content={description} /{/* 关键：hreflang 标签，告诉 Google 这个页面的其他语言版本在哪里 */}link rel=alternate hrefLang=zh href={zhUrl} /link rel=alternate hrefLang=en href={enUrl} /link rel=alternate hrefLang=x-default href={zhUrl} //Head);
}为什么重要？
根据 Google Search Console 的官方文档，正确使用 hreflang 是解决多语言页面索引混乱的最有效手段。如果没有这个标签，Google 可能会随机抓取中文版或英文版，导致流量分散，甚至被判定为重复内容而降权。我在后台看到过太多因为没加这个标签，导致英文版流量为零的案例，真的太可惜了。
片段二：图片的多语言适配
有时候，中文海报上的字很大，英文海报需要更长的横幅。不要傻傻地共用一张图！
// components/LocalizedImage.js
import Image from 'next/image';
import { useTranslation } from 'next-i18next';export default function LocalizedImage({ srcZh, srcEn, alt, width, height }) {const { i18n } = useTranslation();const locale = i18n.language;// 根据当前语言选择对应的图片源const source = locale === 'zh' ? srcZh : srcEn;return (Imagesrc={source}alt={alt} // Alt 文本也应该考虑翻译，这里简化处理width={width}height={height}style={{ width: '100%', height: 'auto' }}objectFit=cover/);
}在调用时：
LocalizedImage srcZh=/images/banner-zh.png srcEn=/images/banner-en.png alt=企业首页横幅width={1920} height={600}
/常见报错：这些坑我替你踩过了
1. 语言切换后，页面内容没变？原因：next-i18next 没有正确初始化，或者 i18n.config.js 里的 loadPath 路径写错了。
解决：检查 public/locales 目录结构是否与配置一致。确保 common.json 文件名正确。如果是 SSR 问题，尝试在 getStaticProps 或 getServerSideProps 中显式传递 locale。2. 英文页面在 Google 索引中显示为中文？原因：html lang 标签缺失，或者 hreflang 标签错误。
解决：回到“核心步骤”和“代码示例”部分，检查 Head 组件中的标签。使用 Google Search Console 的“网址检查”工具，提交 URL 进行测试，查看抓取结果中的语言标识。3. 切换语言时，URL 没变？原因：使用了 push 而不是 replace，或者 Link 组件的 locale 属性没传对。
解决：确保使用 Link locale={targetLocale} 或者 router.push(path, as, { locale: targetLocale })。Next.js 的国际化路由依赖 URL 中的前缀（如 /en/），如果 URL 不变，Next.js 会认为你还在当前语言环境下。4. 生产环境构建报错 Module not found？原因：动态导入 JSON 文件时，路径解析问题。
解决：避免在组件中直接 require JSON 文件，始终使用 next-i18next 提供的 useTranslation 或 serverSideTranslations 来加载数据。小结：从设计师到全栈的最后一公里
做双语网站，技术上并没有那么高深，难的是细节的把控和SEO 的合规性。不要硬编码：所有文案进 JSON。
不要忽略 SEO：lang 标签和 hreflang 是保命符。
不要偷懒：图片和文案都要本地化，别让用户觉得你是个“翻译机”。对于福建的外贸企业来说，一个专业、流畅、对搜索引擎友好的双语官网，是获取全球信任的第一张名片。别再用那种丑得没法看的模板网站了，花点时间，用这套流程，你能做出真正拿得出手的作品。
技术是为业务服务的。当你把代码写通，把 SEO 做对，剩下的就是让内容说话。
还有什么建站疑问？比如服务器怎么部署、SSL 证书怎么配、或者 CMS 怎么选？评论区留言挨个回。 企业网站怎么做两种语言新手入门
3步搞定企业网站双语，一文搞懂技术选型与避坑指南
还在被那些千篇一律的模板网站折磨？打开后台一看，全是生硬的占位符，改个颜色得翻半天代码，做双语更是难上加难，简直让人头大。这种“不够用”的痛，做过站的老鸟都懂。今天咱们不聊虚的，直接掰开揉碎，带你一文搞懂企业网站怎么做两种语言，从需求拆解到代码落地，全是干货。
很多福建做外贸的朋友问我，为什么官网一定要做双语？因为你的客户就在地球另一端，语言不通，流量再大也留不住人。别觉得多语言很复杂，其实只要思路对，用对工具，比你想的简单得多。
需求分析：先想清楚，别上来就写代码
做双语站，最大的坑就是“想当然”。很多老板拍脑袋说“给我做个英文版”，结果做出来的全是中式英语，或者把中文直接扔给机器翻译，读起来像机器人说话。
第一步：明确受众与场景。
你的客户主要在哪里？如果是东南亚，可能涉及繁体中文或马来语；如果是欧美，标准美式英语是底线。不同地区对排版习惯也有要求，比如英文单词比中文长，同样的内容在英文下可能会撑破布局。这时候，响应式设计不仅仅是屏幕适配，更是内容长度的适配。
第二步：确定内容策略。
是“伪多语言”还是“真本地化”？伪多语言：仅改变界面语言（按钮、导航），正文内容保持中文。适合内部管理系统或客户群体单一的站点。
真本地化：所有文案、图片、甚至电话号码格式都进行翻译和适配。这是企业官网的标准配置。第三步：技术选型初探。
是独立开发还是用CMS（内容管理系统）？
如果是设计师转前端，我建议优先考虑 WordPress 或 Strapi 这类成熟的系统，或者使用前端框架 Next.js 结合 i18n 库。前者省事，后者灵活。对于追求高性能和SEO的站，Next.js 是目前的优选，因为它支持 SSR（服务端渲染），搜索引擎爬虫能直接抓到翻译后的文本，而不是等待 JavaScript 执行。
环境准备：工欲善其事，必先利其器
别嫌麻烦，环境搭好了，后面少掉坑。以 Next.js 为例，这是目前做企业级双语站最稳的方案之一。
1. 初始化项目
打开终端，执行以下命令。注意，Next.js 13+ 默认使用 App Router，这对 SEO 更友好。
npx create-next-app@latest my-bilingual-site
cd my-bilingual-site2. 安装 i18n 库
推荐使用 next-i18next，它集成了 Next.js 的路由系统，处理得很干净。
npm install next-i18next3. 配置基础文件
创建 next.config.js 并配置国际化选项。这一步至关重要，它告诉 Next.js 有哪些语言，以及默认语言是什么。
const { i18n } = require('./i18n.config.js'); // 假设你单独抽离了配置/** @type {import('next').NextConfig} */
const nextConfig = {i18n: {locales: ['zh', 'en'], // 支持的语言：中文和英文defaultLocale: 'zh', // 默认语言localeDetection: false, // 关闭自动检测，通过 URL 强制指定，利于 SEO},
};module.exports = nextConfig;4. 创建字典文件
在根目录创建 public/locales/zh/common.json 和 public/locales/en/common.json。这是你的“翻译本”，所有文案都放这里，别硬编码在页面里！
核心步骤：从路由到组件，全流程拆解
很多新手卡在“怎么切换语言”这一步。其实核心逻辑很简单：通过 URL 路径区分语言，通过 JSON 文件存储文案，通过 Hook 获取当前语言。
1. 动态路由结构
在 pages 或 app 目录下，利用 [locale] 动态参数来区分语言版本。
例如：/zh/about - 中文关于页
/en/about - 英文关于页2. 封装语言切换组件
做一个通用的 LanguageSwitcher 组件，放在导航栏。
import { useRouter } from 'next/router';
import Link from 'next/link';export default function LanguageSwitcher() {const { pathname, locale } = useRouter();// 定义当前语言对应的目标语言const targetLocale = locale === 'zh' ? 'en' : 'zh';return (Link href={{ pathname, locale: targetLocale }} locale={targetLocale}button className=btn-lang{targetLocale === 'en' ? 'EN' : '中文'}/button/Link);
}3. 页面中使用翻译
在具体的页面组件中，使用 useTranslation Hook 获取翻译函数 t。
import { useTranslation } from 'next-i18next';
import Head from 'next/head';export default function HomePage() {const { t, i18n } = useTranslation('common');const locale = i18n.language;return (div{/* SEO 关键：动态设置 HTML lang 属性和 meta 标签 */}Headhtml lang={locale} /title{t('home.title')}/titlemeta name=description content={t('home.description')} //Headh1{t('home.headline')}/h1p{t('home.intro')}/p/div);
}重点注意：html lang={locale} / 这一行代码不能少！这是告诉搜索引擎和屏幕阅读器，这个页面是什么语言。Google 的算法非常依赖这个标签来判断页面内容的语言归属。
代码/配置示例：实战中的两个关键片段
光看原理不够，这里给两个在福建某外贸企业建站项目中实际用到的片段，可以直接抄作业。
片段一：带 hreflang 标签的 SEO 优化
很多站长做了双语，但 Google 索引里还是乱串，甚至认为两个页面是重复内容。解决办法是正确输出 hreflang 标签。
// components/SeoTags.js
import Head from 'next/head';
import { useRouter } from 'next/router';export default function SeoTags({ title, description }) {const { pathname, asPath } = useRouter();const domain = process.env.NEXT_PUBLIC_SITE_URL || 'https://www.example.com';// 生成当前路径的 zh 和 en 版本 URLconst zhUrl = `${domain}/zh${pathname}`;const enUrl = `${domain}/en${pathname}`;return (Headtitle{title}/titlemeta name=description content={description} /{/* 关键：hreflang 标签，告诉 Google 这个页面的其他语言版本在哪里 */}link rel=alternate hrefLang=zh href={zhUrl} /link rel=alternate hrefLang=en href={enUrl} /link rel=alternate hrefLang=x-default href={zhUrl} //Head);
}为什么重要？
根据 Google Search Console 的官方文档，正确使用 hreflang 是解决多语言页面索引混乱的最有效手段。如果没有这个标签，Google 可能会随机抓取中文版或英文版，导致流量分散，甚至被判定为重复内容而降权。我在后台看到过太多因为没加这个标签，导致英文版流量为零的案例，真的太可惜了。
片段二：图片的多语言适配
有时候，中文海报上的字很大，英文海报需要更长的横幅。不要傻傻地共用一张图！
// components/LocalizedImage.js
import Image from 'next/image';
import { useTranslation } from 'next-i18next';export default function LocalizedImage({ srcZh, srcEn, alt, width, height }) {const { i18n } = useTranslation();const locale = i18n.language;// 根据当前语言选择对应的图片源const source = locale === 'zh' ? srcZh : srcEn;return (Imagesrc={source}alt={alt} // Alt 文本也应该考虑翻译，这里简化处理width={width}height={height}style={{ width: '100%', height: 'auto' }}objectFit=cover/);
}在调用时：
LocalizedImage srcZh=/images/banner-zh.png srcEn=/images/banner-en.png alt=企业首页横幅width={1920} height={600}
/常见报错：这些坑我替你踩过了
1. 语言切换后，页面内容没变？原因：next-i18next 没有正确初始化，或者 i18n.config.js 里的 loadPath 路径写错了。
解决：检查 public/locales 目录结构是否与配置一致。确保 common.json 文件名正确。如果是 SSR 问题，尝试在 getStaticProps 或 getServerSideProps 中显式传递 locale。2. 英文页面在 Google 索引中显示为中文？原因：html lang 标签缺失，或者 hreflang 标签错误。
解决：回到“核心步骤”和“代码示例”部分，检查 Head 组件中的标签。使用 Google Search Console 的“网址检查”工具，提交 URL 进行测试，查看抓取结果中的语言标识。3. 切换语言时，URL 没变？原因：使用了 push 而不是 replace，或者 Link 组件的 locale 属性没传对。
解决：确保使用 Link locale={targetLocale} 或者 router.push(path, as, { locale: targetLocale })。Next.js 的国际化路由依赖 URL 中的前缀（如 /en/），如果 URL 不变，Next.js 会认为你还在当前语言环境下。4. 生产环境构建报错 Module not found？原因：动态导入 JSON 文件时，路径解析问题。
解决：避免在组件中直接 require JSON 文件，始终使用 next-i18next 提供的 useTranslation 或 serverSideTranslations 来加载数据。小结：从设计师到全栈的最后一公里
做双语网站，技术上并没有那么高深，难的是细节的把控和SEO 的合规性。不要硬编码：所有文案进 JSON。
不要忽略 SEO：lang 标签和 hreflang 是保命符。
不要偷懒：图片和文案都要本地化，别让用户觉得你是个“翻译机”。对于福建的外贸企业来说，一个专业、流畅、对搜索引擎友好的双语官网，是获取全球信任的第一张名片。别再用那种丑得没法看的模板网站了，花点时间，用这套流程，你能做出真正拿得出手的作品。
技术是为业务服务的。当你把代码写通，把 SEO 做对，剩下的就是让内容说话。
还有什么建站疑问？比如服务器怎么部署、SSL 证书怎么配、或者 CMS 怎么选？评论区留言挨个回。