Hreflang and Canonical Tags: How They Work Together

Hreflang and canonical tags are two different tools solving two different problems. When they're used correctly together, they complement each other. When they conflict, they confuse Google -- and you end up with neither working as intended.

What each tag does

Canonical tags tell Google which URL is the "preferred" version when multiple URLs have the same or very similar content. They're used to consolidate link equity and prevent duplicate content issues. A canonical points from a duplicate to the original.

Hreflang tags tell Google that multiple pages contain equivalent content for different language or regional audiences. They're used to ensure the right version appears in the right market. They don't consolidate -- they differentiate.

The core difference: canonical says "this page is a duplicate, use that one instead." Hreflang says "these pages are different audience targets, use each in its context."

The fundamental rule

Each page's canonical tag must point to itself.

That's it. If your French page (/fr/) has a canonical pointing to your English page (/en/), you're telling Google: "the French page is a duplicate of the English page." Then your hreflang says: "the French page is the version for French users." Google sees a contradiction and defaults to ignoring the hreflang.

<!-- CORRECT: canonical points to self -->
<!-- On /fr/pricing/ -->
<link rel="canonical" href="https://example.com/fr/pricing/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/pricing/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing/" />

<!-- WRONG: canonical points to another language -->
<!-- On /fr/pricing/ -->
<link rel="canonical" href="https://example.com/en/pricing/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/pricing/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing/" />

Cross-language canonicals break hreflang

Setting canonical to another language version is the single most damaging hreflang mistake. Google's documentation is explicit: hreflang is ignored when it conflicts with canonical. Your non-English pages effectively disappear from the language-specific SERPs.

How Google handles conflicts

When Google sees a page with a canonical pointing to a different URL, it treats that different URL as the authoritative page. Any hreflang tags on the "non-canonical" page carry far less weight -- Google may process them or may ignore them entirely.

The practical result: your /fr/ pages may get indexed, but they won't be selected for French search results. Your English page ends up ranking in French markets, which is exactly the problem hreflang is supposed to prevent.

Check your hreflang and canonical setup

Validate that your canonical and hreflang tags are consistent across every page.

The common mistake and why it happens

The cross-language canonical mistake usually comes from developers treating multilingual sites like they treat URL parameter pages. With URL parameters, you canonicalise the variants to the clean URL. With language variants, that logic doesn't apply -- each language version is a distinct, intended page.

It also happens when SEO plugins are misconfigured. Some WordPress SEO plugins will set the canonical to whatever the plugin thinks is the "main" page. If your main language is English, every other language page ends up canonicalised to English.

Canonical within the same language

Canonical tags are still legitimate and useful within a single language. If your English site has both paginated versions and a single-page version of an article, canonicalise the paginated pages to the main page. That's a legitimate use.

The rule is: don't cross canonical across languages. Within a language, use canonical normally.

Handling near-duplicate language variants

Sometimes English-US and English-GB pages are nearly identical. Some teams are tempted to canonical one to the other. Don't. Instead:

Use hreflang="en-us" and hreflang="en-gb" with self-referencing canonicals
Differentiate the content where possible (pricing, spelling, local references)
If the content really is identical, consider whether you actually need separate pages

Near-identical language variants

If your en-US and en-GB pages differ only in a handful of words, hreflang handles this correctly. Google will serve the right version to the right audience even when the content overlap is high.

Quick reference: correct setup

<!-- English page: /en/about/ -->
<link rel="canonical" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/about/" />

<!-- French page: /fr/about/ -->
<link rel="canonical" href="https://example.com/fr/about/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/about/" />

Every canonical points to the page it lives on. Every page has the full hreflang set. No conflicts.

Part of Boring Tools -- boring tools for boring jobs.

Generate perfect hreflang tags

Create and validate hreflang markup for your multilingual site. Free.