在多语言站点中,如何使用`languages`标签构建语言切换菜单和输出`hreflang`标签?

在安企CMS(AnQiCMS)中构建多语言站点,不仅能够拓展您的市场范围,还能为不同地区的用户提供更友好的访问体验。要实现这一目标,核心在于有效利用languages标签来创建语言切换菜单,并正确输出hreflang标签以优化搜索引擎识别。

AnQiCMS作为一款注重企业级应用的内容管理系统,其强大的多语言支持是其亮点之一。它允许您为网站内容创建多个语言版本,并提供便捷的工具来管理这些内容。而languages标签,正是将后台配置的多语言能力呈现在网站前端的关键。

核心工具:languages 标签的运用

AnQiCMS 提供了一个专门用于处理多语言站点信息的内置标签——languages。这个标签的设计目的是获取您网站上所有已配置的多语言站点列表。它是一个功能直接且强大的工具,不接受任何参数,会默认获取所有在后台设置并启用的多语言站点信息,这使得它在使用上非常简单。

当您在模板中使用{% languages websites %}...{% endlanguages %}时,websites变量将成为一个数组对象,其中包含了每个语言版本站点的详细信息。您可以通过循环这个websites数组,来访问每个语言站点的具体数据。

每个item对象(即websites数组中的每个元素)都提供了以下有用的字段:

  • LanguageName: 站点的语言名称(例如“简体中文”,“English”)。
  • Language: 语言的ISO代码(例如zh-CNen-US),这对于hreflang标签至关重要。
  • LanguageEmoji: 一个代表该语言的Emoji图标,用于视觉化的语言切换。
  • LanguageIcon: 自定义的语言图标URL,通常是一个小国旗图片。
  • Name: 站点的显示名称。
  • Link: 该语言版本站点的完整URL。
  • Remark: 站点的备注信息。
  • Nofollow: 是否添加nofollow属性。

了解了languages标签能提供哪些信息后,我们就可以着手构建语言切换功能了。

构建语言切换菜单

为了让用户在不同语言版本之间轻松切换,一个直观且易于访问的语言切换菜单至关重要。使用languages标签,您可以灵活地设计菜单样式。

以下是一个基本的语言切换菜单代码示例,您可以将其放置在网站的页眉、页脚或侧边栏等显眼位置:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>选择语言:</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="lang-option">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

在这段代码中:

  • 我们首先使用{%- languages websites %}获取所有语言站点列表。websites变量将包含所有语言版本的信息。
  • {%- if websites %}检查是否有可用的语言站点,避免在没有配置多语言时显示空菜单。
  • {%- for item in websites %}循环遍历每个语言站点。
  • item.Link提供了指向该语言版本站点的完整URL,确保用户点击后能正确跳转。
  • 您可以选择item.LanguageIcon来显示自定义的国旗图标,或者使用item.LanguageEmoji显示更简洁的Emoji表情,或者直接显示item.LanguageName(语言名称)。这种灵活性让您可以根据网站的设计风格进行调整。

通过这样的菜单,您的用户可以轻松地在网站的不同语言版本之间进行切换,极大地提升了用户体验。

输出 hreflang 标签以优化 SEO

除了用户可见的语言切换菜单,搜索引擎优化(SEO)也要求我们在技术层面清晰地告知搜索引擎不同语言版本的对应关系。这时,hreflang标签就派上了用场。hreflang标签可以帮助搜索引擎理解您网站内容的地理或语言定位,避免多语言内容被视为重复内容,并确保将正确的内容版本呈现给不同语言或地区的搜索用户。

hreflang标签通常放置在每个页面的<head>区域中,其标准格式为<link rel="alternate" href="[URL]" hreflang="[语言代码]"。结合languages标签,您可以很方便地为每个页面生成这些标签:

<head>
    {# 其他head标签... #}
    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
    {%- endfor %}
    {%- endlanguages %}
</head>

在这段代码中:

  • item.Link提供了当前页面对应语言版本的完整URL。请注意,这里的item.Link会自动指向当前页面的语言版本URL,AnQiCMS会智能匹配。
  • item.Language则提供了对应的语言代码(例如enzh-CNfr等),这正是hreflang标签所必需的属性。
  • 这些标签生成后,会被放置在每个页面的<head>区域中,确保搜索引擎能够正确识别和索引您网站的多语言内容。

正确配置hreflang标签对于多语言SEO至关重要。它不仅能够提升您网站在全球范围内的可见度,还能避免因语言版本内容相似而导致的SEO惩罚。

实施与注意事项

要确保languages标签能够正确工作,您首先需要在AnQiCMS后台的“后台设置”->“全局设置”中配置和管理多语言站点。只有在后台启用的语言版本,才会被languages标签获取到。此外,在“全局设置”中设置“默认语言包”可以确保系统界面和一些内置提示信息以选定的语言显示。

通过结合使用languages标签构建的用户友好型语言切换菜单,以及面向搜索引擎的hreflang标签,您不仅能显著提升用户的访问体验,还能有效地优化网站的全球SEO表现,帮助您的内容触达更广泛的受众。AnQiCMS为您提供了所有必需的工具,让多语言网站的运营变得简单高效。


常见问题(FAQ)

1. 配置languages标签后,为什么语言切换菜单或hreflang标签不显示任何内容? 这通常是因为您在AnQiCMS后台尚未配置或启用任何多语言站点。languages标签会获取所有在后台“全局设置”中“多站点管理”下设置并启用的语言站点。请检查您的后台配置,确保至少有一个除默认站点以外的语言站点已被添加和激活。

**2. hreflang标签中的hreflang属性值(即item.Language)应该如何填写才符合