In today's global internet environment, many websites need to provide content for audiences of different languages or regions. In order to ensure that these multilingual pages can be correctly understood and displayed by search engines,hreflangLabels play a crucial role.It can tell search engines that your website has multiple language versions and which version should be displayed to which user.hreflangTags are a crucial step for optimizing search engine rankings (SEO) and enhancing user experience.

hreflangWhy are tags essential for multilingual websites?

Imagine if your website offers Chinese and English content, but the search engine cannot distinguish these pages as translations of the same content, it may consider them as duplicate content, which may affect your website's ranking.What's worse, an English-speaking user may see your Chinese page in search results, leading to a poor user experience.

hreflangLabels are the 'map' for solving these problems. It clearly indicates:

  1. What language is this page?
  2. Does it have other language or regional versions?
  3. What is the URL corresponding to the other version?

By this clear instruction, the search engine can display the correct language pages to the corresponding users, avoid the penalty for duplicate content, and significantly improve the global user experience.

AnQi CMS Overview of Multilingual Features

AnQi CMS was designed from the ground up with multilingual and SEO needs in mind.It explicitly mentions in the "Project Advantages" that it supportsThis means that AnQi CMS provides built-in mechanisms to manage content in different languages and website versions.

In the AnQi CMS backend, you usually configure different language version websites in "Global Function Settings" or "Multi-Site Management". Each language version has its own independent URL, such asyoursite.com/zh/Used for the Chinese version,yoursite.com/en/Used for the English version, or you can use a different subdomain such aszh.yoursite.comanden.yoursite.comOnce these language sites are set up in the background, the template engine of AnQiCMS can flexibly call this information.

Step by step to add in AnQiCMS templatehreflangTag

Add to the AnQiCMS templatehreflangTags, the best practice is to place them on each page of<head>section. This usually means you need to modify the basic template files of the website (such asbase.htmlModify them in the context

AnQi CMS provides a named{% languages %}The template tag is used specifically to retrieve information about all configured multilingual sites. By using this tag, you can easily iterate through all language versions and dynamically generate corresponding content for each page.hreflanglinks.

  1. Locate your basic template file:According to the template production conventions of Anqi CMS, the basic template file is usually namedbase.htmlIt is located at the root directory of your current topic. If you have a separate template for mobile devices, you may also need to perform the same operation inmobile/base.html.

  2. Use{% languages %}Tags:Inbase.htmlthe file<head>Within the area, find a suitable insertion point. Then use{% languages %}Tag to get a list of all language sites. This tag will return an array containing information about each language site, which you can iterate over.

  3. BuildhreflangTags:In the loop, for each language site, you will need to extract its link (item.Link) and the language code (item.Language), and then insert them into<link rel="alternate" href="..." hreflang="..." >the structure.}

Here is a specific code example, you can add it tobase.htmlof<head>Part:

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

The meaning of this code is:

  • {%- languages websites %}: This will call the built-in of AnQi CMSlanguagesLabel, get the list of all configured multilingual sites and assign it towebsitesVariable.
  • {%- for item in websites %}：Traversewebsiteseach language site in the array, store the information of the current language site initemthe variable.
  • <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">This ishreflangthe core label.
    • rel="alternate"This indicates an alternative version.
    • href="{{item.Link}}"Points to the URL of this language version of the current page. Anqicms'item.LinkWill automatically point to the corresponding language version link of the current page.
    • hreflang="{{item.Language}}"Specify the language code for the page that the link points to.item.LanguageIt will output something likezh-CN/enlanguage codes in this format.

In this way, no matter which language version of the page the user visits,<head>It will include links to all available language versionshreflangcollections. For example, if your website has Chinese(zh-CN) and English(enVersion, when the user accesses the Chinese page, the page source code will also contain links to the Chinese page itselfhreflangtags and links to the corresponding English page contenthreflangtags, vice versa.

ConfigurationhreflangAttention事项

Although the template tags of Anqi CMS simplifiedhreflangimplementation, but there are still some important details that you need to pay attention to in order to maximize its effect:

  1. Bidirectional link:AllhreflangThe links should be bidirectional.If page A points to page B, then page B must also point to page A.hreflangList.

  2. Self-referencehreflang:Each page should include a link to itself.hreflangLabel. For example, an English page should have ahreflang="en"Label, pointing to its own English URL. This is also automatically included in the code.

  3. x-defaultTags:Specify for a specific language or regional version.hreflangIn addition, you can also consider adding ahreflang="x-default"The tag specifies a default page that search engines will display to users when their language or region does not match any explicitly declared version.x-defaultPage. Usually, this points to your main or 'global' version. If you wish to addx-default, you can{%- languages %}Add a line outside the loop that points to the URL of your website's main or default language, for example:

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

    Here{% system with name='BaseUrl' %}It will retrieve the base URL of your website.

  4. Normativity of language and region codes:Ensure that the language code (ISO 639-1) and the optional region code (ISO 3166-1 Alpha 2) you are using are standard and correct. For example, pure English isenfor, to