How do you use a canonical with an hreflang tag? These are two different types of tags but are often used on the same pages. It can get confusing what the canonical should be.
hreflang: This tag is used to explain different versions of the current page. For example, there is another version of this page available for people that speak a different language and the hreflang provides the link to this other version of the page.
canonical: This tag is used to explain which URL is the official URL for the current page. For example, a page’s URL may be available with or without a query string and the canonical explains which URL to use.
Let’s take an example where we have a page available in English and Spanish.
- English: site.com/en/page
- Spanish: site.com/es/page
These pages communicate the same information but one is in English and Spanish. The question I often hear is that because these pages communicate the same information, they are duplicates. Therefore, the canonical on both pages should point to the English page (or the canonical on both pages should point to the Spanish page).
However, these pages are not duplicates! Sure, the English and Spanish pages communicate the same information but that isn’t how Google evaluates duplication (or how users evaluate duplication). Duplication is about intention. My intention for using the English page will naturally differ from my intention for using the Spanish page. The Spanish and English page are related, but they are not duplicates.
As a result, the English page and the Spanish page should each have a self-referencing canonical tags. The canonical would be set as follows.
English:
<link rel="canonical" href="/en/page">Spanish:
<link rel="canonical" href="/es/page">The hreflang comes alongside the canonical and establishes the relationship between these pages. You need to explain the relationship on both pages, so both pages should have these hreflang tags:
<link rel="alternate" href="/es/page" hreflang="es" />
<link rel="alternate" href="/en/page" hreflang="en" />This example uses a language example, but the same would be true for page versions that target different regions. For example, if you have a version of the page for visitors in the US, Canada and Mexico, then all three of the pages would contain a self-referencing canonical and hreflang tags explaining the regional relationship between those pages.