/ seo-glossary / What is Hreflang? SEO Guide for Beginners
seo-glossary 7 min read

What is Hreflang? SEO Guide for Beginners

Learn what hreflang means in SEO, why it matters, and how to use it to improve your search rankings.

What is Hreflang? SEO Guide for Beginners

Hreflang is an HTML attribute that tells search engines which language and regional version of a page to serve to users in different locations. If your website has content in multiple languages or targets different countries, hreflang tags ensure that a French user sees the French version, a German user sees the German version, and so on. Without hreflang, Google may show the wrong language version in search results.

Why Hreflang Matters for SEO

When you have the same content in multiple languages, Google needs to understand the relationship between those pages. Without hreflang, search engines may see your English and Spanish versions as duplicate content and only index one. Or worse, they might show your English page to Spanish-speaking users in Mexico, creating a terrible user experience and killing your click-through rate.

Hreflang is also critical for regional targeting. If you have separate English pages for the US, UK, and Australia with different pricing, shipping information, or spelling conventions, hreflang tells Google which version to show in each country. This prevents your US page from outranking your UK page for British searchers.

I worked on a multilingual SaaS site that had content in 8 languages. Before implementing hreflang, their German traffic was going to the English version, and their French pages were barely getting any impressions. After deploying proper hreflang tags across all language versions, organic traffic to non-English pages increased by over 60% within three months because Google finally knew which version to serve where.

How Hreflang Works

Hreflang tags are placed in the <head> section of your HTML, in your XML sitemap, or in HTTP headers. Each tag specifies a language code (and optionally a country code) along with the URL for that version. Every page must reference all its language variations, including itself.

Here is an example for a page available in English, Spanish, and French:

<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

The x-default tag is a fallback that tells Google which page to show when no specific language match exists. Language codes follow the ISO 639-1 standard (en, es, fr), and country codes follow ISO 3166-1 Alpha 2 (en-US, en-GB, pt-BR). Hreflang tags must be reciprocal, meaning if Page A points to Page B, Page B must also point back to Page A.

How to Improve Hreflang on Your Site

  1. Implement hreflang on every multilingual page - Every page that has a translation must include hreflang tags pointing to all language versions. Missing any version breaks the chain and can cause Google to ignore the tags entirely.

  • Always include x-default - The x-default tag serves as a catch-all for users who do not match any of your specified languages or regions. Point it to your primary language version or a language selector page.

  • Validate with Ahrefs or Screaming Frog - Both tools can crawl your site and detect hreflang errors like missing return tags, incorrect language codes, or tags pointing to non-indexable pages. Run this validation after every deployment.

  • Use consistent URL patterns - Organize your multilingual URLs in a clear structure like subdirectories (/es/, /fr/) or subdomains (es.example.com). Keep the structure consistent across all language versions.

  • Place hreflang in your XML sitemap for large sites - If you have hundreds of pages in multiple languages, managing hreflang in HTML heads becomes unwieldy. Moving them to your XML sitemap keeps your HTML clean and makes bulk management easier.

  • Common Mistakes to Avoid

    • Missing return tags: This is the most common hreflang error. If your English page points to your Spanish page, the Spanish page must point back to the English page. One-directional tags are ignored by Google.

    • Using wrong language codes: Use ISO 639-1 codes, not full language names. It is es for Spanish, not spanish. For regional variants, use the format en-US or pt-BR. The code en-uk is wrong because the country code for the United Kingdom is GB.

    • Pointing hreflang to non-canonical URLs: Every URL referenced in hreflang tags should be the canonical version of that page. If the hreflang URL redirects or has a different canonical tag, Google will likely ignore the hreflang signal.

    Key Takeaways

    • Hreflang tells search engines which language/regional version of a page to show to users in different locations.
    • Tags must be reciprocal. Every language version must reference all other versions and itself.
    • Always include an x-default fallback for users who do not match any of your targeted languages.
    • Validate your hreflang implementation regularly because a single broken tag can undermine the entire setup.

    What Google Actually Says

    Google Search Central documents three equivalent ways to declare localized versions of a page, and confirms there is no ranking benefit to using more than one method at a time:

    1. HTML <link> elements in the page <head>
    2. HTTP Link headers in the response (useful for non-HTML files such as PDFs)
    3. An XML sitemap with xhtml:link entries

    Three rules from Google's documentation are non-negotiable:

    • Bidirectional linking is mandatory. Each language version must list itself as well as every other language version. In Google's own words, if two pages do not both point to each other, the tags are ignored.
    • URLs must be fully qualified. Alternate URLs must include the transport method, so https://example.com/foo is valid but //example.com/foo and /foo are not.
    • Hreflang is a hint, not a language detector. Google does not use hreflang or the HTML lang attribute to detect the language of a page. It detects language algorithmically from the visible content, then uses hreflang to choose which already-indexed version to surface for a given user.

    The language value follows the BCP 47 pattern. The first subtag is an ISO 639-1 language code (for example de), optionally followed by a dash and an ISO 3166-1 Alpha 2 region code (for example de-CH). Script subtags such as zh-Hans are also supported. The reserved value x-default marks the fallback page for users whose language or region settings do not match any of your localized versions.

    In Practice

    A common live failure is the missing return tag. Suppose your German page only lists itself and the x-default, while your English page lists all three versions. Google sees a one-way relationship and discards both tags, so the cluster behaves as if you have no hreflang at all.

    Before, on https://example.com/de/pricing (broken, only references itself):

    <link rel="alternate" hreflang="de" href="https://example.com/de/pricing" />
    <link rel="alternate" hreflang="x-default" href="https://example.com/pricing" />
    

    After, on https://example.com/de/pricing (every version listed, including itself, all fully qualified):

    <link rel="alternate" hreflang="en" href="https://example.com/pricing" />
    <link rel="alternate" hreflang="de" href="https://example.com/de/pricing" />
    <link rel="alternate" hreflang="es" href="https://example.com/es/pricing" />
    <link rel="alternate" hreflang="x-default" href="https://example.com/pricing" />
    

    The identical block must appear on the English page and the Spanish page as well, each referencing all four entries. That mutual reciprocity is what turns the tags into a valid cluster Google will honor.

    For non-HTML resources where you cannot inject a <link> element, the same relationship is declared with an HTTP header on a GET response:

    Link: <https://example.com/pricing>; rel="alternate"; hreflang="en",
          <https://example.com/de/pricing>; rel="alternate"; hreflang="de",
          <https://example.com/es/pricing>; rel="alternate"; hreflang="es"
    

    Sources