What is 'hreflang' and how to use it
When building a website or web application, it's essential to define the language of each page to ensure proper indexing and visibility in search engines. While you might be familiar with the <lang> attribute in HTML, there is another important attribute that serves a different, but equally vital, SEO purpose: hreflang.
Let's explore what hreflang is, how it works, and how to implement it correctly.
What is hreflang?
The hreflang attribute is used to tell search engines which language and optionally which region a specific page is targeting. It helps Google and other search engines serve the correct language or regional version of your content to users in different locations.
Unlike the <lang> attribute, which identifies the language of the page content, hreflang acts as a mapping tool: it tells Google about alternate versions of the same content in other languages or for other regions.
A typical hreflang value includes:
- Language code: A two-letter code representing the language (e.g., "en" for English, "es" for Spanish in ISO 639-1 format).
- Region code (optional): A two-letter code representing the country or region (e.g., "US" for the United States, "ES" for Spain, "CL" for Chile in ISO 3166 format).
Format: hreflang="language-region" (e.g., en-US, es-ES)
Check out or blog post on differences between language and locale for more details.
Where to use hreflang?
You can specify hreflang in three places:
- In the
<head>section of your HTML document using
<link rel="alternate" hreflang="..." href="...">tags - In HTTP headers (for non-HTML resources like PDFs)
- In XML sitemaps
Using all three methods is allowed, but not required. Choosing just one is sufficient, and combining them does not provide extra benefit.
Most common method: in the HTML <head>
<head>
<link rel="alternate" hreflang="en" href="https://simplelocalize.com/" />
<link rel="alternate" hreflang="es-ES" href="https://simplelocalize.com/es-ES/" />
<link rel="alternate" hreflang="es-CL" href="https://simplelocalize.com/es-CL/" />
</head>
Each page should reference all alternate versions, including itself. This is known as bidirectional linking: if Page A references Page B with hreflang, Page B must also reference Page A.
You can use tools like the W3C Link Checker to validate URLs and ensure they are correct.
Why hreflang is important
Correct hreflang implementation helps:
- Serve the right content to users based on their language and region
- Improve SEO by avoiding duplicate content issues
- Enhance user experience by directing users to the appropriate version of your site
- Increase visibility in search results for different languages and regions
Search engines treat hreflang as a strong signal when determining which page to display in localized search results. Without it, your Spanish-speaking visitors in Chile might end up on your English homepage which is not ideal for engagement or conversions.
Best practices for hreflang implementation
Here are some best practices to follow when implementing hreflang:
- Each language/region version must list all other versions, including itself
- Use valid language and region codes
- Insert the tags in the
<head>before scripts - Use hreflang generators or SEO tools for accuracy
- Include an
x-defaulttag to handle unmatched languages
The x-default value is recommended by Google as a fallback when no specific language or region matches the user's preferences.
<link rel="alternate" hreflang="x-default" href="https://simplelocalize.com/" />
Example of a subpage with hreflang
Here is an example of how to implement hreflang for a contact page that is available in multiple languages:
<head>
<link rel="alternate" hreflang="en" href="https://simplelocalize.com/contact" />
<link rel="alternate" hreflang="es-ES" href="https://simplelocalize.com/es-ES/contacto" />
<link rel="alternate" hreflang="es-CL" href="https://simplelocalize.com/es-CL/contacto" />
</head>
It shows the contact page in English, Spanish (Spain), and Spanish (Chile). Each version is linked to its corresponding URL, allowing search engines to understand the language and regional targeting of each page.
Note that in the URL the language and region are included as subdirectories (e.g., /es-ES/ for Spanish in Spain). This is a common practice, but you can also use subdomains or ccTLDs (country code top-level domains) if preferred.
Check out our blog post on URL structure for multilingual websites for more details.
rel="alternate" vs. rel="canonical"
When using hreflang, you will often encounter two other attributes: rel="alternate" and rel="canonical".
rel="alternate"tells search engines that the page is an alternate version in a different language or format (like mobile).rel="canonical"indicates the preferred version of a page when there are multiple pages with similar content.
These two can coexist, but make sure your canonical URL is consistent across versions and does not conflict with the alternate links.
Example:
<head>
<link rel="canonical" href="https://simplelocalize.com/" />
<link rel="alternate" hreflang="es-ES" href="https://simplelocalize.com/es-ES/" />
<link rel="alternate" hreflang="es-CL" href="https://simplelocalize.com/es-CL/" />
</head>
FAQ
Do I need hreflang if my website targets only one language?
No. If your site is built for a single language or region, hreflang is not necessary. Use the correct
<html lang="..."> attribute instead.
What about country-specific domains like .it or .fr?
Search engines will assume a country focus based on the top-level domain (TLD), so if you are targeting another audience (e.g., English users on a .it domain), it's best to use hreflang to clarify your intent.
Can I use hreflang without translating the page?
Technically yes, but it's not recommended. Hreflang is intended to distinguish content that is either translated or localized. If all versions are in the same language with no regional customization, hreflang may confuse search engines rather than help.
What happens if hreflang tags are incorrect or missing?
Google may ignore them entirely. If you use invalid language/region codes, mismatched links, or unidirectional references (Page A points to B, but B doesn't point back), the tags won't be used. This could lead to the wrong version showing up in search results or no regional targeting at all.
Is it okay to have multiple hreflang tags with the same language code?
Only if the region codes are different. For example, having both es-ES and es-CL is valid because they represent different Spanish-speaking audiences. But using multiple hreflang="es" tags with different URLs is invalid.
Should I use hreflang on every page or just the homepage?
You should add hreflang tags on every localized version of every page, not just the homepage. Each translated page must reference all other language versions of that same page, not just the domain root.
Can hreflang be used with JavaScript-rendered websites?
Yes, but with caution. If you are injecting hreflang tags with JavaScript, make sure they are rendered before search engine crawlers parse the page. For best results, include them server-side in the static <head> section.
Does hreflang influence rankings?
Indirectly. Hreflang doesn't boost rankings like backlinks do, but it improves relevance, which can reduce bounce rates and increase engagement. That in turn supports better performance in search results.
What's the difference between localization and translation in this context?
Translation is simply converting content from one language to another. Localization goes further: adapting content, tone, currency, date formats, and cultural references for a specific region. Hreflang supports both. Learn more about software localization in our blog.
Conclusion
Adding hreflang helps localize your website content and ensures that search engines show users the most relevant version of your site. It enhances SEO, user experience, and can reduce bounce rates by serving content in the visitor's preferred language.
SimpleLocalize can help you manage translations and localization smoothly. Start with our free trial today and optimize your multilingual experience with ease!
