国内官网增加英文版:URL、语言切换与 hreflang 怎么配置?

国内官网增加英文版,可以先为已发布产品建立独立 URL,用同一产品标识连接中英文页面,再生成语言切换和 hreflang 标注。canonical 表达规范网址偏好,hreflang 表达语言对应关系;两者要与实际正文、发布状态一致。

第 140 届广交会将于 2026 年 10 月 15 日至 11 月 4 日分三期举行。对正在赶展前上线的团队,先为重点产品建立稳定、可分享的英文地址,可以让业务人员明确哪些链接已经能够对外使用。官方展期通知

本文采用虚构的 example.com 和产品 A100 说明一种实现思路。它是面向普通中英文产品页的设计示例,不代表生产项目已完成部署或测试。

先确定语言页面的对应关系

假设原站已有中文产品页,可以先建立如下对应关系。路径仅为示意,已有中文网址不必为了套用示例而更换。

内容标识 中文页 英文页
产品 A100 /zh/products/a100/ /en/products/a100/
产品 B200 /zh/products/b200/ 暂未发布

这个表首先解决业务问题:哪些产品存在已经核准的英文介绍。语言菜单、页面标注和对外分享,都应依据真实的发布状态生成。

Google 建议为不同语言版本使用不同 URL,而不是只靠 Cookie 或浏览器设置切换同一地址的正文;同时建议保留可由用户选择的语言链接,避免自动跳转妨碍访问其他版本。多语言网站官方说明

因此,可以在原有网站能力允许的范围内规划英文路径,不必把"做英文版"直接等同于购买新域名。采用子目录、子域名还是独立站点,还要结合现有架构和维护分工评估。

语言切换应尽量保留正在看的产品

用户在 A100 产品页切换英文,合理的目标是英文 A100 页面。若每次都返回英文首页,用户就需要重新查找产品。

对于尚未发布英文版的 B200,不应生成一个看似存在、打开后却报错的英文产品链接。可以说明对应版本尚未提供,并给出含义清楚的英文目录入口。导航中的文字要让用户理解这是进入目录,而不是查看同一产品的译文。

如果内容系统支持,建议使用稳定的内容标识维护对应关系。不要假定把所有网址中的 /zh/ 替换成 /en/ 就能得到有效页面;产品下架、语言版本缺失和路径修改都会使这种推算失效。

canonical 和 hreflang 各自表达什么?

canonical 用于向 Google 表达重复或高度相似页面中的首选网址;hreflang 则表达语言或地区版本之间的关系。Google 建议在使用 hreflang 时,规范网址指向同语言页面,或在不存在时采用适当替代。规范网址官方说明

对于已经完成翻译、各自承担中英文访问且没有另一个同语言首选副本的 A100 页面,可以分别采用自指的 canonical,并标明中英文对应关系。不要仅因中文页先上线,就把英文页的 canonical 统一指回中文页。canonical 是规范化信号,不能强制 Google 采用指定网址;如果站内还有同语言重复页,需要先明确代表地址。

以下是英文页 <head> 中的最小示意片段,所有地址都是占位地址:

ini 复制代码
<link rel="canonical"
      href="https://example.com/en/products/a100/">
<link rel="alternate" hreflang="zh-Hans"
      href="https://example.com/zh/products/a100/">
<link rel="alternate" hreflang="en"
      href="https://example.com/en/products/a100/">

对应中文页的片段是:

ini 复制代码
<link rel="canonical"
      href="https://example.com/zh/products/a100/">
<link rel="alternate" hreflang="zh-Hans"
      href="https://example.com/zh/products/a100/">
<link rel="alternate" hreflang="en"
      href="https://example.com/en/products/a100/">

这里两页的 alternate 集合相同,各自的 canonical 不同。Google 的语言版本标注要求包含自身与对应版本,使用完整 URL,并保持相互指向。语言版本标注说明

如果英文内容面向多个市场,这个示例中的 en 表示通用英文,不应为了看起来更"本地化"而虚构不同国家的独立页面。只有实际存在相应内容与维护安排时,才进一步设计地区版本。

标注不能替代正文语言,也不是越多越好

zh-Hans 表示简体中文,en 表示通用英文;地区代码不能单独用作语言标注。Google 根据页面内容判断语言,不能把中文正文加上 hreflang="en" 就当成英文版。正文、导航、附件与提示仍需各自检查。Google 本地化版本说明

语言关系可通过 HTML、HTTP 响应头或站点地图表达,选择适合维护的一种即可,无需为了搜索收益重复维护三套实现。若需要为未匹配语言指定默认去向,可按实际设计使用 x-default;它不是缺失英文产品页的替代品,也不能据此把中文 B200 与英文目录声明为同一产品的译文。

从已发布的内容生成页面关系

语言链接与页面标注可以来自同一份已发布内容映射,减少人工维护多份地址的差异。这里强调的是数据来源一致,不限定某种框架或插件。

一个简单的映射可以记录产品标识、语言、网址和发布状态。翻译草稿留在内容系统中,页面生成只使用已发布的版本。这样,B200 的英文稿尚未完成时,就不会被误当成可访问的对应页。

发布状态还应有内容依据:正文已核准,不代表附件已经就绪。可以在发布记录中分别保留 content_id、locale、url、status、fact_revision 和 attachment_locale;这些字段是设计建议,图中的改造界面不代表现有产品已提供相应功能。涉及下载的产品页,应同时确认附件属于同一型号且采用预期语言。

部署后的检查不能只看模板。应打开实际中英文页面,核对最终 URL、HTML 标注、页面可见的语言切换链接,以及正文对应关系。内部链接应使用确定的规范地址,避免继续链接到已替换的重复地址。产品详情被误关联到另一型号时,HTML 语法即使正确,也没有表达正确的内容关系。

可以据此安排少量有明确目的的验证:

  • A100 两种语言地址都能直接打开,并显示同一产品的相应语言内容。
  • 两页语言切换都能到达对应产品,不需要从首页重新查找。
  • 实际输出的 canonical 与 alternate 地址符合预期,没有混入测试域名。
  • B200 未发布的英文地址没有作为有效译文出现在语言菜单或标注中。

还应验证新增语言后两页都更新了对应关系,避免只改英文页、中文页没有返回标注。若存在跳转,继续核对最终目标;若某译文撤下,及时清理指向它的语言菜单与标注。保留一份按产品标识检查的实际结果,便于区分地址错误、关系错误与内容错误。

这些属于上线检查建议,不能单凭标注正确推定搜索引擎已经收录或采用了指定页面。

产品变更后,也要能找到受影响的译文

网站上线后,型号、参数或可提供的选项可能继续变化。例如,A100 的接口规格从事实版本 3 修订为版本 4,英文页仍依据版本 3 编写,此时不能只凭"已发布"状态认定它仍可用。应通过产品标识找到各语言正文和附件,将受影响的版本标记为待复核,并由产品人员判断哪些信息需要立即纠正。版本号仅用于说明维护方法。

对于关键参数已经失效的页面,应及时纠正;暂时无法完成核准时,可以先撤下不准确的信息,或按实际情况限制该页的对外使用。不能只在后台标记"待更新",却继续向客户展示确定性错误。

展前建立的语言关系如果可以持续维护,后续再增加产品与市场时,就有了可靠的基础。业务人员能够确认链接对应什么内容,开发人员也能够追踪页面之间的关系,英文版才会成为可以长期使用的一部分。

相关推荐
狂师3 小时前
太强了!GitHub上开源了一款AI自动化测试框架,0代码搞定前后端测试!
前端·后端·测试
只睡四小时3 小时前
Local-First 数据契约:一张表装下 4 类数据
前端·javascript·架构设计·local-first·数据契约
迅猛龙办公室3 小时前
Python函数实现反转一个只有3位数的整数
开发语言·前端·python
我星期八休息3 小时前
Redis 的原理和使用(2)
前端·数据库·redis·python·mysql·缓存·bootstrap
Java后端的Ai之路3 小时前
19-ReactJS最佳实践
前端·react.js·前端框架
溪语流沙3 小时前
【Web全栈进阶】文件上传与图片展示:早报站的第一张图片
前端·vue.js·python·fastapi
alwaysrun3 小时前
Web之wasm-bindgen详解
前端·wasm·bindgen
鬼手点金3 小时前
如何选择模型
java·前端·人工智能·git·深度学习
恋猫de小郭3 小时前
Dart 3.15 新特性:this 终于支持类型提升了
android·前端·flutter
IT_陈寒4 小时前
Vue开发实战:从入门到精通
前端·人工智能·后端