Posted 2018-08-30 with tags HTML, hreflang, localization

The hreflang HTML attribute helps to differentiate pages that have the same content, but differ in language or targeted region.

For example, the following strategy lets search engines know that there is a substantially similar page to the main english canonical URL, but available in spanish:

<link rel="canonical" href="https://www.example.com/">
<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://www.example.com/es/" hreflang="es" />

There are a couple of other ways to implement the hreflang attribute, including using headers or via an XML sitemap, in addition to the HTML link attributes method shown in the above example.

The following Yoast guide is a good starting point for getting acquainted with the hreflang attribute: https://yoast.com/hreflang-ultimate-guide/, and here is a convenient tool to debug / verify an hreflang implementation: http://flang.dejanseo.com.au/.