How does AnQi CMS support displaying multilingual switch links and hreflang tags in the front-end template?
Today, with the increasing 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 content display in multiple languages, but also ensure that search engines can correctly identify these different language versions, thereby enhancing the visibility in the international market.AnQiCMS as a practical content management system provides strong and flexible support in this regard.
AnQiCMS multilingual capability overview
AnQiCMS was designed with multilingual requirements in mind, making multilingual support 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.How does the website's frontend template display these language switch options and how to utilizehreflangLabel optimization for SEO, laying a solid foundation.
Implement multilingual switch link
To provide users with intuitive language switching options in the website front-end template, AnQiCMS provides a very convenient template tag——languages. This tag helps us to get all the multilingual site information that has been configured, and then we can iterate through this information in the template to generate the 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 from multilingual sites towebsitesVariable.- We use
{% for item in websites %}Loop through each language site. item.LinkThis provides a link to the website of the current language version.item.LanguageNameIt is the display name of the language (e.g., Simplified Chinese, English).item.LanguageIconanditem.LanguageEmojiYou are allowed to display national flag icons or Emoji symbols to guide users more intuitively. You can choose one or both according to your actual needs.hreflang="{{item.Language}}"This is also added in advance to the switch link, although its main function is in the header, but adding it here can ensure that the correct language attribute is always present when switching languages.
Through such settings, users can easily click to select their preferred language version, enhancing the website user experience.
Integrating hreflang tags to improve SEO
hreflangTags are crucial for multilingual website SEO.It tells the search engine which language or region the specific page is targeted at, thus avoiding the penalty for duplicate content 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 automatically generates these key oneshreflangTags. This helps search engines understand the structure of your website and distribute your content better.
Open your basic template file (usually)base.htmlor a similar file), and then<head>Enter the 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 on each page loadlink rel="alternate"Tags, where:
href="{{item.Link}}"Points to the page URL of the language version.hreflang="{{item.Language}}"Specifies the language targeted by the page (for examplezh-CN/en-US)
This allows search engines to accurately understand the relationship between each page and its corresponding language version when crawling and indexing your website, thereby effectively enhancing the SEO performance of multilingual content.
Template development precautions
When developing multilingual templates in AnQiCMS, there are still some details that we should pay attention to:
Configure multilingual sitesFirst, you need to add and configure your various language version sites in the AnQiCMS backend "Multi-site Management" or "Global Settings".Each language site usually corresponds to an independent domain or subdomain, and sets the default language package. This is
languagesThe premise that tags can obtain information.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 provides
trThe translate tag is used to process the translation of these static texts. You need to create alocalesfolders and create corresponding language files for each.ymlfile to store the translation content, for example:./locales ├── en-us │ └── default.yml └── zh-cn └── default.ymlIn
zh-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.Language icon and Emoji selection:
item.LanguageIconanditem.LanguageEmojiFlexible options are provided to display language identification. You can upload custom national flag icons or directly use system-supported Emoji symbols to adapt to different design styles.Ensure that the icon path you upload is correct and accessible.
By following these steps, AnQiCMS can help you easily build and manage a website with excellent multilingual support and good international SEO performance.
Common questions
How to add a new language version in AnQiCMS backend?You can find the "Default Language Package" option in the "Global Settings" of AnQiCMS backend, and create a new site in "Multi-Site Management" to specify the corresponding language package and domain, thereby realizing multi-language site management.
2. Why did I add a language switch link but it didn't switch to the corresponding language page when clicked?This is usually because you have not properly configured the domain names or links for each language version of the website.Make sure that each language site is configured with the correct "website address" and that these addresses are accessible in the "Multi-site Management" section of the AnQiCMS backend.Also, make sure your Nginx or Apache reverse proxy configuration is correctly mapping different domains/path to the corresponding language service of AnQiCMS.
3.hreflangWill the tag automatically generate all language versions of the page?
hreflangThe tag itself just tells the search engine which language versions are available, it does not automatically generate the content for these language versions. You need to create and publish corresponding language versions of your content (such as articles, products, pages) in the AnQiCMS backend first, ensuring that eachhreflangThe URL pointed to is a real page that contains the corresponding language content.