How does Anqi CMS support displaying multi-language switch links and hreflang tags in the frontend template?

Today, with the trend of globalization, many websites need to provide services to users from different countries and regions.This means that the website not only needs to support the display of content in multiple languages, but also ensure that search engines can correctly identify these different language versions to enhance the visibility in the international market.AnQiCMS as an practical content management system, provides strong and flexible support in this aspect.

AnQiCMS's multilingual capabilities overview

AnQiCMS was designed with full consideration of multilingual requirements, treating multilingual support as one of its core features.This means that in the AnQiCMS backend, you can conveniently manage content of different language versions of the site, and the system itself is equipped with the ability to handle multilingual content.hreflangLabel optimization for SEO, laying a solid foundation.

Implementation of multilingual switch links

To provide users with an intuitive language switch option on the website front-end template, AnQiCMS offers a very convenient template tag ——languages.This tag helps us retrieve all the multi-language sites that have been configured, and then we can iterate through this information in the template to generate corresponding language switch links for users.

UselanguagesThe label is very direct. You can place the following code at any location on the website, such as the header, footer, or sidebar.

{%- languages websites %}
{%- if websites %}
<nav class="language-switcher">
    <ul>
    {%- for item in websites %}
        <li>
            <a href="{{item.Link}}" hreflang="{{item.Language}}" title="{{item.LanguageName}}">
                {%- if item.LanguageIcon %} {# 优先显示配置的语言图标 #}
                <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} Flag" width="20" height="15" />
                {%- elif item.LanguageEmoji %} {# 否则显示语言Emoji #}
                {{item.LanguageEmoji}}
                {% endif %}
                {{item.LanguageName}} {# 显示语言名称 #}
            </a>
        </li>
    {%- endfor %}
    </ul>
</nav>
{%- endif %}
{%- endLanguages %}

In this code block:

  • {% languages websites %}Assign all data of multilingual sites towebsitesa variable.
  • We use{% for item in websites %}Loop through each language site.
  • item.LinkProvided the link to the website of the current language version.
  • item.LanguageNameIs the display name of the language (e.g. "Simplified Chinese
  • item.LanguageIconanditem.LanguageEmojiIt allows you to display the national flag icon or Emoji symbol, to guide users more intuitively. You can choose one or both of them according to your actual needs.
  • hreflang="{{item.Language}}"It is also added in advance to the switch link here, although its main function is in the header, adding it here ensures that the correct language attribute is always included when switching languages.

Through such settings, users can easily select their preferred language version, improving the user experience of the website.

Integration of hreflang tags improves SEO

hreflangTags are crucial for the search engine optimization (SEO) of multilingual websites.It tells the search engine which language or region the specific page is targeted at, thus avoiding the penalty for content duplication and ensuring that the correct language version of the page is displayed to the corresponding users.

In AnQiCMS, you can make use of it againlanguagestags, in the website's<head>area to automatically generate these keyhreflangLabel. This helps search engines understand the structure of your website and distribute your content better.

Open your base template file (usually)base.htmlor similar file), and in<head>Add the following code inside the tag:

<head>
    {# ... 其他meta标签和link标签 ... #}

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

    {# ... 其他meta标签和link标签 ... #}
</head>

This code will dynamically generate all language versions every time the page loads.link rel="alternate"Labels are:

  • href="{{item.Link}}"The page URL for the version of the language pointed to.
  • hreflang="{{item.Language}}"The specified language targeted by this page (e.g.)zh-CN/en-US).

So, when search engines crawl and index your website, they can accurately understand the relationship between each page and its corresponding language version, thus effectively improving the SEO performance of multilingual content.

Template development precautions

When developing multilingual templates in AnQiCMS, there are still some details that are worth our attention:

  1. Configure multilingual sites:Firstly, you need to add and configure your various language version sites in the "Multi-site Management" or "Global Settings" section of the AnQiCMS backend.Each language site usually corresponds to an independent domain or subdomain, and sets its default language package.languagesThe label is the premise of obtaining information.

  2. Translation of static text.:Besides the content itself, the template may also contain some static text, such as navigation menu items, button text, footer information, etc. AnQiCMS providestr(translate)label to handle the translation of these static texts. You need to createlocalesfolders, and create a corresponding folder for each language..ymlfile to store the translation content, for example:

    ./locales
    ├── en-us
    │   └── default.yml
    └── zh-cn
        └── default.yml
    

    Inzh-cn/default.ymlIn:

    "your_location": "您的位置"
    "home": "首页"
    

    and then use it in the template{% tr "your_location" %}The system will automatically load the corresponding translation based on the current site language.

  3. Selection of language icons and Emoji:item.LanguageIconanditem.LanguageEmojiProvided flexible options to display language identification.You can upload a custom flag icon, or directly use the supported Emoji symbols of the system to adapt to different design styles.Ensure that the icon path you upload is correct and accessible.

Through these steps, AnQiCMS can help you easily build and manage websites with excellent multilingual support and good international SEO performance.

Common Questions

1. How to add a new language version in AnQiCMS backend?You can find the 'Default Language Pack' option in the 'Global Settings' of AnQiCMS backend, and create a new site in the 'Multi-site Management', specifying the corresponding language pack and domain name, thus achieving multi-language site management.

2. Why did I add a language switch link, but clicking it does not switch to the corresponding language page?This is usually because you have not configured the domain names or links for each language version correctly.Please ensure that each language site is configured with the correct 'website address' in the 'Multi-site Management' section of the AnQiCMS backend, and that these addresses are accessible.In addition, also check if your Nginx or Apache reverse proxy configuration correctly maps different domain/path to the corresponding language service of AnQiCMS.

3.hreflangWill the tags automatically generate all language versions of the page? hreflangThe label itself only tells search engines which language versions exist, it does not automatically generate the content for these language versions. You need to first create and publish corresponding versions of different languages for your content (such as articles, products, pages) in the AnQiCMS backend, ensuring eachhreflang指向的URL都是一个真实存在且包含相应语言内容的页面。