面向国际化页面的 hreflang
向搜索引擎标示语言和地区变体
面向国际化页面的 hreflang 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
hreflang 解决的问题
当您分别以英语、土耳其语和日语发布同一篇文章时,搜索引擎需要知道应该在每位用户的搜索结果中显示哪个版本。没有 hreflang,谷歌可能会提供错误的语言版本,或将这些变体视为重复内容。
link 标签
在 <head> 中使用 <link rel="alternate" hreflang="..." href="..."> 声明每个替代版本。hreflang 属性使用 BCP-47 语言代码(en、tr)或语言与地区组合代码(en-US、en-GB、pt-BR)。
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">必须相互引用
每个版本都必须链接到其他所有版本,包括自身。对于不具备双向链接的 hreflang 集群,谷歌会直接忽略。英语页面链接到 TR 和 JA;土耳其语页面链接到 EN 和 JA;其他页面依此类推。
自引用
每个页面都应通过 hreflang 链接到自身。英语页面必须包含指向自身网址的 <link rel="alternate" hreflang="en" ...>。这属于“相互引用”的一部分——谷歌利用自链接确认页面属于该集群。
x-default 值
使用 hreflang="x-default" 指定谷歌无法匹配用户语言时所使用的备用页面。它通常指向英语版本或语言选择器落地页,让未针对特定语言的用户也能进入合理的页面。
语言代码与地区代码
en 面向所有英语使用者。en-US、en-GB 和 en-AU 则在内容因地区而异时(货币、拼写、配送)面向相应国家或地区的用户。除非内容确实不同于通用版本,否则不要指定地区。
替代声明方式
也可以在 HTTP Link 标头中声明 hreflang(适用于 PDF 等非 HTML 文件),或在 XML 网站地图中使用 <xhtml:link rel="alternate" hreflang="...">。这三种方法完全等效;请选择最容易维护的一种。
网站地图声明
对于拥有多种语言的大型网站,在网站地图中声明 hreflang 比使用 HTML 标签更易于扩展:每个网址对应一个网站地图条目,其中列出所有替代版本,从而避免在每个页面的模板中重复配置。搜索控制台会标记缺少的相互引用,让错误尽早暴露。
常见错误
使用下划线(en_US)而不是连字符(en-US)、指向非 200 网址、在集群中混用 http 和 https,或忘记自链接,都会在没有明显提示的情况下破坏 hreflang。发布后请运行谷歌搜索控制台的国际定位报告。
不能替代翻译
hreflang 只会告诉谷歌哪些翻译版本已经存在。页面本身仍然需要真正翻译的内容——谷歌不会替您翻译。如果页面有 80% 是英语却发布了 hreflang,网站会在没有明显提示的情况下扰乱索引。
与 og:locale 和 lang 结合使用
将文档的 <html lang="..."> 和 og:locale 设置为与页面实际语言一致。hreflang 告诉搜索引擎当前页面有哪些同组版本;lang/og:locale 则告诉浏览器和社交网络当前页面使用的语言。要获得完整的信息,两者都不可缺少。
知识检查
hreflang="x-default" 指向什么页面?
总结
hreflang 将页面的翻译版本关联起来,让搜索引擎提供正确的语言版本。请使用 BCP-47 代码,以相互引用的方式声明替代版本(包括自链接),为备用页面添加 x-default,并在谷歌搜索控制台的国际定位报告中进行验证。翻译质量以及 lang/og:locale 标签也必须保持一致。
常见问题解答
「面向国际化页面的 hreflang」课时是免费的吗?
是的 — 「面向国际化页面的 hreflang」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 HTML Academy 课程的其余内容,请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「面向国际化页面的 hreflang」这节课中我会学到什么?
向搜索引擎标示语言和地区变体 你通过在浏览器中直接运行的动手代码来练习 HTML Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。
「面向国际化页面的 hreflang」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗?
能。每节 HTML Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。