Running a multilingual or multi-regional website and finding that the wrong language version shows up in search results? The culprit is almost always a missing or misconfigured <link rel="alternate" hreflang="..."> tag.

The hreflang tag is the cornerstone of international SEO. When implemented correctly, it signals to Google which language or regional version of a page to serve each user — Japanese speakers see the Japanese version, American English speakers see the US version, and so on. It also prevents your translated pages from being treated as duplicate content. This guide covers everything from the basics to advanced implementation patterns, with copy-ready code examples. Once you understand the rules, use the hreflang generator to build your tag sets instantly.

What Is the hreflang Tag?

The hreflang tag is an HTML signal that tells Google (and Yandex) about the language and regional targeting of a page, and points to alternative versions of that page for other languages or regions. It was introduced by Google in 2011 and remains the primary mechanism for managing international search visibility.

When you need hreflang

  • Multiple language versions of the same content: English, Japanese, French, Spanish translations of the same page
  • Same language targeting different regions: English for the US, UK, Australia, and Canada with region-specific content
  • Country-specific sites: separate domains or subdirectories for different markets with localized pricing, shipping, or regulations

Problems hreflang solves

  • Prevents the wrong language version from ranking for users in a given locale
  • Reduces duplicate content signals across translated pages
  • Consolidates ranking signals to the correct URL for each language
  • Resolves "International Targeting" errors in Google Search Console

It is worth noting that hreflang is treated as a hint by Google, not a hard directive. Google may still choose a different URL if it determines a better match exists. That said, a correctly implemented hreflang setup dramatically improves accuracy and is essential for any site serving multiple languages or regions.

How to Write hreflang Tags

There are three ways to implement hreflang. Choose the method that best fits your site architecture.

Method 1: HTML <head> tags (most common)

Place <link> elements inside the <head> of each page. This is the most straightforward approach and works well for sites of any size as long as you can control the HTML template.

<!-- Place this block in the <head> of every language variant -->
<link rel="alternate" hreflang="en"        href="https://example.com/en/page">
<link rel="alternate" hreflang="en-US"     href="https://example.com/en-us/page">
<link rel="alternate" hreflang="en-GB"     href="https://example.com/en-gb/page">
<link rel="alternate" hreflang="ja"        href="https://example.com/ja/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">

Language codes follow the IETF BCP 47 standard: a two-letter ISO 639-1 language code, optionally followed by a hyphen and an ISO 3166-1 alpha-2 region code (e.g., en-US, zh-TW).

Method 2: XML sitemap (recommended for large sites)

For sites with hundreds or thousands of pages, managing hreflang in a sitemap is far more maintainable. Every URL in the set must appear as a <loc> entry, and each entry must reference all language variants.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/en/page</loc>
    <xhtml:link rel="alternate" hreflang="en"        href="https://example.com/en/page"/>
    <xhtml:link rel="alternate" hreflang="ja"        href="https://example.com/ja/page"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
  </url>
  <url>
    <loc>https://example.com/ja/page</loc>
    <xhtml:link rel="alternate" hreflang="en"        href="https://example.com/en/page"/>
    <xhtml:link rel="alternate" hreflang="ja"        href="https://example.com/ja/page"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
  </url>
</urlset>

Method 3: HTTP response headers (for non-HTML files)

For PDFs or other non-HTML resources, add hreflang information directly to the HTTP response header.

Link: <https://example.com/en/document.pdf>; rel="alternate"; hreflang="en",
      <https://example.com/ja/document.pdf>; rel="alternate"; hreflang="ja",
      <https://example.com/en/document.pdf>; rel="alternate"; hreflang="x-default"

Common language codes

  • en — English (any region)
  • en-US — English (United States)
  • en-GB — English (United Kingdom)
  • en-AU — English (Australia)
  • ja — Japanese
  • zh-CN — Chinese (Simplified)
  • zh-TW — Chinese (Traditional)
  • ko — Korean
  • fr — French
  • de — German
  • es — Spanish

How to Use x-default

hreflang="x-default" is a special value that designates the fallback page for users whose language or region does not match any of the other hreflang values in your set. Google introduced this in 2013.

When to use x-default

  • You have a language selection landing page at the root of your domain
  • You want to route unmatched users to a neutral English version
  • You run a geo-restricted service and want to show an explanatory page to visitors from unsupported regions
  • Your site does not cover every language or country in the world

x-default pointing to an existing language version

The most common pattern is to point x-default at your primary or most widely understood language, usually English.

<!-- English is the default for unmatched users -->
<link rel="alternate" hreflang="en"        href="https://example.com/en/about">
<link rel="alternate" hreflang="ja"        href="https://example.com/ja/about">
<link rel="alternate" hreflang="fr"        href="https://example.com/fr/about">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about">

x-default pointing to a language selector page

<!-- Root language-selector page is the default -->
<link rel="alternate" hreflang="en"        href="https://example.com/en/">
<link rel="alternate" hreflang="ja"        href="https://example.com/ja/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Key rule: the URL you assign to x-default must be a real, indexable page. If it returns a 404 or is blocked by robots.txt, Google will report an error in Search Console.

Common hreflang Mistakes and How to Fix Them

hreflang is one of the most error-prone areas of technical SEO. Here are the mistakes that appear most often in Google Search Console audits, along with how to correct them.

Mistake 1: Missing return tags (the most common error)

Every page in an hreflang set must link back to all other pages in the set. If page A references page B, page B must also reference page A. A one-way reference is ignored by Google.

  • Wrong: the English page has hreflang tags; the Japanese page does not
  • Correct: both pages contain an identical set of hreflang annotations covering all language variants

Mistake 2: Invalid language codes

Only IETF BCP 47 language tags are accepted. Common invalid formats include:

  • Wrong: hreflang="english", hreflang="JP", hreflang="japanese"
  • Correct: hreflang="en", hreflang="ja" (lowercase ISO 639-1)
  • Wrong: hreflang="zh" when targeting a specific script variant
  • Correct: hreflang="zh-CN" (Simplified) or hreflang="zh-TW" (Traditional)

Mistake 3: Using relative URLs

The href attribute in hreflang annotations must always be an absolute URL.

  • Wrong: href="/en/page"
  • Correct: href="https://example.com/en/page"

Mistake 4: Omitting x-default

While not technically required, omitting x-default means Google has no guidance for users whose language falls outside your defined set. Add it pointing to your most universally accessible page.

Mistake 5: Pointing to redirected URLs

Always use the final canonical URL in hreflang annotations. If the URL you specify redirects to another URL, Google may not follow it correctly, leading to unresolved annotations.

Mistake 6: Forgetting to update after URL changes

When you restructure URLs, rename pages, or delete content, every hreflang reference to the old URL across all language variants must be updated. Stale references result in 404 errors reported in Search Console.

Setting Up hreflang in WordPress, Next.js, and Astro

Here is how to implement hreflang in the most popular CMS and framework environments.

WordPress

The easiest path is to use an SEO plugin combined with a multilingual plugin.

  • Yoast SEO + WPML: when both are active, Yoast automatically outputs hreflang tags for all language versions managed by WPML. Enable the Yoast hreflang output option in the plugin settings.
  • Rank Math + Polylang: Rank Math natively supports Polylang and outputs hreflang tags without additional configuration.
  • Manual via functions.php: hook into wp_head and echo the link tags. Useful for simple setups, but requires manual maintenance as pages are added.

Next.js

Next.js App Router has built-in support for alternate language links via the alternates metadata field.

// App Router: app/[lang]/page.tsx
export async function generateMetadata({ params }) {
  return {
    alternates: {
      languages: {
        'en': '/en/page',
        'ja': '/ja/page',
        'x-default': '/en/page',
      },
    },
  };
}
// Pages Router: pages/[lang]/page.tsx
import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <link rel="alternate" hreflang="en" href="https://example.com/en/page" />
      <link rel="alternate" hreflang="ja" href="https://example.com/ja/page" />
      <link rel="alternate" hreflang="x-default" href="https://example.com/en/page" />
    </Head>
  );
}

Astro

In Astro, you can either write the link tags directly in the layout component's <head> slot or generate them programmatically from your i18n routing configuration.

---
// src/pages/en/page.astro
const alternates = [
  { hreflang: 'en', href: 'https://example.com/en/page' },
  { hreflang: 'ja', href: 'https://example.com/ja/page' },
  { hreflang: 'x-default', href: 'https://example.com/en/page' },
];
---
<head>
  {alternates.map(({ hreflang, href }) => (
    <link rel="alternate" {hreflang} {href} />
  ))}
</head>

After setting up hreflang in any platform, validate your implementation with the hreflang generator to check that the tag set is complete and correctly formatted.

Frequently Asked Questions

Q. Does hreflang work in Bing?
Bing does not fully support hreflang the way Google does. For Bing, international targeting is better handled through the Content-Language HTTP response header and geo-targeting settings in Bing Webmaster Tools. Adding hreflang does not hurt your Bing performance, so there is no reason to remove it — just do not rely on it exclusively for Bing traffic.
Q. Can I use hreflang and canonical together on the same page?
Yes, and you should. The canonical tag tells Google which URL is the authoritative version of a page; hreflang tells Google which language alternatives exist for that canonical URL. Make sure the URL in your rel="canonical" tag matches the URL used in the hreflang annotation for that page. Conflicts between the two will confuse Google's crawlers and may result in the wrong page being served to users.
Q. Should I use subdomains or subdirectories for multilingual URLs?
Subdirectories (example.com/en/) are generally recommended because they consolidate domain authority and are simpler to manage. Subdomains (en.example.com) are treated more like separate sites by Google, which can dilute domain strength. Either structure works with hreflang, but subdirectories are the safer choice for new builds. Separate country-code top-level domains (example.co.uk) are an option for maximum geo-targeting signal but require independent SEO effort for each domain.
Q. Should I add hreflang to pages that are only partially translated?
Only add hreflang to pages with translations that are high enough quality to genuinely serve users in that language. Machine-translated content without human review can be flagged as low quality and may hurt the ranking of the page you are annotating. For partially translated or machine-only pages, consider adding <meta name="robots" content="noindex"> until the content meets your quality bar.
Q. How do I know if my hreflang is working correctly?
Check the "International Targeting" report in Google Search Console under the "Legacy tools" section. It lists hreflang errors such as missing return tags, invalid language codes, and unresolvable URLs. You can also inspect the HTML source of each page to verify the tag set is present and correct. Allow a few weeks after implementation for Google to recrawl all affected pages before expecting changes in search results.

Summary

Implementing hreflang correctly is one of the highest-impact technical SEO tasks for any multilingual website. Here is a quick recap of what we covered.

  • What it does: tells Google the language and regional targeting of each page, and points to equivalent versions in other languages
  • Three implementation methods: HTML <head> tags, XML sitemap annotations, or HTTP response headers — choose based on site size and architecture
  • x-default: always include a fallback URL for users whose language is not covered by your other hreflang values
  • Critical rules: use absolute URLs, valid BCP 47 language codes, and ensure every page in the set has return tags pointing back to all other variants
  • Common mistakes: missing reciprocal links, wrong language codes, relative URLs, and stale references after page restructuring

Use the free tools below to generate and validate your hreflang implementation.

hreflang Generator — build a complete, valid hreflang tag set instantly Meta Tag Generator — generate title, description, and OGP tags together Canonical Tag Generator — create correct canonical link tags