Multilingual e-commerce hreflang: error-proof guide

Multilingual e-commerce hreflang: the error-proof guide

You have a French store and you're launching an English version for the US. Everything seems to work — until you realize that when someone searches for your brand from France, Google shows the US page. Your French customers land on an English page, and conversion drops.

The culprit: badly configured hreflang. This tag tells Google which language or regional version to serve to whom. Done well, it supports international SEO. Done badly, it creates chaos with cross-redirects.

What hreflang solves (and does not solve)

Hreflang solves:

Serving the FR page to French-speaking users, EN to English-speaking users
Distinguishing fr-FR (France) and fr-CA (Canada) with different pricing or shipping
Avoiding duplicate content across 5 nearly identical language versions

Hreflang does not solve:

Ranking itself (hreflang is not a direct ranking signal)
Market performance (local backlinks still matter for each market)
Poor translation quality

If your site has only one language, you do not need hreflang. If you have 2+ languages or 2+ regions, it is required for clean international SEO.

The 3 implementation methods

Method 1 — `<link>` tags in HTML

The most common. Each page lists its alternatives in the <head>:

<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/products/chaussure-derby" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/products/leather-derby-shoes" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/products/leather-derby-shoes" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/products/leather-derby-shoes" />

A good fit for small catalogs (<1000 pages). Hard to maintain at scale — each page must know its alternatives.

Method 2 — XML sitemap

Each URL in the sitemap lists its variants:

<url>
  <loc>https://example.com/fr/products/chaussure-derby</loc>
  <xhtml:link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/products/chaussure-derby" />
  <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en-us/products/leather-derby-shoes" />
  <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/products/leather-derby-shoes" />
</url>

Better for large catalogs: it centralizes relationships in a single file. Easier to generate by script. This is the method recommended by Ecomptimize for catalogs with 5,000+ product pages.

Method 3 — HTTP `Link` header

For non-HTML files (PDFs, localized images):

Link: <https://example.com/fr/catalog.pdf>; rel="alternate"; hreflang="fr-FR",
      <https://example.com/en/catalog.pdf>; rel="alternate"; hreflang="en-US"

Rare in e-commerce, useful for downloadable PDF catalogs.

Recommendation: use the sitemap method for catalogs with >1000 URLs, HTML tags for the rest.

Hreflang vs canonical: do not confuse them

This is the most common misunderstanding.

Canonical says: "this is the reference URL for this content among several identical or similar URLs." It is used for deduplication.

Hreflang says: "these are the language versions of this content, each one is unique for its audience." It is used for localization.

Critical rule: hreflang points to a different URL (the version in another language). canonical points to a potentially identical URL (the same page or a variation with parameters).

A page should have both hreflang AND a canonical:

<!-- Canonical for this page -->
<link rel="canonical" href="https://example.com/fr/products/chaussure-derby" />

<!-- Language versions of this page -->
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/products/chaussure-derby" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/products/leather-derby-shoes" />

Fatal mistake: pointing the canonical of the EN version to the FR version ("canonicalizing translations"). Google reads that as "the EN version is a duplicate of FR to ignore" and does not index the EN page at all. SEO disaster.

The bidirectional matrix

Hreflang must be bidirectional: if A says "my EN version is B," then B must say "my FR version is A." Otherwise, Google ignores the relationship.

Example of a correct implementation:

FR page:

<link rel="alternate" hreflang="fr-FR" href=".../fr/..." />
<link rel="alternate" hreflang="en-US" href=".../en-us/..." />
<link rel="alternate" hreflang="x-default" href=".../en/..." />

EN US page:

<link rel="alternate" hreflang="fr-FR" href=".../fr/..." />
<link rel="alternate" hreflang="en-US" href=".../en-us/..." />
<link rel="alternate" hreflang="x-default" href=".../en/..." />

Exactly the same 3 lines on each version. No missing relationships, no asymmetric relationships.

Regional variants: fr-FR vs fr-CA vs fr-BE

When should you distinguish regions?

Different prices (VAT, shipping, currency) → yes, distinguish them
Slightly different content (US vs EU sizes, local wording) → yes, distinguish them
Identical content, only the currency changes → no, do not distinguish them; handle currency at checkout

Regional targeting requires distinct URLs:

/fr/products/chaussure-derby     (hreflang="fr")
/fr-ca/products/chaussure-derby  (hreflang="fr-CA")
/fr-be/products/chaussure-derby  (hreflang="fr-BE")

If you cannot maintain 3 distinct versions, it is better to keep a single fr version and handle differences (currency, shipping) at runtime.

x-default: why it is essential

hreflang="x-default" indicates which version to serve when no match is found. For example, a user in Romania who has neither FR nor EN-US nor EN-GB in their preferences — which version should be served?

Without x-default, Google chooses on its own. With x-default, you stay in control (typically the most generic English version).

Recommendation: always declare an x-default, ideally the generic English version.

Implementation by platform

Shopify

Shopify Markets (since 2022) handles hreflang natively if you configure multiple markets with separate domains or subdomains. In most cases, no customization is needed.

Limits: Shopify Markets does not support every language/country combination with fine-grained control. For complex cases (10+ markets), use an app like Langify plus its manual hreflang module.

WooCommerce

WooCommerce has no native support. Three options:

WPML (paid): leading multilingual plugin, handles hreflang automatically
Polylang (free/paid): alternative with solid hreflang support
TranslatePress (paid): simpler for small catalogs

Be careful: do not combine two plugins (WPML + Polylang), as this creates duplicate and broken hreflang tags.

Headless or custom

If you use a custom frontend (Next.js, Nuxt), generate hreflang server-side. On Next.js with next-intl, generation is automatic if you use /[locale]/... routes.

Hreflang audit in 15 minutes

On your current site, check:

Bidirectionality: for 10 test pages, verify that each version refers back to the others (via Screaming Frog or hreflang.org)
x-default present: on all localized pages
No cross-language canonical: the EN version must not canonicalize to FR
Valid ISO codes: "fr", "en" (language) or "fr-FR", "en-US" (language-country). Not "french" or "uk".
Same-page URL in hreflang and canonical: avoids mismatches

Free tools:

hreflang.org — URL-level audit
Screaming Frog (SEO Spider) — bulk audit
Google Search Console — hreflang error reports in Settings → International Targeting