What is an hreflang tag?
An hreflang tag is a piece of HTML code that tells search engines like Google which language and geographical region a specific webpage is intended for. It helps prevent issues with duplicate content and ensures that users see the version of your page that is most relevant to them.
Why is an hreflang tag important?
It’s a crucial element of international SEO. By correctly implementing hreflang tags, you signal to search engines that you have alternative versions of your content for different languages or regions. This improves the user experience and helps search engines serve the correct page to the right audience, which can significantly boost your site’s visibility in global search results.
When should you use an hreflang tag?
You should use hreflang tags when you have created multiple versions of a page to target different linguistic or regional audiences. This applies in scenarios such as:
- The content is fully translated into different languages (e.g., an English version and a Spanish version).
- The content is in the same language but targeted at different regions (e.g., a page for the US and another for the UK with different pricing or spelling).
- The main content is in one language, but the template (navigation, footer) is translated.
Understanding the Hreflang Tag Syntax
An hreflang tag is a link element that lives inside the <head> section of your HTML, in your XML sitemap, or in your HTTP headers. A typical hreflang attribute looks like this:
<link rel="alternate" hreflang="language-code" href="url_of_page" />Code language: HTML, XML (xml)Let’s break down its components:
- rel=”alternate”: This indicates that the link points to an alternate version of the current page.
- hreflang=”language-code”: This is where you specify the language and, optionally, the region. The format is either a two-letter ISO 639-1 language code (like es for Spanish) or a combination of language and ISO 3166-1 Alpha 2 region code (like es-MX for Spanish in Mexico).
- href=”url_of_page”: This is the absolute URL of the alternative page.
For example, if you have an English page targeting the US and a Spanish version for Spain, the hreflang tags on the English page would look like this:
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />Code language: HTML, XML (xml)How to Implement Hreflang Tags
There are three primary methods for implementing hreflang tags. You should choose one method and stick with it for consistency.
1. HTML Tags in the <head> Section
This is the most common method. You simply add the appropriate <link> elements to the <head> section of every page that has an alternative version. You must include a self-referencing tag (a tag pointing to the page it’s on) in addition to the tags for the other versions.
Example: On the page https://example.com/us/, you would include:
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />Code language: HTML, XML (xml)The x-default tag tells search engines which page to show users when their language or region doesn’t match any of your specified versions.
Do you need an SEO Audit?
Let us help you boost your visibility and growth with a professional SEO audit.
Get in Touch2. XML Sitemap
For larger websites, adding hreflang tags to the XML sitemap can be more efficient. This method keeps your HTML code cleaner and is easier to manage at scale. For each URL in your sitemap, you list all of its alternate versions.
Example:
<url>
<loc>https://www.example.com/us/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://www.example.com/us/"/>
<xhtml:link rel="alternate" hreflang="en-GB" href="https://www.example.com/uk/"/>
</url>
<url>
<loc>https://www.example.com/uk/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://www.example.com/us/"/>
<xhtml:link rel="alternate" hreflang="en-GB" href="https://www.example.com/uk/"/>
</url>Code language: HTML, XML (xml)3. HTTP Headers
For non-HTML files, like PDFs, you can implement hreflang using the HTTP header. This is less common for webpages but is the only option for other file types.
Example:
Link: <https://example.com/document.pdf>; rel="alternate"; hreflang="en-US", <https://example.com/es/document.pdf>; rel="alternate"; hreflang="es-ES"Code language: JavaScript (javascript)Common Mistakes and Best Practices
Implementing hreflang can be tricky. Here are some common mistakes to avoid and best practices to follow.
The international retailer struggled with high bounce rates in new markets because flawed
hreflangtags, especially on product pages, caused Google to serve the wrong language versions to users. In response, the team first corrected the on-page tags for an immediate fix and then implemented a comprehensive solution by adding correct, reciprocalhreflangannotations to the XML sitemap. This precise technical fix ensured Google served the correct local pages, leading to a 50% decrease in bounce rates and a 35% increase in organic conversions in the Spanish and German markets.
Most Common Mistakes 🚫
- Missing Return Links: If page A links to page B, page B must link back to page A. Hreflang tags must be reciprocal. A one-way tag will be ignored by search engines.
- Using Incorrect Codes: Using the wrong country code (e.g., uk instead of gb for the United Kingdom) or an invalid language code will break the implementation. Always use the correct ISO formats.
- No Self-Referencing Tag: A common oversight is forgetting to include an hreflang tag that points to the page itself. Every page with hreflang annotations needs a self-referencing one.
- Linking to Redirected or Non-Canonical URLs: The URL in the href attribute should always be the final, canonical URL. Linking to a page that redirects or is not the canonical version will confuse search engines.
Best Practices ✅
- Always Use Absolute URLs: Use the full URL, including https://www., to avoid any ambiguity.
- Implement the x-default Tag: Use the x-default value to specify a fallback page for users whose language/region settings don’t match any of your targeted versions.
- Be Consistent: Choose one implementation method (HTML, sitemap, or HTTP header) and use it across your entire site.
- Audit Regularly: Use tools like Google Search Console‘s International Targeting report to check for errors and ensure your hreflang tags are working correctly.
Hreflang tags are a powerful tool for international SEO. They help you deliver the right content to the right audience by signaling language and regional targeting to search engines. To succeed, you must use the correct syntax, ensure all links are reciprocal, include a self-referencing tag, and choose the implementation method that best suits your site’s structure. By avoiding common mistakes and regularly auditing your setup, you can significantly improve the user experience and your site’s performance in global search results.
Frequently Asked Questions (FAQ)
-
What is the difference between an hreflang tag and a canonical tag?
A canonical tag (rel=”canonical”) tells search engines which version of a page is the “master” copy to prevent duplicate content issues. It’s used for pages with very similar content. An hreflang tag (rel=”alternate” hreflang=”…”) is used to signal that there are different, but related, versions of a page for different languages or regions. The two can be used together.
-
Can I automate hreflang implementation?
Yes, for large sites, manual implementation is often impractical. Many CMS platforms (like WordPress with plugins like WPML or MultilingualPress) can automatically generate and insert the correct hreflang tags for you. You can also use scripts or tools to generate the necessary markup for your XML sitemap.
-
Do hreflang tags help with SEO rankings?
Indirectly, yes. While hreflang is a technical signal, not a direct ranking factor, it has a significant impact on SEO. By helping Google show the correct language version to users, it improves the user experience, reduces bounce rates, and ensures that the SEO value (like backlinks) from all page versions is consolidated, which can lead to better rankings.
Not getting enough traffic from Google?
An SEO Audit will uncover hidden issues, fix mistakes, and show you how to win more visibility.
Request Your Audit
