How to use the `languages` tag to build a language switch menu and output the `hreflang` tag in a multilingual site?

Building multilingual sites in AnQiCMS (AnQiCMS) not only expands your market reach but also provides a more friendly access experience for users in different regions. The key to achieving this goal lies in effective utilizationlanguagesCreate a language switch menu tag and output correctlyhreflangOptimize search engine recognition with the tag.

AnQiCMS is a content management system that focuses on enterprise-level applications, and its powerful multilingual support is one of its highlights.It allows you to create multiple language versions of website content and provides convenient tools to manage this content.languagesThe tag, which is the key to presenting the multi-language capabilities configured on the backend to the website front end.

Core Tool:languagesThe use of tags

AnQiCMS provides a built-in tag specifically for handling multi-language site information——languages. This tag is designed to retrieve the list of all multilingual sites configured on your website. It is a direct and powerful tool,does not accept any parametersIt will default to retrieve all multi-language site information set and enabled in the background, making it very simple to use.

When you use it in the template{% languages websites %}...{% endlanguages %}then,websitesThe variable will become an array object containing details of 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)，This ishreflangtags are crucial.
• LanguageEmoji: An emoji representing the language, used for visual language switching.
• LanguageIcon: Custom language icon URL, typically a small flag image.
• Name: Display name of the site.
• Link: Full URL of the site in the language version.
• RemarkSite remark information.
• NofollowWhether to addnofollowProperty.

UnderstoodlanguagesAfter getting the information that tags can provide, we can start building the language switching function.

Build the language switching menu

To facilitate users switching between different language versions, a user-friendly and easily accessible language switch menu is crucial. Uselanguagestags, you can flexibly design the menu style.

This is a basic language switch menu code example, you can place it in a prominent position such as the header, footer, or sidebar of a website.

{%- 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 pointing to the language version site, ensuring that users can click and be redirected correctly.
• You can chooseitem.LanguageIconto display a custom flag icon, or useitem.LanguageEmojiDisplay a more concise Emoji表情, or display directlyitem.LanguageName(Language name). This flexibility allows you to adjust according to the design style of the website.

With 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 visible language switch menu, Search Engine Optimization (SEO) also requires us to clearly inform search engines of the corresponding relationships between different language versions. At this point,hreflangthe label comes into play.hreflangTags help search engines understand the geographic or language location of your website content, avoid duplicate content in multilingual content, and ensure that the correct content version is presented to search users in different languages or regions.

hreflangLabels are usually placed on each page<head>in the area, its standard format is<link rel="alternate" href="[URL]" hreflang="[语言代码]"Combined.languageslabels, you can easily generate these labels 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.LinkIt provides the complete URL for the current page language version. Please note thatitem.Linkit will automatically point to the language version URL of the current page, AnQiCMS will intelligently match.
• item.LanguageThe corresponding language code is provided (for exampleen/zh-CN/fretc.), 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 that 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

EnsurelanguagesThe tag works correctly, you first need to configure and manage the multilingual site in the AnQiCMS backend's "Backend Settings" -> "Global Settings". Only the language versions enabled in the backend will belanguagesThe label is 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 usinglanguagesLabel-building user-friendly language switch menu, as well as search engine-orientedhreflangLabel, not only can you significantly enhance the user experience, but you can also effectively optimize the global SEO performance of the website, helping your content reach a wider audience.AnQiCMS provides all the necessary tools to make the operation of multilingual websites simple and efficient.

Frequently Asked Questions (FAQ)

1. ConfigurationlanguagesWhy does the language switch menu or label not display any content afterhreflangthe label?This is usually because you have not configured or enabled any multilingual sites in the AnQiCMS backend.languagesThe tag will retrieve all language sites that are set and enabled under 'Multi-site Management' in the 'Global Settings' on the 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.hreflangin the labelhreflangThe attribute value (i.e.,item.Language) should be filled out in accordance with how