How to display the language switch option and hreflang tags for multilingual sites in AnQi CMS?

Today, with the increasing popularity of globalization, providing multilingual support for websites has become a basic requirement for expanding the market and serving users in different regions.AutoCMS (AutoCMS) understands this need, and built-in powerful multilingual functionality allows website administrators to easily achieve content internationalization.hreflangLabel, to optimize the internationalization identification of the search engine.

Understand the multilingual capabilities of AnQiCMS.

AnQiCMS as an efficient and customizable content management system, its project advantages clearly state that it supports the switching and display of multi-language content, aiming to help enterprises expand into the international market.This means that the system not only provides the infrastructure for content management, but also simplifies the deployment and maintenance of multilingual sites.In the Anqi CMS backend, we can create sites with different language versions through the "Multi-site Management

Display the option to switch between multilingual sites.

To facilitate users to switch between different language versions, it is usually set up a language switcher in a prominent position on the website (such as the navigation bar, footer). In AnQiCMS, this can be done bylanguagesThe template tag can easily be implemented.

languagesThe tag can retrieve the list of all configured multilingual sites. It does not require any parameters and can be used directly.{% languages websites %}English can obtain an array containing information about all language sites. Next, we can iterate over this array to generate a link for each language site.

Each language site information (itemAll of them include multiple useful fields, such as:

  • LanguageName: The display name of the language (such as "Simplified Chinese", "English").
  • Language:Language code (such as “zh-CN”, “en”), this ishreflangtag's key.
  • LanguageEmoji:Represents the emoji of the language (such as 🇺🇸, 🇨🇳).
  • LanguageIcon:If configured, the corresponding language icon can be displayed.
  • Link:The URL address of the language site, used for users to click and switch.

Below is an example of a language switcher implemented in a template:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言:</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="language-option">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} Flag" class="language-flag" />
        {%- else %}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

This code will traverse all configured language sites and create a link for each site.If the site is configured with an icon, the icon will be displayed; otherwise, the language's emoji will be displayed.Click the link, and the user can easily jump to the corresponding language version of the page.

ImplementationhreflangTags for optimizing SEO

hreflangLabels are crucial for search engine optimization on multilingual and multi-regional websites.It can tell search engines which pages are alternative versions of the same content, and specify the target language and geographic region for these versions.This helps the search engine provide users with the most relevant language or regional pages while avoiding penalties for duplicate content.

Combined with in AnQiCMS,languagesTags, we can also generate them convenientlyhreflangTags. These tags are usually placed in HTML documents.<head>areas.

The following is on the page<head>some additionshreflanga tag in a template:

<head>
    {# 其他head内容... #}

    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}" />
    {%- endfor %}
    {%- endLanguages %}

</head>

This code will generate corresponding language versions for all configured languages on the current page.hreflangLink.item.LinkEnsured that the link points to the correct language page,item.Languageand provided standard language codes,enRepresents English,zh-CNRepresenting Simplified Chinese. Correctly setting these tags will greatly enhance the website's performance in international search engines.

Considerations in practice

In practice, there are several aspects that deserve attention.Firstly, make sure that each language site and its corresponding domain or subdirectory/subdomain is correctly set in the "Multi-site Management" section of the AnQiCMS backend.Next, specify the appropriate language for each site in the "Global Settings" > "Default Language Pack" option. This usually determines the language of the site's backend interface and some system default prompts.It is most important that, although AnQiCMS provides a switching mechanism, the translation of content for each language site still needs to be manually completed to ensure that users receive high-quality and accurate localized information.

By means of the above method, you can effectively build and manage multilingual websites in AnQiCMS, not only improving user experience, but also through precisehreflangSet, ensure that your internationalized content is correctly indexed and displayed by global search engines, thus reaching a wider audience.


Common Questions (FAQ)

Q1: How to configure different language version sites in AnQiCMS backend?A: You can create a new site using the "Multi-site Management" feature, and specify an independent domain name or path when creating or editing the site.Subsequently, in the "Global SettingsContent in different language versions (articles, products, etc.) needs to be published and managed under their respective sites.

Q2: SettingshreflangWhat specific benefits do tags have for international SEO of the website?A:hreflangThe label has three main advantages:

  1. Avoid content duplication penalty:It tells search engines that different URLs correspond to language or region-specific versions of the same content, not plagiarism or duplication, thus avoiding negative SEO impacts.
  2. Improve the ranking of localized contentEnglish: The search engine can prioritize the display of the most relevant pages based on the user's language and geographical location, thereby improving the search ranking of your localized content in the target market.
  3. Enhance user experience:Users can see pages that match their language and regional preferences directly in the search results, reducing the hassle of manual switching, lowering the bounce rate, and improving the conversion rate.

Q3: How do I only display the language switch option on specific pages?A: The display of language switch options is completely dependent on your template design. You simply need to place the code snippet of the language switcher in the specific template file (such asheader.html/footer.html,or a specific page template)is available. If you only want to display the code on a few pages, you can add it only to the template files of these pages; if you want to display it throughout the entire site, it is usually placed in a publicbase.htmlorheader.htmlTemplate.