Hreflang HTML Examples for Every Scenario

Hreflang syntax is always the same -- it's the URL structures that vary. Here are working examples for every common setup, ready to adapt.

Every <link rel="alternate" hreflang="..."> tag goes in the <head> of your HTML. Every page in the cluster must include the full set of alternates, including a tag pointing back to itself.

1. Basic Two-Language Site

The simplest case: English and French, same domain, language in the URL path.

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

The x-default tag points to the fallback page -- usually your English version -- for users who don't match any specific locale.

2. Language + Region Variants

When you have the same language targeting different countries, you need region-specific codes.

<link rel="alternate" hreflang="en-us" href="https://example.com/us/about/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/gb/about/" />
<link rel="alternate" hreflang="en-au" href="https://example.com/au/about/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/us/about/" />

Language codes are ISO 639-1 (lowercase), region codes are ISO 3166-1 alpha-2 (uppercase). So en-GB, not en-gb or en-UK.

Mix language-only and language+region

You can combine hreflang="en" (all English speakers) with hreflang="en-gb" (British English specifically). Google will serve the more specific match where available.

3. Subdirectory Structure

The most common modern setup -- language code as the first path segment.

<!-- On https://example.com/en/contact/ -->
<link rel="canonical" href="https://example.com/en/contact/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/contact/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/kontakt/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/contacto/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/contact/" />

Note that the canonical is self-referencing. This is required -- each page is authoritative for its own locale.

Generate this markup automatically

Enter your URLs and get the complete hreflang tag set for every page.

4. Subdomain Structure

Language subdomains are fully supported. The markup is identical -- only the URLs change.

<!-- On https://en.example.com/about/ -->
<link rel="canonical" href="https://en.example.com/about/" />
<link rel="alternate" hreflang="en" href="https://en.example.com/about/" />
<link rel="alternate" hreflang="fr" href="https://fr.example.com/about/" />
<link rel="alternate" hreflang="de" href="https://de.example.com/about/" />
<link rel="alternate" hreflang="x-default" href="https://en.example.com/about/" />

All subdomains are treated as the same site by Google for hreflang purposes. This is simpler than it used to be -- no additional verification needed.

5. Separate Country Domains (ccTLDs)

Country-code top-level domains send the strongest geographic signal. The hreflang markup looks the same.

<!-- On https://example.com/about/ (English/international) -->
<link rel="canonical" href="https://example.com/about/" />
<link rel="alternate" hreflang="en" href="https://example.com/about/" />
<link rel="alternate" hreflang="fr" href="https://example.fr/about/" />
<link rel="alternate" hreflang="de" href="https://example.de/about/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about/" />

Every domain must be verified in Google Search Console separately, and each domain must include the full set of alternates pointing to all other domains.

6. X-Default Only (No Matching Locale)

If you have a language selector page or a generic homepage that redirects based on user preference, use x-default as the only hreflang value on that page.

<!-- On a language selector page -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />

This tells Google the root URL isn't targeting any specific language -- it's the fallback entry point.

7. XML Sitemap Format

If you prefer to manage hreflang in your sitemap rather than in HTML, use the xhtml:link element.

<?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/about/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about/"/>
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/about/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/about/"/>
  </url>
  <url>
    <loc>https://example.com/fr/about/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about/"/>
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/about/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/about/"/>
  </url>
</urlset>

Each URL entry must include the full set of xhtml:link alternates. Don't mix HTML and sitemap hreflang for the same pages -- pick one method and use it consistently.

Missing return links

Every page in the alternate set must link back to every other page -- including itself. If your French page doesn't include the full set of alternates pointing back to your English page (and itself), Google may ignore the entire cluster.

Part of Boring Tools -- boring tools for boring jobs.

Generate perfect hreflang tags

Create and validate hreflang markup for your multilingual site. Free.