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. For a full explanation of how hreflang works and when to use it, see our comprehensive hreflang guide.

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 self-referencing 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. See the full hreflang language codes reference for a complete list.

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.

Try Hreflang Generator

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. You can confirm your subdomain DNS is resolving correctly with a DNS record checker.

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. For more on this approach, see the hreflang sitemaps guide.

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. See missing return links for how to diagnose and fix this.

References

Generate perfect hreflang tags

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