What is hreflang meta in i18n Website?

@ SEO

Introduction

When creating multilingual websites, many focus on translation accuracy or switching locale experience, often overlooking the crucial SEO setting: hreflang. Recently, I completed adjustments for the multilingual versions of my blog🔗 and personal website template🔗, both of which are static content sites that require attention to SEO. I have documented my experiences in this article.

What is hreflang?

hreflang is an attribute in the HTML <link> tag used to inform search engines which language and region the page is designed for. When there are multiple similar contents, it can correctly direct users to the version that suits their language and region. Taking this blog as a case study, let’s generate the language data directly in the HTML document:

<head>
  <!-- The "default" language version displayed when search engines cannot determine the suitable language version for the user. -->
  <link rel="alternate" hreflang="x-default" href="https://www.webdong.dev/zh-tw/">


  <!-- When the user's language preference is zh (without specific region or script), the search engine will display this version. -->
  <link rel="alternate" hreflang="zh" href="https://www.webdong.dev/zh-tw/">


  <!-- For English users -->
  <link rel="alternate" hreflang="en" href="https://www.webdong.dev/en/">


  <!-- For Simplified Chinese users -->
  <link rel="alternate" hreflang="zh-cn" href="https://www.webdong.dev/zh-cn/">


  <!-- For Traditional Chinese users (specifically Taiwan) -->
  <link rel="alternate" hreflang="zh-tw" href="https://www.webdong.dev/zh-tw/">
</head>
  • rel="alternate": An alternative version of the page
  • hreflang="language-country": A combination of language code (ISO 639-1🔗) and region code (ISO 3166-1 alpha-2🔗).
  • href: URL corresponding to the language version.

Why is hreflang important?

  1. Avoid SEO penalties for duplicate content: Multilingual pages often have high content similarity, and search engines may consider them duplicate content and reduce rankings. hreflang informs search engines that these are designed for different languages or regions and should not compete with each other.
  2. Enhance user experience: For instance, en-US and en-GB represent American English and British English, respectively. Properly setting hreflang helps search engines provide the most suitable version based on the user’s location.

Common Errors and Questions

  1. No bidirectional annotation: If page A annotates the hreflang of page B, then page B should also reference page A, indicating that you have control over both pages.
  2. Alternative language fallback🔗: Use x-default to indicate an alternative page when no suitable language is found.
  3. Inconsistencies between hreflang settings on web pages and those in the Sitemap.

Conclusion

Although hreflang consists of just a few lines of HTML tags, it significantly impacts SEO performance and user experience for multilingual websites. If you are managing an international website, investing time in designing an appropriate hreflang strategy is definitely worthwhile.

Further Reading