Hreflang and canonical URL serve different purposes but can work together to ensure search engines properly index multilingual pages.
The canonical URL indicates the primary version of a page, while hreflang points to language or region-specific alternatives. Correctly combining hreflang and canonical prevents duplicate content issues while directing users to the appropriate page version.
In this tutorial, we will learn how to avoid hreflang and canonical conflicts by understanding their roles and following best practices.
The Role of Canonical Tags
When a canonical URL points to itself, it tells search engines that the page should be indexed among similar pages. A canonical tag pointing to another page tells search engines which version should be indexed instead of the current one.
Let’s look at the cases in which we should use canonical.
Duplicate or Similar Content Across URLs
Use the canonical tag on all variations to point to the main URL. For example, this product page exists in three variants.
https://example.com/product
https://example.com/product?color=red
https://example.com/product?size=large
But if we want to index only a variant, we use this canonical tag.
<link rel="canonical" href="https://example.com/product">We can also use the canonical tag to avoid problems with paginated content that uses URLs like the ones below.
https://example.com/articles?page=1
https://example.com/articles?page=2
In this case, you can either make each page self-reference with a canonical tag, or you may point all to page 1 if they should be treated as a single entity.
Here, I want to index only the first paginated page.
<link rel="canonical" href="https://example.com/articles?page=1">HTTP vs. HTTPS or www vs. Non-www
Use the canonical tag to specify the preferred version, such as HTTPS over HTTP or a non-www version over www.
Syndicated or Copied Content
If you allow third-party websites to republish your content, you can add a canonical tag to tell search engines the original source.
Printer-Friendly or Mobile Versions of a Page
If you have a simplified or printer-friendly version of a page, use a canonical tag on it to point to the main version.
Session IDs and Tracking Parameters
URLs with session IDs (?sid=123) or tracking parameters (?utm_source=google) should have a canonical tag pointing to the clean version of the URL.
When Not to Use the Canonical Tag
- For unrelated pages or pages with significantly different content (use 301 redirects if necessary).
- If you need all pages indexed separately (e.g., paginated content with unique value).
Using Hreflang
A URL with correctly implemented hreflang tells search engines which alternate versions exist in terms of language, script, or geographic targeting.
It’s worth noting that the URLs in the hreflang annotations should always be indexed.
How Canonical Tags and Hreflang Work Together
To wrap up, canonical declares to search engines which page should be indexed when multiple copies of the pages are present. Hreflang instead tells which alternate versions in terms of language, script, or geographic location are available for the same page. This results in search engines serve the correct pages to the appropriate users.
Let’s explore how to correctly combine hreflang and canonical through practical examples.
A Typical Hreflang and Canonical Implementation
Let’s see a typical example of hreflang and canonical implementation. As you can see, the canonical always self references the page and changes based on the current page, while hreflang remains the same across the alternate pages.
On https://example.com, the canonical and hreflang tags should be structured as follows:
<link rel="canonical" href="https://example.com/" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es" hreflang="es" />
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
On https://example.com/es/, only the canonical tag should change to reflect the page that hosts it.
<link rel="canonical" href="https://example.com/es/" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es/" hreflang="es" />
<link rel="alternate" href="https://example.com/fr/" hreflang="fr" />
On https://example.com/fr/, only the canonical tag should be updated to match the current page.
<link rel="canonical" href="https://example.com/fr/" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es/" hreflang="es" />
<link rel="alternate" href="https://example.com/fr/" hreflang="fr" />
Implementation With Hreflang and Canonical Mismatch
In a correct implementation, both the canonical and self-referencing hreflang tags should be present and point to the same URL.
<link rel="canonical" href="https://example.com/" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es" hreflang="es" />
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
Failing to do so can lead to ambiguous signals sent to search engines, causing them to decide which version of the page should be indexed.
In the next example, you can see an incorrect implementation with a mismatch between canonical and hreflang. Specifically, they point to two different URLs.
<link rel="canonical" href="https://example.com/?p=1" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es" hreflang="es" />
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
Missing Alternate Page
You can also create a canonical and hreflang mismatch by not self-referencing to the page with hreflang. By making this mistake, you will simultaneously receive the “Hreflang and Canonical Mismatch” and “No Self-Referencing Hreflang” warnings from search engines and SEO checkers.
<link rel="canonical" href="https://example.com/" />
<link rel="alternate" href="https://example.com/es" hreflang="es" />
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
General Rules for Combining Hreflang With Canonical
Always Add Canonical in the Page When Hreflang Is Present
Always add canonical content to the page when you combine it with hreflang, and remember to point the canonical tag to the visited language-specific URL, not to a single global version.
Use Hreflang in Conjunction with Canonical Carefully
If duplicate content exists (e.g., language variations with minimal differences), you should consider consolidating them with a single canonical or keeping them separate with hreflang.
Put the Same URL in Canonical and Hreflang
You can also create a mismatch, for example, by using different protocols, HTTPS and HTTP, a www and non-www version of a URL, etc. Do not make errors like this one:
<link rel="canonical" href="https://www.example.com/" />
<link rel="alternate" href="https://example.com/" hreflang="en" />
<link rel="alternate" href="https://example.com/es" hreflang="es" />
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
Add Hreflang Tags Only When Self-Referencing the Page With Canonical
Avoid placing hreflang tags on pages where the canonical tag points to a different URL. This implementation can send mixed signals to search engines.
If a page has a canonical tag pointing to another page, it tells search engines that the page should not be indexed; here, search engines ignore hreflang tags. As a consequence, add the hreflang tags only when the page is self-referencing with canonical.
Avoid Problems Caused by URL Parameters
Always ensure that canonical URLs on pages with parameters point to a single clean URL, usually without parameters.
If your website runs on WordPress, ensure that your SEO plugin correctly applies the canonical tag and that the hreflang plugin outputs the hreflang tags, even when URLs contain parameters.
How Hreflang Checker Report Hreflang and Rel Canonical Conflicts
The error usually reported by hreflang checkers is “Canonical and Hreflang Conflict” or “Conflicting hreflang and rel=canonical“. The extended explanation usually includes more details on the issue, it states:
Canonical URL is https://example.com/ but the matching hreflang tag is not present
To fix this, a self-referencing alternate URL with hreflang should be added.
Detect Hreflang and Rel Canonical Conflicts
The easiest method to verify hreflang and canonical conflicts is to manually check the HTML of your page to find these issues. However, this is not doable for large websites, and a SEO tools like SEMRush, a browser extension like Ahrefs SEO Toolbar, or dedicated hreflang solutions like Hreflang Manager are recommended.
Let’s now go through how to detect hreflang and canonical tag issues using the Hreflang Manager plugin for WordPress.
With the plugin installed and activated, go to the Advanced options and enable the Canonical and Hreflang Conflict check by clicking on the toggle.
Then proceed to the Checker menu and initiate a new audit by clicking the Check Hreflang button. The plugin will report hreflang implementation problems one per line in the generated table.
