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" />And for the related spanish alternate page (only the canonical url changes):
<link rel="canonical" href="https://www.example.com/es">
<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://www.example.com/es/" hreflang="es" />Make sure to adjust the canonical URL on the spanish page (don't leave it as http://example.com/).
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/.