How to display language switch links in multilingual sites?

Build a website for global users, multi-language support is an indispensable part.AnQiCMS was designed with this in mind, providing a powerful and flexible solution for the publication and management of multilingual content.Through some simple configuration and template adjustments, we can easily implement language switching features on the website, allowing users of different languages to smoothly browse the website content.

AnQiCMS multilingual capability

AnQiCMS is naturally equipped with excellent multilingual content management capabilities, which is mainly due to its flexible "multi-site management" and "default language package" design.It not only supports creating independent sites for each language version, ensuring the independence of content, URL structure, and SEO strategy, but also built-in various language packages for localizing the backend interface and system prompts.This means that we can manage the Chinese version, English version, French version, and so on of the website as different sites, each with its own content, templates, and even independent domain names or subdomains, while AnQiCMS coordinates them centrally in the background.

Core: Display of language switch links

To display a language switch link on the website frontend, AnQiCMS provides a very convenient template tag: EnglishlanguagesThis tag helps us to get all the configured multilingual site information, and then by looping through this information, dynamically generate language switch links.

Basic usage method:

We usually place the language switch function in the header (Header) or footer (Footer) of the website, etc., public areas, so we place the relevant code in the public part of the template file (for examplebase.htmlorpartial/header.htmlIt would be more appropriate.

Here is an example of code to create a language switch link:

{%- languages websites %}
{%- if websites %}
<nav class="language-switcher">
    <ul>
        {%- for item in websites %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{item.Link}}" {% if item.Nofollow %}rel="nofollow"{% endif %}>
                {%- if item.LanguageIcon %}
                <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}">
                {%- else %}
                {{item.LanguageEmoji}}
                {% endif %}
                {{item.LanguageName}}
            </a>
        </li>
        {%- endfor %}
    </ul>
</nav>
{%- endif %}
{%- endlanguages %}

In this code block:

  • {% languages websites %}：This tag will traverse all language sites configured in AnQiCMS backend and assign their data towebsitesa variable.
  • {% for item in websites %}：We use a loopwebsitesto process the information of each language site one by one.
  • item.LinkThis will output the URL of the current language site, and the user can click to jump to the corresponding language version.
  • item.LanguageName：显示该语言站点的名称，例如“简体中文”或“English”。
  • item.LanguageIconoritem.LanguageEmojiIf the flag icon or Unicode emoji is configured for the language on the backend, the icon will be displayed first, followed by the emoji, providing users with a more intuitive switching method.
  • item.IsCurrent：An English value indicating whether the current looped language is the language the user is visiting, which can be used to add links for the current language.activestyles can be added.
  • item.Nofollow：An English value indicating whether to add links for this link.rel="nofollow"Attributes, this is very useful for SEO control of links that you do not want to pass weight.

This code allows the website front-end to automatically generate a set of language switch links based on the back-end configuration, and can flexibly display language names, flag icons, or emojis.

Multilingual and SEO: Hreflang Tag

To help search engines better understand the multilingual versions of the website and display them to the correct users, configurehreflangThe label is crucial.hreflangThe label can tell search engines that the content under different URLs is an alternative version of the same content, just for different languages or regions.

In AnQiCMS, we can combinelanguagestags, easily in the website's<head>parts to generate thesehreflangLabel.

Hreflang tag example:

Place the following code snippet in the website template's<head>area (usuallybase.html):

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
  • item.Language：This field will output the language code of the language site (e.g., "zh-CN" or "en"), and the search engine will judge the language and target region based on this code.

This way, each language version of the website will include links to all other language versionshreflangto ensure that search engines can accurately index and display them.

Implementation steps

To implement the above function, the following configuration is usually required:

  1. Backend site configuration:

    • Create a multilingual site:In the "Multi-site Management" module of AnQiCMS backend, create an independent site for each target language. For example, you can create a Chinese site (www.example.com）and an English site（en.example.comorwww.example.com/en/）。In creating a site, please make sure to set up the site name, website address, and most importantly the 'default language package' (which can be selected by going to 'Global Settings' -> 'System Settings').
    • Configure language information:In each site's “Global Settings” -> “System Settings”, in addition to setting up the “Default Language Pack”, you can also upload a “Language Icon” (flag, etc.) for the language site or choose a “Language Emoji”, and this information will be displayed throughlanguagesLabels are automatically provided to the front-end for use.

  2. Integration of front-end templates:

    • Edit template file:Find the current template file used on your website, for example, located in/template/你的模板目录/base.html.
    • Insert the language switch code:Switch the language link code (first section) abovelanguagesPaste the example label) where you want to display the language switcher, for example, in<header>tags or<footer>Tags inside.
    • Insert Hreflang code:Switch the above'shreflangLabel Code (Second Paragraph)languagesPaste the label example)<head>inside the label, usually placed)<title>after the label or all of them}<meta>the tag.

After completing these steps, clear the website cache, visit your website, and you will see the configured language switch link, and the search engine will also better understand the structure of your multilingual website.

Common Questions (FAQ)

  1. Q: The translation of website content is done automatically, or do I need to handle it manually? A:AnQiCMS itself does not automatically translate content.You need to manually create or import the corresponding language version of the content under each language site.For example, if you have a Chinese version of the "About Us" page, then under the English site, you need to create an English version of the "About Us" page and ensure that the content is in English.AnQiCMS's multi-site management provides convenience, you can independently edit content for each language version.

  2. Q: Can I use flag icons to represent languages instead of text? A:Absolutely. Above all.