外贸本土化与多市场主题

先讲个小插曲。

前阵子我们把天启芯的官网做了一轮改造：12 种语言已经上线，又加了 6 套区域主题，底部还放了一个市场切换器。上线第二天，一位中东客户把截图发回来，问了一个挺有意思的问题：为什么英文页面上的分享按钮是 LinkedIn，而不是他们天天用的 WhatsApp？

这个问题把我们问住了。我们一直觉得「语言切到英文」就算照顾到了，但对方每天打开的是 WhatsApp，转发给同事也走 WhatsApp。语言对了，使用习惯没对上，还是隔了一层。

后来我们顺着这个线索，把「本土化」拆成了三件事：识别访客在哪、给他看哪种视觉、让他顺手把页面转给谁。这篇文章就把这三件事讲清楚，案例都用 tikchip.cn。

语言和市场，不是一回事

做外贸站最容易犯的错，是把语言当成市场。

阿拉伯语不等于中东：迪拜的采购经理可能全程用英语；中文也不等于中国大陆：东南亚工厂里的华人采购看中文更顺。反过来，一个德国客户用英语浏览，不代表他愿意看美国式的红蓝配色和 LinkedIn 分享按钮。

所以我们把两件事拆开了：

• 语言（locale） 决定文字和排版方向。12 种语言，阿语这类 RTL 语言从右往左排。
• 市场（region） 决定视觉主题、信任背书、沟通渠道和分享平台。目前分成 6 组：Global、中国大陆、中东、东南亚、日韩、俄罗斯及中亚。

两者是正交的。沙特买家打开 /en，看到的是英文文案 + 中东主题；中国采购打开 /zh，看到的是中文 + 品牌基准主题。URL 不因为市场不同而变化，一个语言一个地址，SEO 上不会多出一堆重复页面。

GeoIP 这一步，越轻越好

识别访客国家，最省事的做法是调第三方 IP 接口。但我们没有这么做，原因很简单：页面首屏不该等一个外部 HTTP 请求。

实际做法是利用上游已经拿到的信息。Cloudflare、Vercel、Nginx 这些入口通常会带 CF-IPCountry、x-geo-country 之类的请求头，中间件直接读，读不到就落到 Global。天启芯这套实现的优先级是：

1. URL 上显式的 ?region=me（调试或投放用）
2. 用户手动选过的 TQX_REGION cookie
3. CDN / Nginx 注入的国家码请求头
4. 默认 Global

国家映射也不复杂：CN 单独一组；沙特、阿联酋、埃及等归中东；越南、泰国、印尼等归东南亚；日本、韩国归一档；俄罗斯、白俄罗斯、哈萨克斯坦等俄语区一档；其余归 Global。

这里有个容易踩的坑：缓存。如果整页 HTML 被 CDN 缓存，却没有按国家或区域区分缓存键，第一个访客拿到的主题会被发给所有人。我们的做法是主题 Token 在服务端渲染时按区域注入，缓存策略跟着区域走；如果站点是纯静态的，就把主题判断放到客户端，或者用边缘函数在返回 HTML 前改 data-region，总之别让「第一个人的主题」代表所有人。

还有一种情况必须考虑：IP 会错。企业专线、VPN、运营商出口、出差驻外，都可能把一个中东采购识别成欧洲访客。所以定位只能是默认值，不能是唯一答案。

六套主题，一套代码

确定区域之后，视觉怎么换？

我们没有复制六个站点，而是抽了一层 CSS 变量。每家市场只允许覆盖 15 个左右的 Token：主色、悬停色、浅色容器、强调色、Hero 背景与文字、徽章色、圆角尺度、字体栈。中性色、字号、间距、阴影这些不动——一旦允许每个市场随便改，后面改一个按钮要改六遍，维护成本会失控。

六套主题的取值大致是这样：

市场	主色	强调色	圆角	字体栈
Global	#e60012	同主色	4–12px	system-ui
中国大陆	#e60012	同主色	2–8px	Noto Sans SC
中东	#047857	#d4af37	2–6px	Tahoma
东南亚	#c2410c	#16a34a	6–24px	Noto Sans SC
日韩	#1e3a8a	#dc2626	1–4px	Hiragino / Yu Gothic
俄罗斯及中亚	#0e7490	#f59e0b	2–8px	Segoe UI

这些取值不是拍脑袋定的，背后是当地采购场景的偏好：中东喜欢深绿加金色，强调尊贵和大宗采购的稳重；东南亚用高饱和橙绿，页面对比更活，适合低起订量、快交付的沟通方式；日韩偏冷色、信息密度高、圆角小，看起来更「工程」；俄语区用深青加琥珀，字体也更硬朗。

真正麻烦的不是颜色，而是 RTL。阿语页面不能只把文字翻过去，导航、图标、表单、轮播方向都要镜像。我们的经验是：布局尽量用逻辑属性（margin-inline-start 这类），少写死 left/right；RTL 不要靠 row-reverse 硬顶，很多组件本来就会随 dir 反转，叠在一起反而转回去了。

同一个页面切到阿语后，导航整体镜像，主色换成中东的深绿，Hero 的明暗也一起调整。

分享按钮，是最容易被忽略的本土化

回到开头那个问题。

我们在产品详情页右下角放了一条分享栏。它不是固定 9 个平台一字排开，而是按区域决定顺序：

• 欧美：LinkedIn、Email、WhatsApp、X
• 中东：WhatsApp、X、Email、Facebook
• 东南亚：WhatsApp、Facebook、Telegram、Email
• 日韩：LINE、Email、X
• 俄语区：Telegram、WhatsApp、VK、Email
• 国内：微博、Email、LinkedIn

第一项就是主推。采购看完产品，下一步通常是把链接转给采购团队或老板，所以「他用哪个 App」比「我们想推哪个平台」更重要。

同一个产品页，切换市场后分享栏的平台和顺序都变了。

注意一个细节：这些分享栏的标题和按钮文案，用的是市场主语言，不是页面语言。比如英文产品页配中东市场，分享栏标题会是阿语的「شارك مع فريقك」，按钮是 WhatsApp、X、Facebook。因为转发动作发生在当地团队里，界面应该顺着他们的习惯来。

技术上还有两件事：

1. 只用有 Web 分享端点的平台。Kakao、Zalo、微信这类必须走原生 SDK 的，交给「系统分享」和「复制链接」兜底，不要放一个点了没反应的图标。
2. 所有分享链接带 UTM，并尽量带上 GA4 的 _gl linker。否则社交回流会被记成 direct，做了半天分享，报表上什么都看不到。

识别错了，要给用户一条退路

GeoIP 一定会有误判。所以我们坚持在页脚放市场切换器：

用户点一下就能改，选择会写进一年期的 cookie，下次访问直接命中；切换市场时默认联动语言（中东 → 阿语，俄罗斯 → 俄语），但他仍然可以单独改语言，语言 cookie 的优先级更高。

这个控件不酷，甚至有点不起眼，但它决定了误判发生时，用户是「这站跟我没关系」关掉，还是自己点两下改回来。对 To B 站点来说，后者的价值比多做一个动画大得多。

SEO 上要守住的几条线

多市场主题最容易把 SEO 做乱，我们给自己定了几个规矩：

• 一个语言一个 URL，不为市场单独开地址。/en/product/8343 在迪拜和柏林是同一个 URL，只是主题不同。hreflang 和 canonical 仍然按语言走。
• 不做 cloaking。给搜索引擎和给用户的内容必须一致，主题只改外观，不改正文事实。
• 不要因为区域做重定向。市场切换只改 cookie 和主题，不跳 URL；只有语言切换才换路径，避免爬虫陷入重定向链。
• 主题在首屏渲染前生效。如果等 JS 加载完再换色，用户会先看到一闪而过的「默认主题」，信任感会打折。服务端注入 CSS 变量，或者至少在 HTML 上先写 data-region。
• 别为了主题加载新字体。Tahoma、Segoe UI、Hiragino 这些系统字体就够用，新增 Web Font 只会拖慢 LCP。

小团队的落地顺序

如果你也想做，不建议一上来就铺 6 套主题。更稳妥的顺序是：

1. 先看询盘集中在哪些国家，只做 2–3 个市场主题，剩下归 Global。
2. 把主题 Token 列成白名单，任何超出白名单的改动都要单独评审。
3. 每个市场截三张图做回归：首页、产品页、移动端。RTL 单独加一张。
4. 分享平台先接 3–4 个，按当地习惯排序，别追求「全」。
5. 上线后看两个维度：区域 × 语言的转化率，以及 social_share 带来的回流。没有数据之前，不要凭感觉加第四套主题。

最后

本土化不是把中文翻成 12 种语言。它更像是：一个沙特采购、一个越南老板、一个俄罗斯工程师，分别打开同一个网址时，都觉得这个站是「为他们准备的」——文字看得懂，颜色不别扭，想转发时一眼就能找到自己常用的那个 App。

GeoIP、主题 Token、区域化分享，只是把这件很抽象的事拆成了三个可以动手的步骤。先把这三步做扎实，再去谈更深的文化细节，顺序就不会乱。