Topic: SEO
Hreflang tags are often undervalued or added late in the process of website optimization. This oversight can create significant obstacles for websites looking to enhance their international search visibility.
In this article we will review typical hreflang challenges, methods for detecting them, and strategies for proper implementation to attract targeted audiences based on region or language preferences.
What is Hreflang?
The hreflang attribute helps search engines identify the language used on a webpage. When implemented correctly, it helps websites cater to users in different regions, improves user experience, and instructs search engines which content to display based on language and location. Whether you're managing an SaaS site or a business with multiple locations worldwide, using hreflang ensures your pages are localized and aligned with your audience's needs.
For instance, company based in Brazil that also have an office in Portugal, might have 2 versions of its website. By using hreflang attributes, search engines can ensure that users in Brazil are directed to the Portuguese version of the website for Brazil ( e.g. hreflang=”pt-br”), while users in Portugal see the version in Portuguese for Portugal ( e.g. hreflang=”pt-pt”):
<link rel="alternate" href="https://supersite.com/pt-br/" hreflang="pt-br" />
<link rel="alternate" href="https://supersite.com/pt-pt/" hreflang="pt-pt" />
While a simple lang attribute in the <html> tag can specify a page's language, it falls short in defining relationships between different language versions. The lang attribute helps browsers and search engines understand the language, but it doesn’t indicate the existence of other versions or their relationships. This can lead search engines to mistakenly treat alternative versions as duplicate content or overlook them entirely, resulting in indexing issues.
It is worth mentioning Google only identifies duplicate content when identical pages exist in the same language. For instance, multiple Portuguese versions targeting Brazil and Portugal may trigger duplication issues. However, translated versions in different languages, such as English, Swedish, and French, are treated as unique and don’t present this problem.
It’s crucial to ensure users are directed to the appropriate version of a site based on their language and location. For example, Swedish-speaking users should easily find the Swedish version of the site when searching on Google.
In essence, hreflang tags provide a way to guide search engines in handling multilingual websites effectively, ensuring users access the most relevant version for their needs.
Benefits of Using Hreflang
Although hreflang doesn’t have a direct impact on SEO rankings, its implementation offers several advantages that can indirectly enhance your website's SEO performance.
- Serving Relevant Content: Hreflang ensures that search engines deliver the appropriate language version of your content to users, tailored to their language and location.
- Avoiding Duplicate Content Issues: By signaling to search engines that similar pages in different languages are not duplicates, hreflang reduces the risk of duplication penalties.
- Improving User Experience: Providing users with content in their preferred language enhances their experience, which can lead to longer visit durations and higher engagement.
- Boosting Local Engagement: Tailoring your website to a local audience increases relevance, engagement, and visibility in search engine results pages (SERPs).
Hreflang Implementation Using HTML
Understanding the importance of hreflang for SEO is only half the battle—you also need to effectively communicate its implementation to your development team.
One of the most straightforward, yet time-intensive, methods is embedding <link> elements in the <head> section of your HTML. This approach is highly visible when inspecting a site’s code, making it a popular choice for implementation.
<link rel="alternate" href="https://supersite.com/en/" hreflang="en" />
<link rel="alternate" href="https://supersite.com/pt/" hreflang="pt" />
<link rel="alternate" href="https://supersite.com/fr/" hreflang="fr" />
Steps for Implementation
- Create a <link> element for every page variation, including the original version.
- Set the ‘rel’ attribute to "alternate".
- Include the URL of each variation.
- Add the hreflang attribute, specifying both the language and (optionally) the country.
X-default Hreflang – Why Do You Need It?
The x-default tag is used to designate a default page for users whose browser settings don't match any of the available language or region options on your site. For instance, if a Swedish-speaking user visits your site that only offers content in French, English and Portuguese, the x-default tag directs them to the fallback page (and it can be in English in this scenario). While some websites skip using this tag, others misuse it—such as applying it to all pages or combining it incorrectly with other language tags. However, Google recommends implementing the x-default tag for websites with multilingual content. Proper use of this tag enhances user experience and supports better SEO performance. To implement it effectively, start by analyzing the primary languages used by your audience and selecting an appropriate default language for your fallback page:
<link rel="alternate" href="https://supersite.com/en/" hreflang="x-default" />
In the end the whole structure may look in the following way:
<link rel="alternate" href="https://supersite.com/en/" hreflang="en" />
<link rel="alternate" href="https://supersite.com/pt/" hreflang="pt" />
<link rel="alternate" href="https://supersite.com/fr/" hreflang="fr" />
<link rel="alternate" href="https://supersite.com/en/" hreflang="x-default" />
Key Points to Remember
- Language and Country Codes: You can include only the language code (e.g. hreflang="it"), but search engines will ignore the tag if you use just the country code without a language code.
- Self-Referencing: Always include the original page in the list of variations to self-reference (e.g. Page A should include itself in the <link> tags).
- Bidirectional Linking: Every variation must link back to the others. For example, if Page A references Page B, Page B must also reference Page A. Failure to establish mutual links can lead to search engines misinterpreting your implementation as misleading.
Hreflang Implementation Using HTTP Headers
For non-HTML files, such as PDFs, you can use HTTP headers to inform Google about the language and regional variations of a page. This involves adding the hreflang information directly to the page's GET response in the HTTP header.
Link: <https://supersite.com/superfile.pdf>; rel="alternate"; hreflang="en"
As shown, the structure of the information remains consistent across methods; the only difference lies in how it is delivered to search engines. Regardless of the approach you choose, consistency is key—mixing strategies is unnecessary and can lead to complications. Keep in mind that working with HTTP headers requires technical expertise. It is generally more complex and time-intensive than using HTML tags or XML sitemaps. Therefore, this method is best handled by developers or individuals with sufficient technical experience.
Hreflang Implementation Using XML Sitemap
For larger websites—especially those with 3 language or regional variations - XML sitemaps offer a cleaner and more scalable alternative to HTML tags. This method reduces the need to add extensive code directly into HTML files.
Example:
<url>
<loc>https://supersite.com/en/</loc>
<xhtml:link rel="alternate" hreflang="fr" href="https://supersite.com/fr/"/>
<xhtml:link rel="alternate" hreflang="pt" href="https://supersite.com/pt/"/>
<xhtml:link rel="alternate" hreflang="en" href="https://supersite.com/en/"/>
</url>
Steps for XML Sitemap Implementation
- Use a
element for each primary page URL. - Inside the <url> tag, include a <loc> tag that specifies the primary page URL.
- For each page variation, add an <xhtml:link> child element with the following attributes:
- rel="alternate"
- hreflang="language-code"
- href="full_page_url"
Key Points to Remember
- Always use absolute URLs (including “https://” or “http://”).
- Maintain a clear, consistent order when listing page variations for easier readability and management.
Top 5 Hreflang Mistakes and How to Fix Them
Although hreflang implementation is fairly straightforward, there’s still plenty of opportunity for mistakes and problems to arise.
Using Broken or Redirected Hreflang URLsIf hreflang tags link to URLs that return a 404 error or a redirect, search engines will disregard them. For large websites, this issue can also waste crawl budget and create indexing problems.Regularly update and validate all hreflang links to ensure they point to live, non-redirected pages.
Blocking Hreflang URLs in robots.txtSearch engines must crawl all versions of a page for hreflang tags to work. If pages are blocked using robots.txt or tagged with noindex, Google won’t process the hreflang map. Avoid blocking international page versions, as each version must be crawled twice to validate hreflang tags.
Omitting the X-Default TagThe x-default tag identifies a fallback page when no other language or regional match is available. Sites often skip this tag or misuse it, which can degrade user experience.
Using Relative URLs Instead of Absolute URLsHreflang tags require full URLs, including the protocol (e.g. https://). Relative URLs, which omit the domain, are invalid and will cause hreflang configurations to fail.
Missing Reciprocal LinksFor hreflang tags to work, all versions of a page must reference each other. If Page A links to Page B, Page B must also point back to Page A. Without this mutual connection, Google may ignore the hreflang setup to prevent misuse.
Hreflang Best Practices
Choose a single implementation method that aligns with your skills and business needs.Avoid mixing different methods (HTML tags, XML sitemaps, or HTTP headers) to prevent conflicts.
Identify only the necessary languages and regions.Don’t overdo it - if your offerings are identical for the Canada, USA, and Australia, you don’t need separate versions for each. Focus on the regions that genuinely require localization.
Use a consistent order for hreflang annotations.While search engines don’t require a specific order, using the same sequence across all pages reduces errors and speeds up implementation.
Verify all language and country codes.Always use codes from Google’s official ISO 639-1 (language) and ISO 3166-1 alpha-2 (country) lists to prevent errors.
Use all page variations, including a self-referencing hreflang tag.Plan this during the mapping phase before implementing the tags. It simplifies spotting any inconsistencies.
Check that the language code matches the content on the page.Ensure accuracy between what’s declared and the actual content language.
Use absolute URLs instead of relative ones.Include the full URL (including the protocol) for all hreflang annotations to avoid implementation issues.
Audit and test your hreflang setup.Use tools like HreflangTest.com or run regular audits to ensure proper implementation and functioning.
Article by
Julius Nalivaiko
Julius is a digital marketer with web developer background - a rare breed. As a digital marketer, he worked in a variety of competitive industries including fintech/web3/hosting/SaaS and got enourmous expertise in SEO, paid marketing and martech. As a web developer, he continues to enjoy LAMP/LEMP stack. In both areas Julius has years of experience and massive amount of skills obtained while working for various businesses in different countries as on-field implementor and team manager.