在当今全球化的互联网环境中,许多网站都需要为不同语言或地区的受众提供内容。为了确保这些多语言页面能够被搜索引擎正确理解和展示,hreflang 标签扮演着至关重要的角色。它能够告诉搜索引擎,您的网站有多个语言版本,并且哪个版本应该展示给哪个用户。对于使用安企CMS(AnQiCMS)构建多语言网站的用户来说,理解并正确配置 hreflang 标签,是优化搜索引擎排名(SEO)和提升用户体验的关键一步。

hreflang 标签为何对多语言网站至关重要?

想象一下,如果您的网站提供中文和英文内容,但搜索引擎无法区分这些页面是同一内容的翻译版本,它可能会将它们视为重复内容,从而影响您的网站排名。更糟糕的是,一个说英语的用户可能会在搜索结果中看到您的中文页面,导致用户体验不佳。

hreflang 标签就是解决这些问题的“地图”。它清晰地指明了:

  1. 这个页面是哪个语言的?
  2. 它是否有其他语言或地区对应的版本?
  3. 其他版本对应的 URL 是什么?

通过这种明确的指示,搜索引擎能够将正确语言的页面展示给对应的用户,避免重复内容惩罚,并显著提升全球用户的访问体验。

安企CMS 中的多语言功能概览

安企CMS 从设计之初就考虑到了多语言和SEO的需求。在“项目优势”中明确提到它支持“多语言内容的切换和显示,满足全球化的内容推广需求”以及“高级 SEO 工具”。这意味着安企CMS 提供了内置的机制来管理不同语言的内容和网站版本。

在安企CMS的后台,您通常会在“全局功能设置”或“多站点管理”中配置不同的语言版本网站。每个语言版本都有其独立的URL,例如 yoursite.com/zh/ 用于中文版,yoursite.com/en/ 用于英文版,或者使用不同的子域名如 zh.yoursite.comen.yoursite.com。一旦这些语言站点在后台设置完毕,安企CMS 的模板引擎就能灵活地调用这些信息。

一步步实现在 AnQiCMS 模板中添加 hreflang 标签

要在安企CMS 模板中添加 hreflang 标签,最理想的做法是将它们放置在每个页面的 <head> 部分。这通常意味着您需要在网站的基础模板文件(例如 base.html)中进行修改,以确保这些标签能够全局生效。

安企CMS 提供了一个名为 {% languages %} 的模板标签,专门用于获取所有已配置的多语言站点信息。利用这个标签,您可以轻松地遍历所有语言版本,并为每个页面动态生成对应的 hreflang 链接。

  1. 定位您的基础模板文件: 根据安企CMS的模板制作约定,基础模板文件通常命名为 base.html,位于您当前主题的根目录下。如果您有针对移动设备的单独模板,可能还需要在 mobile/base.html 中进行相同的操作。

  2. 使用 {% languages %} 标签:base.html 文件的 <head> 区域内,找到合适的插入点。然后使用 {% languages %} 标签来获取所有语言站点的列表。这个标签会返回一个包含每个语言站点信息的数组,您可以对其进行循环遍历。

  3. 构建 hreflang 标签: 在循环中,对于每个语言站点,您将需要提取其链接(item.Link)和语言代码(item.Language),然后将它们插入到 <link rel="alternate" href="..." hreflang="..." > 结构中。

以下是具体的代码示例,您可以将其添加到 base.html<head> 部分:

{# 在 head 标签中添加 hreflang 标签 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}

这段代码的含义是:

  • {%- languages websites %}:这会调用安企CMS内置的 languages 标签,获取所有已配置的多语言站点列表,并将其赋值给 websites 变量。
  • {%- for item in websites %}:遍历 websites 数组中的每一个语言站点,每次循环将当前语言站点的信息存储在 item 变量中。
  • <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">:这是 hreflang 标签的核心。
    • rel="alternate":表示这是一个替代版本。
    • href="{{item.Link}}":指向当前页面的这个语言版本的 URL。安企CMS 的 item.Link 会自动指向当前页面的对应语言版本链接。
    • hreflang="{{item.Language}}":指定该链接所指向页面的语言代码。item.Language 会输出如 zh-CNen 等格式的语言代码。

这样,无论用户访问哪个语言版本的页面,其 <head> 中都会包含指向所有可用语言版本的 hreflang 标签集合。例如,如果您的网站有中文(zh-CN)和英文(en)版本,当用户访问中文页面时,页面源码中会同时包含指向中文页面自身的 hreflang 标签和指向英文页面对应内容的 hreflang 标签,反之亦然。

配置 hreflang 的注意事项

虽然安企CMS的模板标签简化了 hreflang 的实现,但仍有一些重要细节需要您注意,以确保其效果最大化:

  1. 双向链接: 所有的 hreflang 链接都应该是双向的。如果页面 A 指向页面 B,那么页面 B 也必须指向页面 A。上面提供的代码片段会自动处理这一点,因为所有语言版本的页面都会输出相同的 hreflang 列表。

  2. 自引用 hreflang 每个页面都应该包含一个指向其自身的 hreflang 标签。例如,英文页面应该有一个 hreflang="en" 标签,指向它自己的英文URL。上述代码也自动包含了这一点。

  3. x-default 标签: 除了为特定语言或区域版本指定 hreflang 之外,您还可以考虑添加一个 hreflang="x-default" 标签。这个标签的作用是指定一个默认页面,当用户的语言或区域不匹配任何已明确声明的版本时,搜索引擎会向他们展示这个 x-default 页面。通常,这会指向您的主要或“全球”版本。如果您希望添加 x-default,可以在 {%- languages %} 循环之外,再添加一行指向您网站主语言或默认语言的 URL,例如:

    <link rel="alternate" href="{% system with name='BaseUrl' %}" hreflang="x-default">
    

    这里 {% system with name='BaseUrl' %} 将获取您网站的基准URL。

  4. 语言和区域代码的规范性: 确保您使用的语言代码(ISO 639-1)和可选的区域代码(ISO 3166-1 Alpha 2)是标准且正确的。例如,纯英文是 en,针对