In the operation of multilingual websites, it is crucial to ensure that search engines can accurately understand the language and region targeted by your content, which is essential for improving user experience and search engine optimization (SEO).hreflangThe label is the key tool to solve this problem.It tells search engines that your website has content variations for different languages or regions, thus avoiding duplicate content issues and helping search engines display the most relevant pages for users of different languages.

AnQiCMS as a multilingual content management system has already achievedhreflangTags provide a solid foundation. The built-in multilingual support feature allows you to easily create and manage content in different language versions, whilelanguagesthe flexible application of tags, then enableshreflangThe deployment of tags becomes intuitive and efficient.

AnQiCMS Overview of Multilingual Capabilities

One of AnQiCMS's core strengths is its powerful multilingual support.It not only allows you to configure different language packages for your website, but more importantly, you can create multiple language versions of the same content.For example, an article introducing a product, you can have a Chinese version, an English version, and even more language versions, and manage and publish them independently.hreflangThe prerequisite for tags is becausehreflangEssentially, it is to declare the relationship between these language variants.

In the AnQiCMS backend, you can usually find the related language package configuration in 'Global Settings' or 'Content Settings' and set the corresponding language for each site or content.After the multilingual content is ready, the next step is to correctly declare these relationships on the website front-end page.

How to implement on AnQiCMS websitehreflangTag

ImplementationhreflangTags, we need to add them in the HTML page header of the website<head>Area addition<link>The tag indicates all language variants corresponding to the current page. This can be done in AnQiCMS by modifying the template file.

  1. Locate the core template fileThe template structure of AnQiCMS typically includes a template file used to define the common parts of a page, such asbash.htmlOr similar named header files. These files are usually located in the template theme directory you are currently using.templatefolder. In this file, you can find<head>Area, this is wherehreflangThe ideal location for the tag, as it will be applied to all pages of the website.

  2. UtilizelanguagesThe tag retrieves multilingual site informationAnQiCMS provides a namedlanguagesThe template tag is used to retrieve all multi-language site information configured on the current website. This tag is used intag-/anqiapi-other/10537.htmlThe document describes it in detail, it does not require any parameters, and it will return an array object containing information about all language sites.

    You can use it in the template like this:

    {%- languages websites %}
{# 循环遍历所有语言站点 #}
{%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}

    here,websitesIt is a temporary variable that contains the details of each language site. In the loop,itemrepresents each specific language site.

    • item.LinkThis will output the link (URL) of the language version of the page. AnQiCMS ensures that the link provided here is a complete, absolute path URL, this ishreflangThe label requirement.
    • item.LanguageIt will output the language code corresponding to the language version, usually in ISO 639-1 format (for exampleenrepresents English,zhRepresents Chinese, may also include region codes (such as)en-USRepresents American English,zh-CNRepresents Simplified Chinese).

  3. addx-defaultTags (optional but recommended)Except to specify for each language version,hreflangOutside the tag, it is usually recommended to add onex-default.x-defaultThe tag is used to specify the default page that the search engine should display when the user's browser language does not match any specific language provided by your website.This is typically your main language page, or a language selector page.

    Assuming your primary language is English, you can add a line after the above loopx-defaultTags:

    <link rel="alternate" href="您的默认/主语言页面的完整URL" hreflang="x-default" />

    This "default/main language page's complete URL" is usually where you arewebsitesin the list of someitem.Linkvalue. You can choose one asx-default.

a complete template code example

Integrate the above content into your<head>area, it may look like this:

<!DOCTYPE html>
<html lang="zh-CN"> {# 这里的 lang 属性应与当前页面的实际语言代码一致 #}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">

    {# 其他您的CSS、JS文件引入 #}
    <link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">

    {# AnQiCMS 自动生成的 Canonical 标签 (如果存在) #}
    {%- tdk canonical with name="CanonicalUrl" %}
    {%- if canonical %}
    <link rel="canonical" href="{{canonical}}" />
    {%- endif %}

    {# AnQiCMS Hreflang 标签配置 #}
    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
    {%- endfor %}
    {# 假设您的英文版是默认语言或通用 fallback 语言 #}
    {%- for item in websites %}
        {%- if item.Language == "en" %} {# 替换成您实际的 x-default 语言代码 #}
        <link rel="alternate" href="{{item.Link}}" hreflang="x-default" />
        {%- endif %}
    {%- endfor %}
    {%- endLanguages %}
</head>
<body>
    <!-- 您的网站内容 -->
</body>
</html>

Please note, in the above codelang="zh-CN"attributes andx-defaultthe judgment ofitem.Language == "en"This is an example, you need to adjust it according to the actual situation of your website and the main language configuration. Usually,langThe attribute should reflect the real language of the current page, andx-defaultIt points to the universal version that you want the search engine to display when it cannot determine the user's language.

ConfigurationhreflangImportant hints

  • Placement location:hreflangThe tag must be placed in the HTML document's<head>Section.
  • Absolute URL: Make surehrefThe URL in the attribute is the complete absolute path, including the domain and protocol (for examplehttps://www.example.com/en/page)。AnQiCMS'sitem.Linkusually meets this requirement.
  • Mutual referenceEach language version of the page should include a set ofhreflangThe label, not only points to all other language versions, but also must include a link to itself. AnQiCMS'languagesThe tag automatically generates links to all configured language sites, as long as all sites use this common header, it can achieve mutual references and self-references.
  • Language and region codes:hreflangThe attribute values should follow the ISO 639-1 language codes (for exampleen/zh) and optional ISO 3166-1 Alpha 2 country codes (for exampleen-US/zh-CNMake sure your AnQiCMS backend is configured with the correct language code.
  • Consistency: The entire website'shreflangThe strategy should be consistent, ensuring that all related language versions are correctly linked together.

By following the above steps, you can effectively deploy on the AnQiCMS website.hreflangThe tag helps search engines better understand your multilingual content layout, thereby providing more accurate search results for users in different regions of the world, and enhancing the international SEO performance of the website.

Frequently Asked Questions (FAQ)

Q1:hreflangWhere should the tags be placed on the website?A1:hreflangThe tag must be placed in the HTML document's<head>In the block. Placing it outside this area may cause search engines to fail to recognize or correctly process these tags.

Q2: AnQiCMS will automatically generatex-defaultDo you need tags? If so, how should I set them up?A2: According to the current document description, AnQiCMS'slanguagesThe tag lists all configured multilingual site links but does not explicitly mention that they will be automatically generatedx-defaulttag. You need to manually specify a page in the template according to your website strategyx-default. This is typically your main language version page or a language selector page. For example, you can choose the English version as the default and then add an extra one in the templatex-defaultthe tag and use it.hrefLink to your English version page.

Q3: If my website has multiple dialects (such as Simplified Chinese, Traditional Chinese),hreflangHow to set the tags?A3: For different dialects, you should use language codes with region codes. For example, Simplified Chinese can usezh-CN, Traditional Chinese (Taiwan) can usezh-TW，Traditional Chinese (Hong Kong) can be usedzh-HK. Make sure the AnQiCMS backend is configured with the correct language codes for these dialects,languagestags will automatically output the correspondingitem.LanguageThe value thus generates the correcthreflang.