Hreflang tags are HTML elements that guide search engines to serve appropriate language or regional versions of content to users based on their location and preferences. The importance of Hreflag tags lies in preventing duplicate content issues, consolidating ranking signals across versions, and improving user experience by directing visitors to content in their preferred language.
Proper hreflang attribute implementation requires adding tags to HTML heads, HTTP headers, or XML sitemaps with correct language codes following International Organization for Standardization (ISO) standards and ensuring bidirectional linking between all versions. Common hreflang implementation mistakes include using incorrect language codes, missing regional variations, omitting general language tags, and improper x-default implementation.
Hreflang tag best practices include using self-referential and bidirectional references, absolute URLs, ensuring content matches language declarations, maintaining consistent URL structures, regular validation, implementing across all pages, and integrating with other international SEO tactics.
What Are Hreflang Tags?
Hreflang tags are HTML tags that show search engines different versions of the same content based on language or region. Hreflang tags must appear for each language or regional variant the content has.
The main purpose of hreflang tags is to guide search engines in delivering the most appropriate language or regional version of a webpage to users. Hreflang tags improve content targeting. For instance, adding hreflang annotations to English and French versions of a product page ensures users in Canada see the correct language based on their browser settings. This precision reduces bounce rates and prevents duplicate content conflicts between similar regional pages.
Hreflang tags are used when these three conditions apply. The three conditions are listed below.
- The content exists in more than one language.
- The content targets more than one country.
- The URL differs by language or country.
What Does the Hreflang Tag Look Like?
The basic syntax of an hreflang tag looks like this.
<link rel="alternate" hreflang="[language code]-[country code]" href="[URL]">
The tag contains the three components listed below.
- The rel=”alternate” attribute indicating an alternative version exists
- The hreflang attribute specifying language and optional country code
- The href attribute containing the full URL of the alternate version
This is an example of an hreflang attribute for English-speaking users in Canada.
<link rel="alternate" hreflang="en-ca" href="https://example.com/ca-en/page">
And this is an example of an hreflang attribute for French-speaking users in Canada.
<link rel="alternate" hreflang="fr-ca" href="https://example.com/ca-fr/page">
Crawlers serve the English version to English-speaking Canadians and the French version to French-speaking Canadians when these tags are implemented correctly on your pages.
What Is the Importance of Hreflang for SEO?
The Importance of hreflang for SEO lies in it preventing duplicate content issues, improving user experience, and helping Google rank the right page for the right audience.
Search engines use hreflang to understand language and regional targeting. Hreflang tags show which version of a page matches a user’s language and location. This reduces bounce rates and raises engagement. Search engines also avoid penalizing identical or similar content across international URLs.
Without hreflang, Google might serve the wrong language or region page. This weakens relevance, lowers rankings, and confuses users. Hreflang increases visibility in local SERPs and supports better indexing across global markets.
For example, hreflang tells Google to show the French version of a product page to users in Paris instead of the English version. The correct language version improves user experience and SEO.
How Do Hreflang Tags Work?
Search engines first decide whether they want to rank the URL. Crawlers then check the URL and find any hreflang annotations which exist. Google next selects the correct URL variant which matches the content with the language and region.
Searchers use device settings and location. These inputs define the correct version. The system uses these signals. It matches the audience with the proper language version.
However, Google selects the “x-default” page version when the browser shows no language or country data.
How Do Different Search Engines Handle Hreflang Tags?
Different search engines handle hreflang tags in different ways. We explain the differences between Google, Yandex, Bing, and Baidu and their treatments of hreflang tags below.
Google fully supports hreflang tags. Google uses hreflang tags to understand which version of a page to show based on user language preferences and geographic location. Hreflang implementation happens in 3 ways. The 3 ways are listed below.
- HTML <head> section
- HTTP headers
- XML sitemap
Google treats hreflang as a canonicalization signal. This means Google consolidates ranking signals between versions.
Yandex
Yandex supports hreflang tags. Yandex uses them to match search results to user language and region. The implementation works well for Russian-speaking regions with overlapping language preferences. Yandex expects hreflang in the HTML of the page.
Bing
Bing does not prioritize hreflang strongly. Bing relies more on these signals:
- Content-Language HTTP header
- HTML lang attribute
- Inbound links
- User location signals
Bing recommends using hreflang for multilingual sites. Bing treats it as a weak signal. Bing considers other geotargeting cues more important.
Baidu
Baidu does not support hreflang tags. Baidu uses the Content-Language meta tag and user behavior to determine language targeting. Baidu focuses on these factors:
- On-page signals
- Domain structure (subdomains or ccTLDs)
Implementation remains best practice for multilingual or multi-regional websites. This applies especially for Google and Yandex. Strong language signals matter for Bing and Baidu.
How to Implement Hreflang Tags
To implement hreflang tags, you need backend work. Crawlers ignore the directive if the setup includes improper language codes. We show how to implement hreflang tags correctly below.
There are three ways to implement the hreflang attribute. The three ways are listed below.
- HTML tags
- HTTP headers
- Sitemaps
HTML Tags
Hreflang tags are placed in the <head> section of your HTML document. The basic syntax is explained below.
<link rel="alternate" hreflang="language_code" href="URL" />
Each page should have a set of hreflang tags pointing to all language versions, including itself. There are five rules for implementing hreflang tags. They are listed below.
- Use correct language codes. Use ISO 639-1 for language codes (like “en” for English) and optionally ISO 3166-1 Alpha 2 for country codes (like “en-US” for US English).
- Include all language versions. Each page must include hreflang tags for ALL language versions, including a self-referencing tag.
- Reciprocal linking. If page A links to page B with a hreflang tag, page B must link back to page A with a corresponding hreflang tag.
- Use absolute URLs. Always use full, absolute URLs in the href attribute.
- Add an x-default tag. Include a tag with hreflang=”x-default” to indicate the default page users should see when no language version matches their preferences.
Here’s how to implement hreflang tags for a website with English, Spanish, and German versions.
<head>
<!-- Other head elements like title, meta tags, etc. -->
<!-- Hreflang tags -->
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>
For regional variations of a language, you would use the pattern written below.
<link rel="alternate" hreflang="en-us" href="https://example.com/en-us/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/" />
Remember that these tags must be present on ALL language versions of your site, with each page properly linking to all alternatives.
HTTP Headers
It is also possible to implement hreflang tags through HTTP headers. This approach is especially useful for non-HTML files like PDFs or images that need language targeting.
When using HTTP headers, hreflang is implemented using the Link header. The basic syntax is shown below.
Link: <URL>; rel="alternate"; hreflang="language_code"
Multiple Link headers can be added for each language version.
There are five rules for implementing hreflang through http headers. The five rules are written below.
- Use correct language codes. As with HTML implementation, use ISO 639-1 for language codes (like “en” for English) and optionally ISO 3166-1 Alpha 2 for country codes (like “en-US” for US English).
- Include all language versions. Each page must have Link headers for ALL language versions, including a self-referencing header.
- Reciprocal linking. If page A references page B with a Link header, page B must reference page A with a corresponding Link header.
- Use absolute URLs. Always use full, absolute URLs in the Link header.
- Add an x-default header. Include a header with hreflang=”x-default” to indicate the default page users should see when no language version matches their preferences.
Here’s how to implement hreflang tags using HTTP headers for a website with English, Spanish, and German versions.
Link: <https://example.com/en/>; rel="alternate"; hreflang="en"
Link: <https://example.com/es/>; rel="alternate"; hreflang="es"
Link: <https://example.com/de/>; rel="alternate"; hreflang="de"
Link: <https://example.com/>; rel="alternate"; hreflang="x-default"
The rules for adding regional variations of a language are written below.
Link: <https://example.com/en-us/>; rel="alternate"; hreflang="en-us"
Link: <https://example.com/en-gb/>; rel="alternate"; hreflang="en-gb"
XML Sitemaps
Implementing hreflang tags in XML sitemaps is another effective method, especially for larger websites. This approach allows you to provide language information to search engines directly through your sitemap.
This sitemap approach is particularly valuable for large websites where maintaining HTML hreflang tags across all pages is more challenging.
In XML sitemaps, hreflang is implemented using the <xhtml:link> element within each <url> entry. The basic structure is shown below.
xml
<?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>URL of this page</loc>
<xhtml:link
rel="alternate"
hreflang="language_code"
href="URL of language version" />
<!-- Additional xhtml:link elements for other language versions -->
</url>
</urlset>
There are five rules to follow when implementing hreflang tags through XML sitemaps. The rules are listed below.
- Use correct language codes. Use ISO 639-1 for language codes (like “en” for English) and optionally ISO 3166-1 Alpha 2 for country codes (like “en-US” for US English).
- Include all language versions. Each URL entry must include <xhtml:link> elements for ALL language versions of that page, including a self-referencing link.
- Reciprocal linking. Ensure that each language version properly references all other versions.
- Use absolute URLs. Always use full, absolute URLs in the href attribute.
- Add an x-default version. Include a link with hreflang=”x-default” to indicate the default page users should see when no language version matches their preferences.
A complete example of how to implement hreflang tags in an XML sitemap for a website with English, Spanish, and German versions is written below.
<?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">
<!-- Homepage in English -->
<url>
<loc>https://example.com/en/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<!-- Homepage in Spanish -->
<url>
<loc>https://example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<!-- Homepage in German -->
<url>
<loc>https://example.com/de/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<!-- Default Homepage -->
<url>
<loc>https://example.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>
<!-- Example of a product page with regional variations -->
<url>
<loc>https://example.com/en-us/product1/</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="https://example.com/en-us/product1/" />
<xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/product1/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/product1/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/product1/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/product1/" />
</url>
<!-- Continue with all pages on your site -->
</urlset>
What Are the 4 Common Hreflang Implementation Mistakes?
Implementing hreflang tags properly proves challenging for many website owners. This guide identifies 4 common mistakes to avoid. Understanding these points ensures your multilingual and multi-regional SEO strategy works correctly, delivering the right content to the right users while maintaining search engine visibility.
1. Incorrect Codes
Using the wrong ISO code confuses search engines and affects rankings. Double-check codes before applying them across your site.
2. Missing Region Variations
Specify regional versions if a language targets multiple countries. Use hreflang=”fr-fr” for France and hreflang=”fr-ca” for Canada instead of a generic hreflang=”fr”.
3. Not Including a General Hreflang Tag
Include a broad language tag to capture global users if a language has multiple regional versions.
Use code written below if your page targets Portuguese speakers in Portugal and Brazil.
<link rel="alternate" hreflang="pt-pt" href="http://example.com" />
<link rel="alternate" hreflang="pt-br" href="http://example.com" />
To reach Portuguese speakers worldwide, add the code tag below.
<link rel="alternate" hreflang="pt" href="http://example.com" />
Using the correct ISO codes ensures hreflang implementation works effectively, which helps search engines serve the right content to the right audience.
4. Improper x-default Implementation
Use x-default when a page does not target a specific language or region. This is ideal foruse cases listed below.
- Language selection pages: x-default signals that no single language version should be prioritized if your website prompts users to choose a language.
- Global homepages: x-default helps search engines understand that it serves a broad audience if your homepage automatically redirects users based on location or preferences.
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
This tells search engines that the page is not tied to a specific language or country but instead serves as a starting point for multiple versions.
Correct hreflang implementation strengthens geotargeting and improves search accuracy, which ensures users find content in their preferred language.
What Are 9 Hreflang Tags Best Practices?
This guide presents nine essential practices for effective hreflang implementation. The 9 Hreflang tags best practices are listed below.
1. Use Self-Referential Hreflang Tags
Add a hreflang tag on each page that points back to itself, not just to other language or regional versions.
Search engines expect every version of a page to include a full list of all alternates, including itself. This helps confirm that the hreflang setup is complete and correct.
For example, if you have an English and a Spanish version of a page, then the English page needs to include both tags (one for English, one for Spanish), and the Spanish page needs to do the same.
The hreflang attributes for the example English page are shown below.
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/product" />
<link rel="alternate" hreflang="es" href="https://yoursite.com/es/product" />
The hreflang attributes for the example Spanish page are shown below.
<link rel="alternate" hreflang="es" href="https://yoursite.com/es/product" />
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/product" />
Without the self-referencing tag, search engines potentially treat the hreflang setup as incomplete or invalid.
2. Implement Bidirectional Hreflang References
Create bidirectional references between all language versions. Each version of your site must link to all other language or regional versions, including itself.
This two-way linking helps search engines confirm the relationship through hreflang tags. All pages must include these tags to ensure search engines recognize the connection and trust only your pages as valid alternates.
Search engines often ignore the hreflang attributes If the links are not reciprocal,
For example, both the French and Spanish pages should include the tags below.
<link rel="alternate" hreflang="fr" href="https://yoursite.com/fr/product-page" />
<link rel="alternate" hreflang="es" href="https://yoursite.com/es/product-page" />
3. Use Absolute URLs
Use absolute URLs in all hreflang references. Search engines require complete URLs to properly understand the relationship between pages.
Absolute URLs are full web addresses that include everything needed to locate a page on the internet. They contain the protocol (like https://), the domain name, and the complete path to the page.
An example of an absolute URL is shown below.
https://example.com/en/product
The absolute or full URL contains all three elements below.
- https:// → the protocol
- example.com → the domain name
- /en/product → the full path to the page
In contrast, a relative URL only shows the path, without the protocol or domain.
An example of a relative URL is /en/product.
Relative URLs rely on the browser to figure out the domain based on the current page, which doesn’t work for hreflang. Search engines need the full (absolute) version to properly connect language or regional versions.
4. Ensure Content Matches Language Declaration
Make sure the language you declare in your hreflang tag matches the language used in the visible content of the page.
The content on a page with the hreflang tag hreflang=”es” must be fully written in Spanish. Mixing languages or displaying content in a different language than what’s declared confuses users and search engines. The consequence of mixing languages is search engines ignoring your hreflang tags.
5. Use Consistent URL Structures
Maintain consistent URL patterns across language versions. This creates a logical structure for both users and search engines.
Examples of consistent URL structures are listed below.
- Subdirectories. example.com/de/, example.com/ja/
- Subdomains. de.example.com, ja.example.com
- Country-specific domains. example.de, example.co.jp
6. Validate Hreflang Implementation
Check hreflang implementation regularly. Use tools like Google Search Console and Site Audit Tool to identify and fix hreflang errors.
Follow the steps below to check implementation.
1. Go to the OTTO&Audit Toolkit on the left.
2. Click on the Issues Tab.
3. Scroll down to the Hreflang button.
4. See and apply automatic suggestions.
Regular auditing of hreflang tags forms an essential part of ongoing technical SEO maintenance. This practice prevents language targeting errors that otherwise go undetected.
7. Choose One Primary Implementation Method
Use a single method to implement hreflang across your website. Options include HTML <head> tags, HTTP headers, or XML sitemaps. The method you choose should match your site’s structure and technical setup. Avoid mixing methods, because inconsistent implementation leads to errors and unreliable indexing. This practice prevents language targeting issues that otherwise go undetected and reduces maintenance complexity over time.
8. Implement Across All Pages
Apply hreflang attributes to every page across your site. A partial setup creates confusion for search engines and weakens the relationship between alternate versions. Ensure that each localized or regional version references all others, including itself. A consistent, sitewide implementation supports clear targeting, proper indexing, and smooth crawling.
9. Combine Hreflang with Other International SEO Practices
Use hreflang alongside broader international SEO strategies. Add accurate <html lang> attributes, choose country-specific top-level domains (TLDs) when needed, and consider hosting in or near your target region. These signals work together with hreflang to reinforce language and location targeting. A combined approach improves clarity for search engines and ensures more relevant visibility in global search results.
What is the Difference Between Lang And Hreflang?
The lang attribute declares the default language of the page’s visible content. It helps browsers, screen readers, and accessibility tools understand how to interpret the text. The hreflang attribute, used in <link> tags, tells search engines which language and regional version of a URL needs to be shown to users in specific locations. Hreflang attributes help with international SEO and prevent duplicate content issues across language versions.
What is the Difference Between Href and Hreflang?
Href defines the destination URL in a link. Hreflang tells search engines the language and regional targeting of a specific URL. Href creates navigation. Hreflang improves language targeting in search results.
What is the Difference Between Hreflang and Canonicalization?
Hreflang signals alternate versions of content for different languages or regions. Canonicalization declares the preferred version of a page to avoid duplication. Hreflang supports multilingual SEO. Canonical tags consolidate ranking signals.
How to find and fix hreflang issues?
Run a site audit using SEO tools that scan hreflang tags. Identify missing self-referencing tags, mismatched return tags, and incorrect language codes. Fix placement inside the HTML head. Add missing alternate tags. Validate all entries with Google’s testing tools and XML sitemap validators.
How to semi-automate hreflang implementation?
Use a CMS plugin or SEO platform with dynamic hreflang generation. Set language and region settings at the template or database level. Export existing pages with metadata. Map translations or regional versions. Import hreflang tags into sitemaps or HTML headers through automated scripts or tools like OTTO SEO.
What are the problems Google may ignore?
Google ignores hreflang tags with incorrect codes, missing return links, or placement outside the head section. Google skips processing on pages with crawl restrictions, conflicting canonical tags, or broken hreflang mapping.
Why you should be careful redirecting users
Redirects based on IP or browser language interfere with indexing. Search engines struggle to access content variations. Users experience unwanted redirects. SEO signals split across URLs. Hreflang tags become ineffective. Always allow bots to crawl every version without forced redirection.
