Hreflang & HTML Lang: International SEO
If your website serves users in multiple languages or regions, International SEO is critical. Without proper language declarations, search engines might show the wrong version of your site to the wrong users, or treat near-identical language versions as duplicates and rank only one of them. There is no penalty for this – see duplicate content. This guide covers the two most important tools: the HTML Lang attribute and hreflang tags.
1. The HTML Lang Attribute
The lang attribute is a simple HTML element that tells web browsers, screen readers, and
search engines the primary language of the document. It must be placed inside the opening
<html> tag at the very top of your source code.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page head -->
</head>
...Why it matters: While Google relies more on hreflang for ranking multi-regional
sites, Bing and other search engines rely heavily on the HTML lang attribute. Furthermore,
it is absolutely essential for web accessibility (WCAG compliance) so screen readers know which
pronunciation rules to use.
2. What are Hreflang Tags?
Introduced by Google in 2011, the hreflang attribute tells search engines what the
relationship is between web pages in alternate languages. It allows you to say: "Hey Google, this is
my English page, but if the user is searching from Germany, please show them this German URL
instead."
Hreflang solves two major problems:
- Targeting: It ensures the correct language or regional URL is served in the search results.
- Duplicate Content: If you have an English site for the US (
/en-us/) and an identical English site for the UK (/en-gb/), hreflang prevents Google from viewing them as competing duplicate content.
3. Hreflang Syntax & Code Examples
Hreflang tags are typically placed in the <head> of your HTML document. The attribute
requires a specific format: a two-letter language code (ISO 639-1), optionally followed by a two-letter
country code (ISO 3166-1 Alpha 2).
Example: A website with an English page and a Spanish page.
<head>
<title>My Global Store</title>
<link rel="alternate" hreflang="en" href="https://www.example.com/en/page/" />
<link rel="alternate" hreflang="es" href="https://www.example.com/es/page/" />
</head>Example (Language + Region): A website targeting English speakers in the US vs. English speakers in the UK.
<head>
<title>My Regional Store</title>
<link rel="alternate" hreflang="en-us" href="https://www.example.com/us/page/" />
<link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/page/" />
</head>Important Rule: The language code ALWAYS comes first. You can specify a language
without a region (e.g., es), but you cannot specify a region without a
language (e.g., mx is invalid, it must be es-mx).
4. The x-default Attribute
What happens if a user searches from France, but you only have an English and Spanish version of your
site? You use the x-default tag. This tells Google which page is the default fallback for
unmatched languages and regions.
<link rel="alternate" hreflang="x-default" href="https://www.example.com/en/page/" />5. Crucial Rules & Best Practices
- Bidirectional Return Links: This is the golden rule of hreflang. If Page A links to Page B via hreflang, Page B must link back to Page A. If the return link is missing, the annotation is treated as unconfirmed and may not be taken into account.
- Self-Referencing Tags: Every page must include an hreflang tag pointing to itself. If your US page lists the UK and AU versions, it must also list the US version.
- Absolute URLs: Always use full, absolute URLs (including
https://), not relative paths. - Canonical Consistency: Hreflang tags should only point to canonical URLs. Do not
point an hreflang tag to a page that has a
noindextag or canonicalizes to a different URL.
Pro Tip: International SEO is incredibly easy to mess up. Rank-O-Saur automatically scans your hreflang tags, checks for valid country/language codes, and verifies that the return tags are correctly implemented across all language versions.
6. Common Mistakes to Avoid
- Wrong Country Codes: The UK code is
gb(Great Britain), notuk. Usingen-ukis a very common error and will be ignored by Google. - Using Regions Instead of Languages: Trying to target Europe with
en-eu. Europe is not a country code recognized by ISO 3166-1 Alpha 2. You must target specific countries within Europe. - Punctuation Errors: Using an underscore (
en_US) instead of a hyphen (en-us). The hyphen is strictly required for hreflang validation.
7. Quick reference: implementation methods
All three methods are treated as equivalent by Google. Choose exactly one and apply it consistently, because maintaining annotations in two places is the fastest way to create contradictions.
| Method | Best suited to | Caveat |
|---|---|---|
| HTML link elements in the head | Small and mid-sized sites | The head grows with every additional language version |
| XML sitemap | Large sites and many language versions | Not visible in the page source, which makes spot checks harder |
| HTTP header | Non-HTML files such as PDFs | The only option there, but requires server configuration |
8. Frequently asked questions
Do hreflang annotations have to be reciprocal?
Yes. If page A points to page B, then B must point back to A. Missing return links are the single most common hreflang error, and Google ignores annotations that are not confirmed from both sides.
How do hreflang and canonical tags interact?
Every language version must canonicalise to itself. Pointing the German version's canonical at the English URL cancels the hreflang relationship and removes the German page from the index. Self-referencing canonicals plus reciprocal hreflang is the correct combination.
Is the x-default value mandatory?
No, it is optional. It is recommended whenever you have a language selector or a fallback page for visitors whose language and region you do not explicitly target, because it tells Google which version to show in all remaining cases.
Should hreflang go in the HTML, the sitemap or the HTTP header?
Any one of the three works, and all are treated equally. Pick a single method and apply it consistently — maintaining annotations in two places is the fastest route to contradictory signals. For non-HTML files the HTTP header is the only option.
Read next
