Building multilingual sites in AnQiCMS not only expands your market range but also provides a more friendly access experience for users in different regions. The key to achieving this goal lies in the effective use oflanguages[en]To create a language switch menu with tags and output correctly.hreflang[en]Tags for optimizing search engine recognition.
AnQiCMS as a content management system that focuses on enterprise-level applications, its strong multilingual support is one of its highlights.It allows you to create multiple language versions of website content and provides convenient tools to manage these contents.languages[en]Tags, which are the key to presenting the backend multilingual capabilities on the website frontend.
Core Tools:languagesThe Use of Tags
AnQiCMS provides a built-in tag specifically for handling multilingual site information.languagesThe design purpose of this tag is to obtain the list of all configured multilingual sites on your website. It is a direct and powerful tool,accepts no parametersIt will default to retrieve all multi-language site information that has been set and enabled in the background, making it very simple to use.
When you use a template{% languages websites %}...{% endlanguages %}whenwebsitesThe variable will become an array object that contains detailed information about each language version site. You can access the specific data of each language site by looping through thiswebsitesarray.
EachitemAn object (i.e.,websiteseach element in the array) provides the following useful fields:
LanguageName: The language name of the site (e.g., "Simplified Chinese", "English").Language: Language's ISO code (e.g.,zh-CN,en-US), which is crucial forhreflangtags.LanguageEmoji: An Emoji icon representing the language, used for visual language switching.LanguageIcon: Custom language icon URL, usually a small flag image.Name: Display name of the site.Link: Full URL of the language version of the site.Remark【en】Site note information.Nofollow【en】Whether to add.nofollowproperties.
Understoodlanguages【en】After what information tags can provide, we can start building the language switch function.
【en】Build language switch menu.
To allow users to easily switch between language versions, a user-friendly and accessible language switch menu is crucial. Usinglanguagestags, you can flexibly design the menu style.
The following is a basic example of a language switch menu code, you can place it in a prominent position on the website header, footer, or sidebar.
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
<span>选择语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}" class="lang-option">
{%- 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:
- We first use
{%- languages websites %}Get the list of all language sites.websitesThe variable will contain information about all language versions. {%- if websites %}Check if there are any available language sites to avoid displaying an empty menu when multilingual is not configured.{%- for item in websites %}Loop through each language site.item.LinkProvided is the complete URL to the language version site, ensuring that users can click and correctly navigate.- You can choose
item.LanguageIconto display a custom flag icon, or useitem.LanguageEmojiDisplay emojis more concisely, or show them directlyitem.LanguageName(Language Name). This flexibility allows you to adjust according to the design style of the website.
By such a menu, your users can easily switch between different language versions of the website, greatly enhancing the user experience.
OutputhreflangTags for optimizing SEO
In addition to the language switch menu visible to users, Search Engine Optimization (SEO) also requires us to clearly inform search engines of the corresponding relationships between different language versions on the technical level. At this point,hreflangLabels come in handy.hreflangTags help search engines understand the geographic or language orientation of your website content, avoid duplicate content for multilingual content, and ensure that the correct content version is presented to search users of different languages or regions.
hreflangTags are usually placed on each page,<head>in an area, with the standard format of,<link rel="alternate" href="[URL]" hreflang="[语言代码]". Combined,languagestags, you can easily generate these tags for each page:
<head>
{# 其他head标签... #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
</head>
In this code block:
item.LinkProvided the complete URL of the current page's language version. Please note that,item.Linkit will automatically redirect to the language version URL of the current page, AnQiCMS will intelligently match.item.LanguageThis provides the corresponding language code (for exampleen/zh-CN/fr), which ishreflanga required attribute of the tag.- After these tags are generated, they will be placed on each page.
<head>In the region, make sure the search engine can correctly identify and index the multilingual content of your website.
Proper configurationhreflangTags are crucial for multilingual SEO. They not only help improve the visibility of your website globally but also avoid SEO penalties due to similar content in language versions.
Implementation and Precautions
Ensure thatlanguagesLabels can work correctly; you first need to configure and manage multi-language sites in the 'Background Settings' -> 'Global Settings' of the AnQiCMS background. Only the language versions enabled in the background will belanguagesLabel obtained. In addition, setting the 'Default Language Package' in 'Global Settings' ensures that the system interface and some built-in prompts are displayed in the selected language.
By combining the use oflanguagesA user-friendly language switching menu for tag building, as well as search engine oriented.hreflangTags, not only can you significantly enhance the user experience, but you can also effectively optimize the global SEO performance of your website, helping your content reach a wider audience.AnQiCMS provides all the necessary tools to make the operation of multilingual websites simple and efficient.
Common Questions (FAQ)
1. ConfigurationlanguagesAfter the tag, why doesn't the language switching menu orhreflangtag display any content?This is usually because you have not configured or enabled any multilingual sites in the AnQiCMS backend.languagesTags will obtain all language sites set and enabled under the "Multi-site Management" in the "Global Settings" backend.Please check your backend configuration to ensure that at least one language site other than the default site has been added and activated.
**2.hreflangthe tag inhreflangAttribute value (i.e.,)item.Languagehow should it be filled out to be compliant