How to display language switch options on the front-end page and support hreflang attributes?
AnQiCMS as an efficient and flexible content management system provides a solid foundation for users in global content promotion. Its built-in multilingual support feature is the key to achieving this goal. Display language switching options correctly on your website and configure search engineshreflangA feature that can greatly enhance user experience and is also an important step for international SEO optimization.
1. Preparation: Enable the multilingual capability of AnQiCMS.
AnQiCMS itself has powerful multilingual support capabilities, allowing you to provide customized content for different language versions of the website.Fully utilize this feature, first you need to ensure that your system is ready to handle multiple languages.
In the AnQiCMS backend settings, you can find the 'Default Language Pack' option, which defines the current main language of the website.But to achieve a full display and switching of multilingual sites, more in-depth configuration usually involves front-end templates and content organization.
The AnQiCMS template system supports implementing multilingual content through a specific directory structure. For example, create a directory under your template root directory.localesFolder, and create corresponding subfolders for each language (such aszh-cn/en-us). Each language folder can containdefault.ymlFiles that store the front-end text translation for the language. This structure allows you to centrally manage the static text of the website interface, making it convenient for multilingual adaptation.
Second, display the language switch option on the front-end page
Providing users with an intuitive language switcher is the first step in improving the usability of multilingual websites. AnQiCMS integrates the built-inlanguagesLabel, it can easily generate such toggle options in the front-end template.
You can use the following code to display the language switcher in common locations such as the header, footer, or sidebar of the website:
{%- languages websites %}
{%- if websites %}
<div>
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
This code first goes through{% languages websites %}The tag retrieves all the multilingual site information that has been configured and stores it inwebsitesthe variable. Then, it will iteratewebsiteseachitem(representing a language version), and generate a link for each language.
EachitemThis includes several key properties:
item.LinkThis is the complete URL of the language version website, and when the user clicks on it, it will jump to the corresponding language page.item.LanguageIconIf the background uploads an icon for the language, the icon will be displayed.item.LanguageEmojiIf no icon is uploaded but the language Emoji (such as 🇺🇸, 🇨🇳) is configured, the Emoji will be displayed.item.LanguageName: Display the name of the language (such as "Simplified Chinese", "English").
With this design, you can choose to display language icons, Emojis, or the language name directly, providing a clear switching entry for users.
Chapter 3: Configure hreflang attribute for search engines
hreflangProperties are an important component of SEO optimization, they inform search engines that your website has multiple language versions and that these versions are interconnected. Proper configurationhreflangCan avoid search engines from treating different language versions as duplicate content and ensure that users can see the pages most suitable for their language and regional preferences during search.
hreflangLabels are usually placed in the HTML document's<head>Area. You can also make use of it in AnQiCMSlanguagesTags to dynamically generate these properties:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code also passes throughlanguagesThe tag retrieves all language versions information, then generates one for each language version<link>.
here,item.LinkIt is still the URL of the page for that language version, whileitem.Languageit provides the corresponding language code (for example,enrepresents English,zh-CNRepresents Simplified Chinese). Place this code in your website templatebase.htmlthe file<head>To ensure that each page of your website declares its multilingual versions correctly to search engines.
Four, Flexible Application: Custom Multi-language Templates and Content
In addition to the language switcher andhreflangproperty configuration, AnQiCMS also provides deeper multi-language customization capabilities.
- Dynamic Text Translation: In the template file, for some fixed text on the interface, you can use
{% tr "您的位置" %}such translation tags. With the cooperation oflocalesin the folderdefault.ymlFile, you can provide corresponding translation text for different language versions to achieve complete localization of the interface. - Content independent management: AnQiCMS allows you to publish independent content in different languages.This means that your articles, products, single pages, etc. can have their own language versions.In the background content management module, you can create and manage these multilingual content, ensuring that each language version provides high-quality and localized information.
By combining the above features, you can not only implement a beautiful and practical language switching function on the AnQiCMS front-end page, but also effectively optimize the international SEO performance of the website, attracting global users.
Frequently Asked Questions (FAQ)
How to add or manage different language versions in the AnQiCMS backend?Answer: AnQiCMS supports default Chinese and English language packages. You can set the default language in the "Background Settings" -> "Global Feature Settings".If you need to create multilingual versions of content (such as articles, products), just select the corresponding language when adding or editing the content.The AnQiCMS multi-site management feature also allows you to set up independent subdomains or directories for different language versions, achieving more refined multi-language site management.
My website currently has only one language version, do I need to configure it?
hreflangShould I add the attribute?Answer: If your website currently has only one language version, then strictly speaking,hreflangThe attribute is not required. However, considering that the website may be expanded to support other languages in the future, it is reserved in the template in advancehreflangCode structure is a good habit. This way, when you add a new language version, you just need to configure the URL and content for the corresponding language in the background, the front-endhreflangTags can be automatically enabled, reducing the complexity of later modifications.Question: Where should I place the language switcher on the website?Answer: The placement of the language switcher should prioritize user convenience.The top navigation bar (header) or footer of a website is typically the location where the language switcher is placed.For websites with a large amount of content, it can also be provided in the sidebar or popup menu to ensure that users can easily find and switch languages on any page.It is important to maintain its visibility and consistency.