How to implement multilingual site switch link display in AnQiCMS template and set hreflang?

Building a multilingual website in AnQiCMS and providing convenient language switching features as well as correct SEO settings is a key step to expanding the international market and enhancing the user experience.A modern content management system developed based on the Go language, AnQiCMS provides strong and flexible support in this aspect, allowing content operators to easily manage global content publication needs.

Understand AnQiCMS multilingual capabilities

AnQiCMS was designed with the need for global content promotion in mind, its built-in multilingual support function is one of the core advantages of building an internationalized website. This means that we can not only publish content in different languages, but also implement language switching and corresponding at the template level.hreflangSet.

In the AnQiCMS backend, we can create multiple language versions of sites through the "Multi-Site Management" feature, each site can have its own independent domain, subdomain, or subdirectory.At the same time, in the "Global Function Settings", we can specify the default language package for each site, such as Chinese, English, etc., which will affect the display of built-in text in the system.

Furthermore, AnQiCMS also supports multilingual content translation at the template level. By creating in the template directorylocalesfolder in the template directory anden-us/zh-cn）organizationdefault.ymllanguage files, we can use{% tr "yourKey" %}Translation labels are used to display corresponding text in different languages. For example, ifzh-cn/default.ymlis defined in"yourLocation": "您的位置",en-us/default.ymlis defined in"yourLocation": "Your location"Then, on the Chinese site it will display 'Your location', and on the English site it will display 'Your location', making template internationalization very efficient.

Implement multilingual switch link in the template

We need to call the specific tags provided by AnQiCMS in the template to provide users with a convenient language switch on the website front end, in order to obtain information about all configured language sites.This is usually done in a prominent position on the website header, footer, or sidebar.

AnQiCMS provides a namedlanguagesThe template tag, it can get all the multilingual site lists configured in the background.This tag does not require any parameters, just call it to get an array object containing information about all language sites.

We can use it like this in the template to generate the language switch link:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}>
        {%- 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 %}

In this code block,websitesIt is an array,itemIs an object representing a language site in each loop. We can utilizeitem.LinkGet the URL of the corresponding language site,item.LanguageNameGet the language name (such as “Simplified Chinese”, “English”),item.LanguageEmojiGet the Emoji expression corresponding to the language, as well asitem.LanguageIconGet the custom language icon.item.NofollowThe attribute can help us determine whether to add a linknofollowLabel, this may be used in some SEO strategies. Through these fields, we can flexibly build a beautiful and practical language switcher.

settinghreflangLabel for optimizing SEO

In addition to providing users with an intuitive language switch function, proper configuration is crucial for search engine optimization (SEO)hreflangTags are also very important.hreflangThe tag tells search engines that your website content has multiple language or regional versions, which helps search engines display the most relevant language version to the correct users, avoid duplicate content issues, and improve international SEO performance.

hreflangLabels are usually placed in the HTML document's<head>Area. AnQiCMS also utilizeslanguagesTags to help us easily generate these SEO-friendly metadata.

In your template (usually the basic layout file, such asbase.html）的<head>Part, you can add the following code to automatically generatehreflang:

<head>
    {# 其他head内容，如meta标签、title等 #}
    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
    {%- endfor %}
    {%- endlanguages %}
</head>

Here, we use it againlanguagesThe tag retrieves all language sites. For eachitem(language site), we useitem.LinkashrefThe value provides the URL of the corresponding language site.hreflangThe value comes from.item.Languagefield, which will return the standard language code (such aszh-cn/en-us).So that the search engine can accurately understand the relationship between different language versions.

Considerations and suggestions in practice

1. Backend site configurationAll these flexible switching functions depend on the correct configuration of the 'Multi-Site Management' module in AnQiCMS backend.You need to create a separate site for each target language, and configure their domain names, subdomains, or subdirectories, as well as the corresponding default language package.languagesTags can correctly obtain information about all language versions.

2. hreflangwithx-default: In addition to setting for each languagehreflangIf your website has a default version that is not targeted at a specific language or region (such as the English international version), it is recommended to add ax-defaultofhreflangtag. AnQiCMS'slanguagesThe label currently provides for each configured language sitehreflangoutput if neededx-defaultmay require additional judgment and manual addition. For example:

   <link rel="alternate" href="https://yourwebsite.com/en/" hreflang="x-default">
   

   Herehttps://yourwebsite.com/en/should point to your universal default language version.

3. Template File LocationLanguage switch link is usually placed inheader.htmlorfooter.htmlPublic template files, ensuring that each page can access them. AndhreflangThe tag must be located on all pages.<head>Tag inside.

By following these steps, you can fully utilize the multilingual support feature of AnQiCMS, not only providing users with a seamless language switching experience, but also through the correcthreflangSet, to win better visibility and ranking for your website in international search engines.

Frequently Asked Questions (FAQ)

Q1: How to configure multiple language versions of the site in AnQiCMS backend?A1: To configure multiple language versions of the site, you need to go to the 'Function Management' or 'Multi-site Management' module in the AnQiCMS backend. Here, you can add new sites and set up independent domains for each site (such asexample.com)、subdomain (such asen.example.com) or subdirectory (such asexample.com/en/). You also need to specify the default language pack (such as Chinese, English) and the template used for each site.

Q2: How can I implement multilingual on my website with only one domain?A2: Even if there is only one primary domain, AnQiCMS also supports implementing multilingualism through "Multi-site Management". You can choose to configure different language versions as subdirectories (such asexample.com/en/Used for English,example.com/fr/For French)When creating a site in the background, set the website address to the corresponding subdirectory URL.AnQiCMS will automatically handle routing and link generation, ensuring that content of different language versions is displayed in their respective subdirectories.

Q3:hreflangTags and{% tr %}What are the differences between translation tags, and what are their respective roles?A3:hreflangTags and{% tr %}Although all translation tags are related to multilingualism, their roles and target audiences are different:

• hreflangTagPrimarily aimed at search engines.It is a type of SEO metadata used to inform search engines that your web page has multiple language or regional versions.This helps search engines display the correct language content to users in the corresponding regions, avoid duplicate content penalties due to similar content, and optimize international search rankings.
• {% tr "key" %}Translate labelsPrimarily aimed at website visitors and content operators. It is used to implement the translation of static text content in template files. For example, navigation