How to add `hreflang` tags in AnQiCMS template for multilingual pages to optimize SEO?

Calendar 👁️ 62

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

Related articles

How to implement the link display for multi-language site switching in AnQiCMS?

In today's globalized digital world, multilingual support for websites has become crucial for reaching a wider audience and expanding market boundaries.AnQiCMS (AnQiCMS) fully understands this need, therefore, it takes multilingual support as one of its core features, aiming to help users efficiently build and manage multilingual websites.This article will focus on how to implement the display of language switch links for multi-language sites in AnQiCMS, supplemented by necessary SEO practices, and provide you with a comprehensive guide.

2025-11-08

How to define and use temporary variables in AnQiCMS templates to simplify content display?

When developing templates in AnQiCMS, we often encounter situations where we need to process some complex data or reuse a certain calculation result.To make the template code more concise, readable, and maintainable, AnQiCMS provides a powerful mechanism for defining and using temporary variables, mainly through the `with` and `set` tags.Reasonably utilizing them can greatly enhance our content display efficiency and flexibility. ### Simplified Content Display: Why do we need temporary variables?

2025-11-08

How to automatically parse a URL string into a clickable HTML link in AnQiCMS template?

In AnQiCMS template development, we often encounter the need: the URL string contained in the content should be automatically converted into a clickable HTML link to enhance user experience and page interactivity.Manually adding links is undoubtedly cumbersome and unrealistic, fortunately AnQiCMS provides powerful template filters that can help us easily achieve this function.AnQiCMS template engine supports Django-like syntax, which includes a series of practical filters that can process variable content.For automatic parsing of URL strings

2025-11-08

How to automatically wrap long text to a specified length in AnQiCMS template?

In the presentation of website content, the way long texts are displayed is often a key factor affecting user experience and the beauty of the page.When we need to display a long text content, such as an article summary, product description, or detailed introduction, in a more readable and layout-adaptive way, AnQiCMS's template function provides a powerful and flexible solution.AnQiCMS uses syntax similar to Django template engine, with various built-in filters (Filters) that can help us easily format text.

2025-11-08

How does AnQiCMS call and display data for specific sites based on different site IDs?

AnQiCMS multi-site data call: easily achieve content sharing and linkage display AnQiCMS is a content management system designed specifically for small and medium-sized enterprises and content operation teams, and its multi-site management function is one of its core highlights.In actual operation, we often encounter such needs: the main station needs to display the latest products of various sub-sites, or all sub-sites need to uniformly display the contact information of the company's headquarters, or multiple content platforms hope to aggregate and display articles on a specific theme.In this case, how to efficiently call and display data from a specific site is particularly important

2025-11-08

How to enable Markdown editor in AnQiCMS and display mathematical formulas and flowcharts correctly?

Today, with the increasingly rich content creation, plain text is no longer sufficient to express complex concepts.If complex mathematical formulas in academic articles or clear process diagrams in project management can be presented intuitively on the web, it will undoubtedly greatly enhance the professionalism and user experience of the content.AnQiCMS (AnQiCMS) understands this need, through the built-in Markdown editor and flexible frontend configuration, allowing you to easily implement these advanced content displays.This article will give a detailed introduction on how to enable Markdown editor in AnQiCMS

2025-11-08

How to correctly use the double curly braces `{{}}` and percentage signs `{% %}` tags in AnQiCMS templates to control the display logic of content?

When using AnQiCMS to build and manage websites, flexibly using template language is the key to improving efficiency and achieving personalized display.Among them, the double curly braces `{{}}` and the percentage tags `{% %}` are two core 'roles' that control the display logic of template files.They each have different responsibilities, understanding and using them correctly can help you easily master the powerful template functions of AnQiCMS.

2025-11-08

How to customize the AnQiCMS content model to meet the display needs of different content types (such as articles, products)?

In today's rapidly changing digital world, website content is no longer just simple articles or product introductions.In order to accurately reach users and improve conversion rates, we often need to tailor the display form and data structure of different types of content to meet their needs.AnQiCMS (AnQi content management system) fully understands this, and the flexible content model function it provides is a powerful tool to solve this challenge.

2025-11-08