国内官网增加英文版: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 编写,此时不能只凭"已发布"状态认定它仍可用。应通过产品标识找到各语言正文和附件,将受影响的版本标记为待复核,并由产品人员判断哪些信息需要立即纠正。版本号仅用于说明维护方法。

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

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

相关推荐
剪刀石头布啊2 小时前
泛洪DFS、BFS
前端
qetfw2 小时前
Windows Server AD CS:根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊2 小时前
为什么React组件很少前缀,而vue的不少组件都有前缀
前端
剪刀石头布啊2 小时前
gird网格布局
前端
啃火龙果的兔子2 小时前
Google Chrome(谷歌浏览器)常用快捷键
前端·chrome
剪刀石头布啊2 小时前
js真的是单线程实现异步并发么?
前端
剪刀石头布啊2 小时前
js中改变this指向的操作有哪些
前端
剪刀石头布啊2 小时前
vue、react 列表中使用 index 作为 key 的话,修改某一个元素后会发生什么
前端
方方洛2 小时前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架