一、为什么十堰外贸企业需要“真”多语言站，而不是浏览器翻译

十堰的汽车零部件、装备制造、绿松石和文旅企业，这几年做外贸官网的越来越多。很多老板的第一反应是：“装个 Google 翻译插件不就行了？”实际做过项目就知道，浏览器翻译至少有三个硬伤：第一，专业术语不可控，同一个“轮毂”在站内可能被译成 wheel hub、hub、rim 三种写法，搜索引擎无法判断你到底卖什么；第二，翻译发生在客户端，爬虫抓到的仍是中文页面，等于英文关键词一条都收录不到；第三，价格、单位、日期格式全部沿用中文习惯，海外客户看到“¥1800/件、2026年10月27日”会直接影响信任度。

我们在十堰做过的外贸站项目里，有一个典型案例：一家做商用车轮毂的十堰企业，原来靠浏览器翻译，Google Search Console 里非中文查询的月曝光只有一千多次，且集中在公司名。改成真正的三语站点（中文、英文、俄语）之后，非中文曝光三个月涨到近万次，询盘量提升约四成。差别不在设计，而在页面是否以独立 URL、独立语言版本被搜索引擎收录。

这篇文章按“选型 → 路由 → 翻译 → SEO → 本地化 → 验收”的顺序，把十堰网站开发团队能直接照抄的做法写清楚。

二、先选型：三种多语言 URL 方案怎么选

国际化的第一步不是写代码，而是决定语言版本放在什么 URL 上。三种主流方案的实际差异如下：

子目录（www.example.com/en/）：所有语言共享同一个域名权重，外链和收录都会向主域集中，运维成本最低。缺点是没法按语言单独部署、单独上 CDN 节点。绝大多数十堰中小企业官网，推荐这一种。
子域名（en.example.com）：可以按语言独立部署、独立缓存，适合已经有多个技术团队维护的场景。但搜索引擎会把它当作相对独立的站点，新子域需要重新积累信任度。
独立国家域名（example.de / example.ru）：本地化信号最强，德国、俄罗斯客户信任度更高，但每个域名都要单独备案/注册、单独做 SSL 和收录，成本和维护量成倍增加。

还有一个常被忽略的决策：翻译由谁做。机器翻译可以用于产品参数等结构化内容，但首页标题、公司介绍、询盘引导语必须人工校对。实操建议是先用 DeepL 或大模型出初稿，再让懂行业的人改一遍术语表，并把术语表固化成 JSON 词表，避免同一个词在不同页面译法不一致。

三、Next.js App Router 下的多语言路由实现

以子目录方案为例，核心是把语言段放进路由的第一层，让每个语言版本都拥有真实可抓取的 URL。

3.1 目录结构

app/
  [locale]/
    layout.tsx
    page.tsx                # 首页
    products/page.tsx       # 产品列表
    products/[slug]/page.tsx
  api/
messages/
  zh.json
  en.json
  ru.json
i18n.ts
middleware.ts

所有页面都放在 [locale] 动态段下，generateStaticParams 返回 ["zh","en","ru"]，构建时就会为每种语言生成静态页面。这一点对 SEO 非常关键：三种语言的 HTML 都是服务端渲染好的，爬虫不需要执行 JavaScript。

3.2 中间件：按浏览器语言自动跳转，但不强推

// middleware.ts
import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["zh", "en", "ru"],
  defaultLocale: "zh",
  localePrefix: "always",       // 保证每种语言都有独立 URL
  localeDetection: true         // 读取 Accept-Language 与 NEXT_LOCALE cookie
});

export const config = {
  matcher: ["/((?!api|_next|images|favicon.ico).*)"]
};

三个参数里最容易出错的是 localePrefix。默认的 as-needed 会让中文留在根路径 /，英文在 /en，看似干净，但根路径同时承担“默认语言”和“语言选择”两种角色，后续做 hreflang 时容易自指混乱。外贸站建议统一用 always，让 /zh/、/en/、/ru/ 三条 URL 完全对等。

另外要处理一个体验细节：用户手动切换过语言后，下次访问不应该再被 Accept-Language 覆盖回去。做法是在切换时写入 NEXT_LOCALE cookie（有效期一年），中间件会优先读 cookie，其次才看请求头。

四、语言切换器：留在当前页面，而不是回首页

很多站点的语言切换直接把用户丢回首页，客户正在看某个型号的轮毂参数，一点英文就找不到了，这是询盘流失的高发点。正确做法是保留当前路径，只替换语言段：

"use client";
import { usePathname, useRouter } from "next/navigation";

export function LocaleSwitcher({ current }) {
  const pathname = usePathname();
  const router = useRouter();

  function switchTo(next: string) {
    const rest = pathname.replace(/^\/(zh|en|ru)/, "");
    document.cookie = `NEXT_LOCALE=${next};path=/;max-age=31536000`;
    router.push(`/${next}${rest || ""}`);
  }
  // 渲染 zh / en / ru 三个按钮，调用 switchTo
}

还要注意产品 slug 的本地化。中文站是 /zh/products/lungu，英文站最好是 /en/products/wheel-hub，而不是把拼音直接搬过去。可以在数据库里为每个产品存三个语言的 slug 字段，或者用 next-intl 的 pathnames 配置做映射。这一条对英文关键词排名的影响，往往比堆十篇软文都大。

五、SEO 三件事：metadata、hreflang、canonical

5.1 按语言生成 title 与 description

export async function generateMetadata({ params }) {
  const { locale } = params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("title"),
    description: t("description"),
    alternates: {
      canonical: `https://www.example.com/${locale}`,
      languages: {
        "zh-CN": "https://www.example.com/zh",
        "en": "https://www.example.com/en",
        "ru": "https://www.example.com/ru",
        "x-default": "https://www.example.com/en"
      }
    }
  };
}

三个要点：canonical 必须自指（英文页指向英文页，不能都指向中文页）；hreflang 必须双向互指，即英文页里也要列出中文和俄语版本，只在一侧写等于没写；x-default 指向默认落地版本，外贸站通常给英文。

5.2 别把语言切换做成纯前端状态

如果语言只存在 React state 或 localStorage 里，URL 不变，爬虫永远只能看到一个语言版本，hreflang 也无从谈起。判断标准很简单：关掉 JavaScript 后刷新页面，看英文内容是否还在。如果不在了，这个国际化方案对 SEO 就是无效的。

5.3 站点地图按语言拆分

在 sitemap.xml 中用 xhtml:link rel="alternate" hreflang="..." 标注每个 URL 的其他语言版本，比只提交一份中文 sitemap 的收录速度快很多。十堰网站开发团队交付外贸站时，建议把 sitemap 生成逻辑写进构建脚本，新增产品自动带上三语条目。

六、本地化不只是翻译：数字、日期、单位、表单

这一层最容易被漏掉，却最影响客户对“这家公司是否专业”的判断。用浏览器内置的 Intl API 就能解决大部分问题：

new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
  .format(1800);            // $1,800.00
new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
  .format(1800);            // 1.800,00 €
new Intl.DateTimeFormat("en-US", { dateStyle: "long" })
  .format(new Date("2026-10-27"));  // October 27, 2026

单位：国内图纸标 mm、kg，北美客户习惯 inch、lb，产品参数表最好双单位并排显示。
电话与地址：国际格式写成 +86 719 xxxx xxx，地址从门牌到国家倒序排列，并附上十堰工厂的经纬度或地图链接。
表单：国家/地区做成下拉选择而不是自由输入，时区自动带出，提交后给客户一个明确的响应时限（例如“24 小时内回复”），这三项对询盘转化率的提升在实测中相当明显。

七、上线验收清单与实测数据

某十堰汽车零部件外贸站改版前后的核心数据对比：

语言版本：中文 1 种 → 中/英/俄 3 种，共 186 个静态页面
Google 收录：中文 92 条 → 三语合计 431 条（上线 6 周）
非中文查询月曝光：约 1,200 → 约 9,800
移动端 LCP：3.8 秒 → 1.6 秒（多语言拆包 + 图片按需加载）
询盘表单提交：月均 23 条 → 32 条

上线前请逐条核对：

三种语言的 URL 都能直接访问且返回 200，不依赖 JavaScript；
每个页面的 <html lang> 与当前语言一致；
hreflang 双向互指，且没有指向 404 或重定向链；
canonical 自指，没有被中间件改写成默认语言；
语言切换保留当前路径；
英文/俄文 title、description 是人工润色过的，不是机翻原文；
sitemap 含全部语言版本，robots.txt 未误屏蔽语言目录；
货币、日期、单位在三种语言下显示正确；
表单提交后能在后台看到来源语言，便于后续优化。

八、三个最常见的坑

坑一：hreflang 只写一半。只在中文页里声明英文版，英文页没有回指，Google 会直接忽略这组标注，白做。

坑二：所有语言共用一套 slug。拼音 slug 对英文用户和搜索引擎都没有意义，产品页应当使用目标语言的关键词。

坑三：把国际化当成翻译任务，而不是工程任务。翻译只解决文字，路由、缓存、hreflang、结构化数据、表单验证都要在代码层实现。十堰网站开发团队在报价时，应该把多语言站的工作量按“路由与 SEO 基建 + 内容翻译 + 本地化适配”三块拆开，避免后期反复返工。

如果你所在的十堰企业正准备做外贸官网，建议先用两三个核心产品页做多语言试点，把上面的清单跑通，再批量扩语言。这样投入最小，也能最快看到搜索流量和询盘的真实反馈。

十堰网站开发实战：外贸企业官网前端国际化（i18n）落地指南——多语言路由、hreflang 与本地化格式