The hreflang tag is a small HTML element placed in the head of a document that changes everything when you build a multilingual website. It tells search engines which language (and/or regional) version of a web page should be shown to which user in which country.
Without this markup, your web pages in French, English, German or for a given geographic region (France, Canada, the United Kingdom, the United States…) risk cannibalising each other, looking like duplicates, creating a poor user experience (prices, currency, untranslated content) and ultimately hurting your SEO visibility (higher bounce rate, loss of geographic targeting).
Properly implemented, a hreflang tag sends each visitor to the right language: precise targeting, cleaner international SEO and better indexable content.
This guide gives a clear definition, the implementation methods, HTML and XML sitemap code examples, the syntax of language and country codes (ISO format), the relationship with the canonical tag, and then a verification checklist in Google Search Console to avoid the most common mistakes (missing tag, incorrect tags, links to a non-indexable URL, etc.).
You will also see how to use tools such as WordPress, Shopify or Weglot to implement it more easily, along with free validation and checker tools.
Hreflang: definition and goals
On a website, the hreflang tag is an hreflang attribute placed in a hreflang tag <link rel="alternate" …> inside the head of the markup-language (HTML) document. It tells search engines that several versions of a page exist for different audiences: by language (French, English, German…) and/or by region (France, Canada, the United Kingdom).
In practice, you add a list of links between these variants; each URL “points” to the other versions and helps Google send the right page to the right user instantly.
Main goal
To match the right language and region to the right page, consistently and professionally: fr-FR for France, en-GB for the United Kingdom, and so on. The function is clear: specify, using standardised parameters (ISO codes), the most relevant version based on where the searcher is from, their country and their language. The result: a better experience and cleaner SEO (less content seen as duplicate).
Why it matters
Without hreflang, your pages in several languages can compete with each other: the English page may show up in France, or the other way round. With hreflang, your site and the search engines work together: they understand these are “sister” versions, not copies. The importance is twofold: on one side, you bring clarity for the crawler; on the other, you offer the right content to the right audience at the right time.
Where it goes in the page, and how
The declaration goes in the <head> section of the website (or in the sitemap). Here is an HTML example:
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/produit-x" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk-en/product-x" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
Here, each link using rel="alternate" and the hreflang attribute specifies the URL intended for a given audience. The version for France points to the UK English version, and vice versa; x-default acts as the “default page” if no variant fits.
Tools and CMSs
On WordPress, Shopify or a headless site, you can create these links by hand, or use a service such as Weglot, which generates the code automatically and keeps the matches between translated child pages and parent pages up to date. Either way, the key job is to define the pairs properly and the reciprocity between each version of a page.
Hreflang is a solution that helps search engines understand your variants: you declare language/region pairs, link the URLs together, and let Google instantly send the right page depending on the user’s situation. It is the thing to set up as soon as your website targets several countries or languages: one small line of code, a big gain in relevance.
Why is hreflang important for SEO?
Because international SEO rests on one promise: for every query, the right page, in the right language, for the right person. In practice, search engines often see several different versions of the same content. Without a hreflang tag, they hesitate, mix up the indexing and may show the wrong version of a page.
The tag then becomes the key element: it states explicitly (and targets) the language and, if needed, the region to serve. Its function is simple: to say that these URLs are equivalents and, depending on the user’s situation (country, browser language, query intent), to instantly offer the right answer.
From a professional standpoint, hreflang prevents cannibalisation, clarifies authority between sister pages and improves engagement signals (lower bounce, better conversion). In short, it serves your main goal: being relevant where people are searching for you. On the production side, you can add these annotations by hand or with a commonly used tool such as Weglot, which declares and syncs the variant pairs automatically.
Behind the scenes, it is the joint work of content and markup: you give search engines a coherent group of URLs, and they send the best version of a page to the right person. The result: clean, readable international SEO, and users who find what they expect, where they expect it.
The codes: language, region and ISO format (quick decoding)
Two standards sit behind hreflang:
- ISO 639-1 for the language (e.g. fr, en, de);
- ISO 3166-1 alpha-2 for the country/region (e.g. FR, CA, GB, US).
You add the region after the language, separated by a hyphen and in capitals for the country part:
- Language only → fr, en, de: you declare a purely language-based version of a page, with no territorial targeting. Useful when the same content suits every group of users who speak that language.
- Language + region → fr-FR, fr-CA, en-GB, en-US: you specify a geographic destination. This granularity lets you show each visitor the page meant for them (currency, taxes, delivery, local phrasing).
Golden rule: the code must match the content actually served: prices in euros, French terms and conditions, “colour/color” vocabulary, etc. An English page for the United Kingdom will be en-GB (not en-UK, which does not exist in ISO 3166-1). Likewise, Switzerland can host fr-CH, de-CH and it-CH if your pages are adapted to each language and to that territory.
Practical tip: no country-specific versions? Then the language alone is enough (fr, en, de). You can add regional variants later if the project grows (e.g. launching en-US pricing).
Solutions such as Weglot help you manage these language/region pairs and link the versions together: the tool builds the group of variants (the “alternates”) for each version of a page, which simplifies maintenance and reduces the risk of coding errors.
Three ways to implement the hreflang tag
In the HTML code (head section)
This is the “document head” method. You place link rel alternate hreflang elements pointing to each alternative version:
<head>
<link rel="alternate" hreflang="fr-FR" href="https://exemple.org/fr/produit-x" />
<link rel="alternate" hreflang="fr-CA" href="https://exemple.org/ca-fr/produit-x" />
<link rel="alternate" hreflang="en-GB" href="https://exemple.org/uk-en/product-x" />
<link rel="alternate" hreflang="x-default" href="https://exemple.org/" />
</head>
Advantage: visible in the page code, and used by most popular CMSs (WordPress, Shopify, etc.).
Watch out: on a large website the list can get long; keep the syntax correct and avoid missing entries.
In HTTP headers (PDFs and files)
Useful when the page is a PDF or another non-HTML resource:
Link: <https://exemple.org/fr/guide.pdf>; rel="alternate"; hreflang="fr-FR"
Link: <https://exemple.org/en/guide.pdf>; rel="alternate"; hreflang="en-US"
Link: <https://exemple.org/>; rel="alternate"; hreflang="x-default"
Advantage: perfect for downloadable files.
Technical requirement: server/CDN access to change the header.
In the XML sitemap (the scalable method)
You add the hreflang annotations with the xhtml namespace in the XML sitemap:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://exemple.org/fr/produit-x</loc>
<xhtml:link rel="alternate" hreflang="fr-FR" href="https://exemple.org/fr/produit-x"/>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://exemple.org/ca-fr/produit-x"/>
<xhtml:link rel="alternate" hreflang="en-GB" href="https://exemple.org/uk-en/product-x"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://exemple.org/"/>
</url>
</urlset>
Advantage: centralised and tidy for large websites; crawlers make good use of this source.
Reminder: a single “source of truth” (HTML or sitemap), to avoid discrepancies.
x-default (or default) serves the main/fallback version when no language or region stands out (a page for an international audience, a country/language selector).
Hreflang, canonical and indexing: the right relationship
Think of it this way: hreflang organises your variants by geographic area and language, while the canonical tag names, for each version of a page, the reference URL to index. Each variant must therefore be self-canonical (the canonical points to itself) so that it keeps its own value in the index.
Hreflang’s role is horizontal: it links equivalent pages to each other (e.g. fr-FR ↔ the English en-GB version) so that, for a given query, the user sees the right URL for their area.
If, by mistake, you set the canonical of all variants to a single “global” URL, you cancel the hreflang signal: Google will understand that every user (all areas combined) should be sent to that one page, and the other versions may no longer be indexed correctly. The result: loss of geographic targeting, lower local visibility and a degraded experience.
Good set-up:
- fr-FR → canonical = fr-FR; hreflang to en-GB, en-US, etc.
- en-GB → canonical = en-GB; hreflang to fr-FR, en-US, etc.
Solutions such as Weglot help you respect this winning pair (self-canonical + hreflang internal linking) by syncing the links between variants. In the end, keep to the golden rule: each version of a page is responsible for itself (canonical), and friends with its sisters (hreflang).
It is this tandem that guarantees each user the right page, in the right language, for the right geographic area.
URL structures and geographic targeting with hreflang
- Subdirectories: domain.com/fr/, domain.com/en/ → easy, and they share the domain’s authority.
- Subdomains: fr.domain.com, en.domain.com → tidy but more to manage.
- ccTLDs: domain.fr, domain.de → strong regional signal, fragmented authority.
The method you choose depends on the project; what matters is consistency: same pages, same variants, hreflang markup properly implemented everywhere.
Real-life cases (detailed hreflang examples)
France vs French-speaking Canada: fr-FR ↔ fr-CA
Same language, different geographic area, so different expectations (euros/VAT vs dollars/HST, delivery terms, legal notices).
HTML example (head):
<link rel="alternate" hreflang="fr-FR" href="https://exemple.com/fr/chaussures-trail" />
<link rel="alternate" hreflang="fr-CA" href="https://exemple.com/ca-fr/chaussures-trail" />
<link rel="alternate" hreflang="x-default" href="https://exemple.com/" />
Key point: both pages are versions of the same page, adapted to each country (text, currencies, fees). Each URL is self-canonical, and each declares the other as an alternate.
United Kingdom vs United States: en-GB ↔ en-US
Same language (English) but regional variants: spelling (“favourite” vs “favorite”), units (kilometres vs miles), taxes, delivery times, media.
HTML example (head):
<link rel="alternate" hreflang="en-GB" href="https://exemple.com/uk-en/running-shoes" />
<link rel="alternate" hreflang="en-US" href="https://exemple.com/us-en/running-shoes" />
<link rel="alternate" hreflang="x-default" href="https://exemple.com/" />
Content tip: also adapt the meta titles/descriptions, the currency and the terms (returns, customer service) to reduce bounce and strengthen local relevance.
Multilingual Switzerland: fr-CH, de-CH, it-CH
One country with several official languages. Three language variants coexist, all targeting the same geographic area (CH).
Example in the XML sitemap:
<url>
<loc>https://exemple.com/ch-fr/abonnement</loc>
<xhtml:link rel="alternate" hreflang="fr-CH" href="https://exemple.com/ch-fr/abonnement"/>
<xhtml:link rel="alternate" hreflang="de-CH" href="https://exemple.com/ch-de/abonnement"/>
<xhtml:link rel="alternate" hreflang="it-CH" href="https://exemple.com/ch-it/abonnement"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://exemple.com/"/>
</url>
Good habit: make sure all variants reciprocate, with one self-canonical per URL.
Non-HTML resources (PDFs, files): HTTP headers
When the page is a PDF (or another file), you can’t place tags in the head. You declare hreflang in the server/CDN HTTP headers.
Example headers:
Link: <https://exemple.com/fr/guide-produit.pdf>; rel="alternate"; hreflang="fr-FR"
Link: <https://exemple.com/en/product-guide.pdf>; rel="alternate"; hreflang="en-GB"
Link: <https://exemple.com/>; rel="alternate"; hreflang="x-default"
Quality check: make sure every file returns 200 OK (no 302/404), and that the equivalence between versions is real (same guide, different languages).
“Language only” vs “language + region” variant
If you only have one English translation for everyone, use en with no country:
<link rel="alternate" hreflang="fr" href="https://exemple.com/fr/abonnement" />
<link rel="alternate" hreflang="en" href="https://exemple.com/en/subscription" />
<link rel="alternate" hreflang="x-default" href="https://exemple.com/" />
The day you split by country (e.g. US/UK), switch to en-US / en-GB and update all declarations (HTML or sitemap) to stay consistent.
E-commerce: price and delivery variants by country
A shop with the same product pages, but different prices, delivery and taxes:
<link rel="alternate" hreflang="fr-FR" href="https://exemple.com/fr/produit-x" />
<link rel="alternate" hreflang="de-DE" href="https://exemple.com/de/produkt-x" />
<link rel="alternate" hreflang="es-ES" href="https://exemple.com/es/producto-x" />
For extra clarity: also adapt the product schema (currency), and don’t forget to align local titles/descriptions and FAQs.
Page missing in one language: use x-default
If a variant isn’t ready yet, don’t declare it. Point to a generic page (x-default) or a country/language selector:
<link rel="alternate" hreflang="fr-FR" href="https://exemple.com/fr/support" />
<link rel="alternate" hreflang="en" href="https://exemple.com/en/support" />
<link rel="alternate" hreflang="x-default" href="https://exemple.com/support" />
Goal: avoid 404s and redirect chains that muddy indexing.
Implementing hreflang in CMSs (WordPress, Shopify, Weglot…)
- WordPress: multilingual plugins (Weglot, WPML, Polylang) implement hreflang tags automatically. Check the canonical reference and the XML sitemap.
- Shopify: recent themes use
link rel="alternate" hreflangsections; if needed, edit the layout code. - Weglot: free to start, then a monthly plan; it quickly creates translated versions and handles the hreflang annotation automatically.
- Others: any CMS used professionally (Drupal, Magento, etc.) offers an option to add hreflang via a template or the sitemap.
Common hreflang mistakes and how to avoid them
- Missing tag on a variant: the list is incomplete → add all the equivalent URLs, including the self-reference.
- Invalid codes: en-UK instead of en-GB → respect the ISO format.
- Link to a non-indexable URL (301/404, noindex) → target the final 200 OK destination.
- Inconsistent mix (HTML ≠ sitemap) → pick one source and keep it up to date.
- Canonical set wrongly (to another variant) → go back to self-canonical.
- Hard geo-redirect that blocks access to an alternative version → show a selector; don’t block by IP.
Checking: Google Search Console has an International targeting report (when available) and flags some errors. Free online checkers test the validity of hreflang tags. A professional crawl helps spot problems at scale.
Copy-and-paste hreflang templates (HTML and sitemap)
HTML / head (simple version)
<link rel="alternate" hreflang="fr-FR" href="https://exemple.org/fr/page-x" />
<link rel="alternate" hreflang="en-GB" href="https://exemple.org/uk-en/page-x" />
<link rel="alternate" hreflang="x-default" href="https://exemple.org/" />
XML sitemap (with xhtml)
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://exemple.org/fr/page-x</loc>
<xhtml:link rel="alternate" hreflang="fr-FR" href="https://exemple.org/fr/page-x"/>
<xhtml:link rel="alternate" hreflang="en-GB" href="https://exemple.org/uk-en/page-x"/>
<xhtml:link rel="alternate" hreflang="x-default" href="https://exemple.org/"/>
</url>
</urlset>
HTTP header (PDF)
Link: <https://exemple.org/fr/guide.pdf>; rel="alternate"; hreflang="fr-FR"
Link: <https://exemple.org/en/guide.pdf>; rel="alternate"; hreflang="en-GB"
Editorial best practices (SEO is more than the hreflang tag)
The hreflang tag doesn’t create relevance if the version isn’t properly adapted:
- Real translation (not just one translated word);
- Different content when the region requires it (prices, stock, legal information);
- Language-specific title/meta tags;
- Consistent product schema (currency).
It is the joint work of markup and content that delivers maximum optimisation and international visibility.
Hreflang FAQ
Do I need an x-default entry?
Recommended if you have a main version or a page meant to guide the audience (country/language selector).
Can I mix HTML and sitemap?
Yes, but it’s better to have one main source. If you mix them, make sure they work and declare the same list.
Does hreflang replace the canonical?
No. Hreflang links alternative versions; the canonical remains the main signal for indexing.
What if a page doesn’t exist in a language?
Don’t declare a hreflang to a missing URL. Point to x-default or leave the variant out.
Go-live checklist for your hreflang tags
- Valid ISO codes (language + region if useful).
- Reciprocity between all URLs; self-reference included.
- x-default for the default alternative version.
- 200 OK targets (no redirect/error).
- Self-referencing canonical.
- A single preferred method (HTML or XML sitemap or header).
- Audit and validation via Google Search Console and a third-party checker.
- Updates maintained (adding a language → update the sitemap/head).
You are now a hreflang pro!
Using the hreflang tag well means implementing a clear language and regional annotation, understandable by the search engine and maintained over time. Between HTML, XML sitemap and headers, choose the method that suits your project, define codes in ISO format, check reciprocity, pair it with a clean canonical, then monitor in Google Search Console: this simple strategy improves your international SEO, avoids duplicate content and gives your audience the right version in the right place.
Whether you are on WordPress, Shopify or a more technical stack, a rigorous set-up is all it takes for your pages to work properly and gain visibility, an effective way to serve your global audience without losing the thread between countries.
