Multilingual SEO Done Right: The Complete Guide to hreflang Tags

Hi everyone, this is Neo.

When you run an independent site - especially one targeting a global market - you’ll hit the same question over and over: how do you let Google know your website has multiple language versions, and how do you make sure it sends each user to the right language page?

A lot of people will say, “Isn’t that simple? Users will pick the language themselves.” Sure, that’s true up to a point. But from an SEO standpoint, if you don’t handle this properly, you’ll lose traffic at best - and at worst, Google will flag your site for duplicate content and drag down your whole domain’s authority.

I stepped on plenty of landmines when I first started building multilingual sites. For example, I assumed that just translating my website into different languages would be enough - only to find my Google indexing and rankings in total chaos. After a lot of research and trial and error, I realized that one small hreflang tag is the key to solving the whole problem.

So today, I want to share what I’ve learned the hard way about the tags that matter for multilingual websites - especially hreflang - so you can go global with more confidence.

What Is the hreflang Tag and Why Is It So Important?

hreflang is an HTML attribute that tells search engines: “Hey, this page has other versions in different languages or regions. The content is similar, but it’s aimed at different users.”

For example, say you have a “running shoes” product page in English, French, and Spanish. With hreflang tags, you can tell Google:

  • This page is the English version.
  • There’s also a French version at this link.
  • And a Spanish version at that link.

So when a French user searches Google for “chaussures de course” (the French term for running shoes), Google is far more likely to show your French version instead of the English one. That’s a much better user experience - and it also stops search engines from treating your multilingual pages as duplicate content.

In short, the core value of the hreflang tag comes down to:

  1. Better user experience: users see content in the language they actually speak.
  2. No duplicate content penalties: you’re telling search engines these pages are language counterparts, not copies or duplicates.
  3. Better SEO: it helps search engines index and rank your multilingual content more effectively, which means more targeted traffic.

Three Ways to Implement hreflang Tags

There are three ways to deploy hreflang tags, and you can pick whichever fits your website best.

This is the most straightforward and most recommended approach. On every language version of a page, you add hreflang tags in the <head> that point to all the other language versions - including itself.

Real-world example:

Say your product page has three versions:

  • English: https://www.yourshop.com/en/running-shoes
  • French: https://www.yourshop.com/fr/running-shoes
  • German: https://www.yourshop.com/de/running-shoes

Then, in the <head> of the English page, you’d add the following code:

<link rel="alternate" href="https://www.yourshop.com/en/running-shoes" hreflang="en" />
<link rel="alternate" href="https://www.yourshop.com/fr/running-shoes" hreflang="fr" />
<link rel="alternate" href="https://www.yourshop.com/de/running-shoes" hreflang="de" />
<link rel="alternate" href="https://www.yourshop.com/en/running-shoes" hreflang="x-default" />

Note: the French and German pages need exactly the same block of code. Every page must include links to all versions, forming a complete loop.

Breaking down the code:

  • rel="alternate": indicates this is an alternate version of the page.
  • href="...": the full URL of the alternate version.
  • hreflang="...": specifies the language and region of the alternate version.
    • en: English
    • fr: French
    • de: German
    • en-US: American English
    • en-GB: British English
    • zh-Hans: Simplified Chinese
    • zh-Hant: Traditional Chinese

What is x-default?

hreflang="x-default" is a very important value. It designates a “default” page. When a user’s browser language or location doesn’t match any of the hreflang values you’ve set, search engines show them this x-default page. Usually, this is set to your English homepage or a language selection page.

2. Implementing via HTTP Headers

If your content isn’t an HTML page - say it’s a PDF product catalog - you can’t add tags in the <head>. In that case, you can configure HTTP headers on the server instead.

Example:

Link: <https://www.yourshop.com/docs/catalog_en.pdf>; rel="alternate"; hreflang="en",
      <https://www.yourshop.com/docs/catalog_fr.pdf>; rel="alternate"; hreflang="fr"

This approach requires server-level access, and for most independent site sellers it’s rarely needed - just good to know about.

3. Implementing via XML Sitemap

When your website has a huge number of pages, adding hreflang tags to every page by hand is a massive project. In that case, declaring them in your sitemap is the most efficient approach.

Example:

<?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://www.yourshop.com/en/running-shoes</loc>
    <xhtml:link
               rel="alternate"
               hreflang="fr"
               href="https://www.yourshop.com/fr/running-shoes" />
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.yourshop.com/de/running-shoes" />
  </url>
  <url>
    <loc>https://www.yourshop.com/fr/running-shoes</loc>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.yourshop.com/en/running-shoes" />
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.yourshop.com/de/running-shoes" />
  </url>
  <!-- declaration for the German version -->
</urlset>

This approach keeps all hreflang relationships in one file, making them easier to manage and maintain - especially for large, complex websites.

Beyond the core hreflang tag, there are a few other tags and settings that - while not directly used for language targeting - still help with user experience and SEO indirectly.

1. The lang Attribute

This is a basic HTML attribute that declares the language of the current page or a specific element.

Example:

<html lang="en">
...
<body>
  <p>This is an English paragraph.</p>
  <p lang="fr">Ceci est un paragraphe en français.</p>
</body>
</html>

The lang attribute is mainly for browsers and assistive tools (like screen readers), helping them render and pronounce content correctly. Google doesn’t rely on it primarily to determine page language, but setting lang correctly is a basic web development standard and it improves accessibility and user experience.

2. The Content-Language Meta Tag

This is a rather “ancient” tag that was once used to declare page language.

<meta http-equiv="Content-Language" content="en-US">

But heads up: Google has publicly stated it no longer uses this meta tag to determine page language. So if you see it on an old website, just note it. For new sites, you can safely ignore it and focus on getting hreflang right.

3. Clear URL Structure

It’s not technically a “tag,” but a logically clear URL structure is crucial for multilingual SEO. It lets users and search engines instantly understand how your site’s languages and regions are organized.

Recommended URL structures:

  • Subdirectories: yourshop.com/en/, yourshop.com/fr/ (my personal favorite - it keeps the most authority on your root domain)
  • Subdomains: en.yourshop.com, fr.yourshop.com
  • Country-code top-level domains (ccTLDs): yourshop.fr, yourshop.de (most expensive, but the strongest localization signal)

Which structure you choose depends on your business size and long-term plans, but whichever you pick, consistency and clarity are key.

Summary

Alright, that’s it for multilingual SEO tags today. Let’s recap the key points:

  • hreflang is the core: it’s the most critical tag for multilingual SEO, so make sure it’s deployed correctly.
  • Three implementation methods: HTML <head>, HTTP headers, and XML sitemap - choose whichever fits your needs.
  • x-default matters: don’t forget to set a default page to catch users who don’t match any specific language.
  • Keep your URL structure clear: a good URL structure is the foundation of successful multilingual SEO.

Multilingual SEO is a detail-oriented game, and hreflang setup is especially easy to get wrong. I hope today’s post helps you get your head around it and avoid the common pitfalls. If you run into any issues in practice, feel free to leave a comment and we can talk it through.

I’m Neo, and I’ll see you in the next one!