How to display the language switch options and hreflang tags on a multilingual site in AnQiCMS?

Building multilingual websites in AnQiCMS and providing convenient language switching options as well as correct hreflang tags is a key step in expanding the international market and improving user experience.AnQiCMS with its flexible architecture provides a clear path to achieve this goal, allowing your website content to accurately reach global users while ensuring search engine friendliness.

AnQiCMS Multi-language Implementation Overview

AnQiCMS is designed to integrate multi-language support with multi-site management features deeply.This means that each different language version is usually treated as an independent site for management within the system.The benefit of this design is that the backend management, content publishing, URL structure, and even template styles of different language sites can be highly independent and customizable, thereby avoiding the complexity that may be brought by multiple languages on a single site.

For example, your Chinese site (www.example.com) and English site (en.example.com) Will have their own independent content libraries, and can publish completely different articles, products, or pages.The 'Default Language Package' setting of AnQiCMS mainly affects the language of the background management interface or the system built-in prompt information, while the core content displayed on the website front end, such as article titles, text, category names, etc., needs to be created and maintained separately for each language site.

Based on such an architecture, AnQiCMS provides powerful tag functions to help us easily implement language switching and hreflang tag integration on the front end.

Step 1: Configure multilingual site

Firstly, you need to set up multiple independent language sites in the AnQiCMS backend.

1. Install the main site: If you have not installed AnQiCMS yet, please complete the installation of the main site first.
2. Create a new language site:Log in to your AnQiCMS main site backend. In the left menu, find the 'Multi-site Management' feature, and click 'Add New Site'.
   • In the pop-up interface, you need to fill in the corresponding information for each language site. For example, to create an English site:
     • Site Name:For example, "English site".
     • Site root directory:This is an independent directory path used to store the cache, configuration files, and other data of the site, for example/app/en_example_comMake sure this directory name is unique.
     • Website address:Set the domain name or subdomain name to be used by the language site, for examplehttps://en.example.comorhttps://www.example.com/en.
     • Admin account password:Set up an independent backend administrator account and password for this new site.
     • Database name:Create an independent database for this site, such asen_example_com_dbIf you are using AnQiCMS in Docker environment and reusing the default database account information, you usually do not need to fill in the database account password.
     • Select the template to use:You can choose a separate template for each language site, or you can reuse the existing template and make language-related modifications.

After completing the site addition, you will also need to configure the corresponding reverse proxy at the server level (such as Nginx or Apache), route the user's requests correctly to the AnQiCMS Docker container port (default is 8001), and ensure that your domain name resolution is correct.This operation is similar to the AnQiCMS installation and deployment document regarding multi-site configuration, ensuring that each language site can access independently.

Step two: Add language switch options in the template.

After your multilingual site is configured and can be accessed independently, the next step is to provide a prominent language switch option on the website front end, making it convenient for users to choose their preferred language. AnQiCMS provides a namedlanguagesThe powerful tag, which can get information about all configured language sites.

Usually, we recommend placing this code in the global template file, for example.template/{您的模板名称}/bash.htmlorheader.htmlIt ensures that it is visible on all pages.

You can use it in the following way:languagesLabel to display language switch options:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" {% if item.Link == currentUrl %}class="active"{% endif %}>
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

In this code block:

• {% languages websites %}It will traverse all multilingual sites configured in the AnQiCMS backend and store their data inwebsitesthe variable.
• item.LinkIt will provide the complete URL of the language site.
• item.LanguageNameDisplay the name of the language (e.g., "Chinese", "English").
• item.LanguageEmojiProvide the language corresponding Emoji icon, if your template supports displaying Emoji, this is a concise choice.
• item.LanguageIconIf you have configured icons for language in the background, the icon URL will be displayed here. You can choose to display Emoji or icons according to your actual needs.
• {% if item.Link == currentUrl %}class="active"{% endif %}This line (currentUrlThe URL needs to be passed into the template as a global variable or obtained in some other way and can be used to highlight the language that the current user is visiting.

Step 3: Implement hreflang tags

In addition to providing users with visible language switching options, it is important to configurehreflangtags are crucial for the SEO of multilingual sites.hreflangThe tag tells search engines about other language versions of a specific page, which helps avoid duplicate content issues and ensures that users see the correct language and regional content in search results.

hreflangLabels need to be placed on each page.<head>You can continue to use it.languagestags to dynamically generate these links:

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

In this code block:

• item.LinkIt also provides the URL of each language site.
• item.LanguageIt provides the ISO 639-1 language code for the language site (for examplezh-cn/en-us）。These codes are automatically generated by AnQiCMS when creating a language site, or when you configure it in the background.

Add this code to the relevant part of your template.<head>For example, part (such astemplate/{您的模板名称}/bash.htmlorhead.html), to ensure that each page includes the correcthreflanginformation.

Integration with **practice

• Location of the template file: languagescode of tags, whether it is a language switch option orhreflangTags should be placed in the global header template file of the website (such asbash.html/header.html) to ensure they are loaded and rendered correctly on all pages
• Content synchronization:Since each language version is a separate site, you need to maintain the content separately for each site.When releasing new articles or products, remember to publish and translate them on all relevant language sites.
• Unified URL structure:Plan a clear and consistent URL structure (for example, using subdirectories/en/or subdomainsen.example.com) helps users and search engines understand your multilingual content layout.
• Standardized tags:ThoughhreflangSolved the multilingual content issue but still recommends using it on each page<link rel="canonical" href="..."/>The tag points to the main URL of the language version to avoid unnecessary crawler confusion. AnQiCMS providestdkLabel to get the specification link.

By following the above steps, you can effectively display multilingual in AnQiCMS.