Generate hreflang tags in seconds - no guesswork
Pick your URLs, choose the right language and region codes, and this hreflang generator builds the correct <link rel='alternate'> tags instantly. Copy them straight into your <head> or sitemap - no manual coding needed.
Multilingual sites that skip hreflang often get the wrong page shown to the wrong audience. Google shows your French page to English speakers, your US prices to European shoppers, and your rankings suffer. The tags fix that by telling search engines exactly which page belongs to which language and region.
Everything runs in your browser. Your URLs are never uploaded anywhere.
How to use the hreflang tag generator
- Add a URL row for each language or region version of a page - for example, one for English (US), one for English (UK), one for French.
- Select the language code (e.g.
en) and, if needed, the region code (e.g.US) for each row. Combined, this gives you the hreflang value likeen-US. - Add an x-default row if you have a fallback page for visitors whose language isn't matched - usually your main or global homepage.
- Click Generate and copy the output block into the
<head>of every page listed - all of them, not just one.
Worked example: English, French, and a fallback
Say you run an e-commerce site with three versions of your homepage:
| Language / Region | URL |
|---|---|
| English (US) | https://example.com/en-us/ |
| English (UK) | https://example.com/en-gb/ |
| French (France) | https://example.com/fr-fr/ |
| Fallback (x-default) | https://example.com/ |
The generator produces this block - and you paste it into the <head> of all four pages:
<link rel='alternate' hreflang='en-US' href='https://example.com/en-us/' />
<link rel='alternate' hreflang='en-GB' href='https://example.com/en-gb/' />
<link rel='alternate' hreflang='fr-FR' href='https://example.com/fr-fr/' />
<link rel='alternate' hreflang='x-default' href='https://example.com/' />The most common mistake is only adding the tags to one page. Every page in the set must list all the others - including itself. This is called reciprocal linking, and Google ignores hreflang signals that aren't reciprocal.
The key rules at a glance
- Tags must be reciprocal. If page A points to page B, page B must also point back to page A (and to itself).
- Use absolute URLs. Relative paths like
/fr-fr/don't work - always include the fullhttps://address. - Language codes follow BCP 47. Use ISO 639-1 two-letter codes for language (
en,fr,de) and ISO 3166-1 alpha-2 codes for region (US,GB,FR). The language comes first, region second. - x-default is optional but recommended. It tells Google which page to show when no other language matches the user's browser setting.
- Trailing slashes matter.
https://example.com/en/andhttps://example.com/enare treated as different URLs - be consistent.
Snippet: what a single hreflang tag looks like
A complete, valid hreflang tag for British English looks like this:
<link rel='alternate' hreflang='en-GB' href='https://example.com/en-gb/' />Key rule: this exact tag (pointing at the British-English URL) must appear in the <head> of every language version of that page - not just the British one. Add an hreflang='x-default' tag too, pointing at your language-selector or root page, so Google knows where to send visitors whose language you don't have a translation for.
How to add hreflang tags in code
If you're templating pages programmatically, you can generate the tags server-side rather than hardcoding them. Here are two minimal examples.
Python (Jinja2-style template)
pages = [
{'lang': 'en-US', 'url': 'https://example.com/en-us/'},
{'lang': 'en-GB', 'url': 'https://example.com/en-gb/'},
{'lang': 'fr-FR', 'url': 'https://example.com/fr-fr/'},
{'lang': 'x-default', 'url': 'https://example.com/'},
]
for page in pages:
print(f"<link rel='alternate' hreflang='{page['lang']}' href='{page['url']}' />")
JavaScript (browser or Node)
const pages = [
{ lang: 'en-US', url: 'https://example.com/en-us/' },
{ lang: 'en-GB', url: 'https://example.com/en-gb/' },
{ lang: 'fr-FR', url: 'https://example.com/fr-fr/' },
{ lang: 'x-default', url: 'https://example.com/' },
];
pages.forEach(({ lang, url }) => {
const link = document.createElement('link');
link.rel = 'alternate';
link.hreflang = lang;
link.href = url;
document.head.appendChild(link);
});
For large sites with hundreds of URLs, the same logic scales into a build script or CMS plugin - just feed it the list of locales and their canonical URLs.
How it works under the hood
The generator takes the URL and locale values you enter, validates that the language and region codes look correct, then renders a full <link> tag for each row. It also adds every tag to every sibling URL in the set, which is exactly what the reciprocal-link requirement demands.
The logic mirrors what's described in Google's official hreflang documentation and the underlying standard is defined in BCP 47 (language tag syntax). Everything runs client-side in your browser - no data leaves your device.
When to use hreflang tags - and when not to
Use them when:
- You have the same content in multiple languages (
en,fr,de...). - You have regional variants of the same language - like separate pages for US English and Australian English.
- Users in the wrong region are landing on the wrong page and bouncing.
Skip them (or use a different approach) when:
- You only have one language and one region - hreflang adds zero value there.
- You're serving language variants with JavaScript rendering only after page load - Google may not see the tags in time. Use server-rendered HTML or your XML sitemap instead.
- You want to block a country entirely - that's a job for geotargeting in Google Search Console, not hreflang.
You can also deliver hreflang signals via your XML sitemap, which is useful for very large sites where editing thousands of <head> sections isn't practical. The tag format is slightly different there, but the same language-code rules apply.
Ready to build your tag set? Use the tool above, paste the output into every page in the group, and you're done. Getting this right is one of the highest-impact fixes for international SEO.