How to correctly display the `hreflang` tag in a multilingual site for search engine guidance?
In today's globalized digital age, multilingual support has become a basic requirement for websites to reach a wider audience.However, providing content in different languages is not enough; we also need to ensure that search engines can correctly understand the relationships between these different versions so that users are directed to the content most suitable for their language and region. This ishreflangWhere the tag plays a role.
For sites built with AnQiCMS, proper configurationhreflangTags are a key step in enhancing the international SEO performance. AnQiCMS, a system designed specifically for content operation and multi-site management, provides an efficient and intuitive solution with its built-in multilingual support and flexible template mechanism to achieve this goal.
Built-in multilingual capabilities of AnQiCMS
AnQiCMS was designed from the outset with full consideration of the needs for multilingual content management.The "Multilingual Support" feature is one of the core highlights, aimed at helping enterprises seamlessly expand into international markets, allowing content to directly address users of different languages.This means that whether you manage multiple language sites for a brand or different language content on the same site, AnQiCMS can provide a unified and efficient management experience.
The system not only supports content switching and display, but also allows developers and operators to finely control every detail of the page through its powerful template engine, including those SEO elements crucial for search engines such ashreflang.
UnderstandinghreflangThe principle of label operation
hreflangTags are a type of HTML attribute used to inform search engines (such as Google, Bing, etc.) about the different language or regional versions of a page. When you have an English page, along with corresponding Chinese, Spanish, or other language versions,hreflangLabels can help search engines understand: These pages are equivalent versions of the same content, but are aimed at different language users or regions.
Its main purpose is two-fold:
- Avoid duplicate content issues:If not
hreflangSearch engines may consider pages with similar content but in different languages as duplicate content, which can affect website rankings. - Improve user experience:Make sure the user is directed to the page version most relevant to their language preference or geographic location during a search.
hreflangTags are usually placed in the HTML page<head>area, the basic syntax structure is as follows:<link rel="alternate" href="[当前页面URL]" hreflang="[语言或语言-地区代码]">
For example, an English page may have a version for Chinese users in mainland China, as well as a version for Chinese users in Taiwan. Then, these three pages all need to be<head>Chinese languages refer to each other, forming a 'language group'.
How to implement AnQiCMShreflangAutomatic generation and application of tags
AnQiCMS in processinghreflangThe label demonstrated its flexibility and automation capabilities. The system provides a namedlanguagesThe template tag, specifically used to retrieve the list of configured multilingual site lists. Combined with this tag, we can generate all language versions on the websitebase.htmldynamically in the template filehreflang.
First, you need to configure your multilingual site in the AnQiCMS backend multi-site management.Generally, each language version can be considered a separate site, or distinguished by specific categories, pages.After configuring these sites, you can call them in the template.
Let's take a look at how to implement this in the AnQiCMS template. In the common header of your website template'sbase.htmlfile (usually containing the common header of the page, such as<head>tags), you can<head>Add the following code snippet inside the tag:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
The meaning of this code is:
{%- languages websites %}This is an AnQiCMS built-in tag that will traverse all the multilingual sites you have configured in the background and assign each site's information towebsitesVariable.websitesIt is an array object that contains details of each language site.{%- for item in websites %}Starting here withwebsitesArray is looping,itemThe variable represents a specific language site in each loop.<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">: This is the corehreflangof label generation.rel="alternate"This indicates an alternative version.href="{{item.Link}}":item.LinkDynamically outputs the corresponding page URL of the current language site. For example, if the current page is About Us, and there are two sites in English and Chinese, then the English site'sitem.LinkThis is the URL of our English about us page, the Chinese site.item.LinkThis is the URL of our Chinese about us page.hreflang="{{item.Language}}":item.LanguageIt will dynamically output the language code of the language site (such asen/zh-CN/frWait).These language codes must strictly follow the ISO 639-1 standard (language code) and ISO 3166-1 Alpha 2 standard (country code, optional).
In this way, no matter which language version of the page the user accesses, its<head>contains links to all other language versions.hreflangTags, thus clearly informing search engines of the relationship between these pages.
Configure multilingual site content: ensure consistency and discoverability.
In order tohreflangLabels have the most effect, just adding code in the template is not enough, content-level configuration is also important:
- Create equivalent content:Ensure that each language version has corresponding content. This content should be semantically identical but in different languages, not completely different content.In AnQiCMS, you can take advantage of its 'Document Management', 'Document Classification', and 'Content Model' features to create and manage consistent structures but different languages for different language versions.
- Uniform URL structure:Maintaining a concise and logical URL structure is very beneficial for SEO. AnQiCMS supports the configuration of 'pseudo-static rules', allowing you to set clear URLs for sites or content in different languages, such as
example.com/en/about-usandexample.com/zh/关于我们. - Use the site language pack:AnQiCMS's 'Global Function Settings' includes the 'Default Language Pack' option, which helps unify the backend interface and some system内置 prompts, but more importantly, it helps maintain consistency in the context of different language versions when creating content.
- Internal linking strategy: Ensure there are reasonable internal links between different language versions, for example, the English version of the product detail page should link to the corresponding Chinese version of the product detail page, which not only helps users switch languages, but also strengthens the search engine's understanding of the relationship between pages.
**Practice and Precautions
During implementationhreflangWhen labeling, there are several practices that can further optimize your multilingual SEO strategy:
Introduction
x-default:In addition to specifying the specific languagehreflangother than the language tag, it is recommended to add ahreflang="x-default"The label is used to indicate which page should be displayed when the user's language or region does not match any defined language version.It usually points to a language selector page, or a default, automatically detectable user language page.In the AnQiCMS template, you can use the abovelanguagesAdd a line outside the loop:<link rel="alternate" href="[您的默认或语言选择页URL]" hreflang="x-default">Self-reference
hreflang:Each page should include a link to itself.hreflangtag. AnQiCMS'slanguagesThe tag loop will automatically generate this item, no additional processing is required.Consistency of bidirectional links:All pages that refer to each other must contain links to each other.
hreflangLabel. For example, if English page A points to Chinese page B, then Chinese page B must also point to English page A. AnQiCMS calls inbase.htmlthe unified call.languagesLabel ensures this bidirectional consistency.Correct language and region codes:
item.LanguageThe output language code must be accurate and error-free. For versions that are only for the language, useen/frAnd; for language versions specific to certain regions, useen-US/zh-CN/es-MXIn the same format.Work together with Canonical tags:
hreflangandcanonicalTags serve different purposes.hreflangSpecify the alternative language/region version of the pagecanonicalSpecify the preferred (authoritative) version of the page to resolve duplicate content