What is a hreflang tag and how do you implement it?

What are hreflang-tags?

Hreflang tags are essential tools for websites operating internationally. They assist search engines in determining which version of a webpage should be displayed based on the user's language and region. By implementing these tags, you ensure that your content reaches the right audience, which is critical for effective international SEO

Definition of an Hreflang Tag

An hreflang tag is an HTML attribute that indicates the language and regional targeting of a specific version of a webpage. You implement this by adding specific codes to your page's header, such as:

hreflang="en-US" for the English version aimed at the United States.
hreflang="en-GB" for the English version targeted at the United Kingdom.
hreflang="nl-BE" for the Dutch version tailored to the Flemish region in Belgium.

(International) SEO with hreflang tags

Without hreflang tags, search engines may struggle to determine which version of your content to index and display. If these tags are not set up correctly, it can lead to reduced visibility in search engine results. Hreflang tags not only enhance the user experience by providing relevant content but also help prevent duplicate content issues, which is crucial for effective search engine optimization.

Benefits of hreflang tags

Benefits	Description
Avoid duplicate content	Hreflang tags help search engines index the correct version of your content based on the user's language and region. This effectively prevents duplicate content issues.
Enhance user experience	By automatically directing visitors to the appropriate page according to their language and location, you improve the user experience, leading to increased engagement and conversions.
Boost local SEO performance	Targeting the right regions can enhance your local visibility, which is particularly beneficial for businesses focusing on multiple markets.
Prevent internal competition	Hreflang tags ensure that different versions of your website do not compete against each other in search results, making your SEO strategy more effective.

How does an hreflang tag look?

An hreflang tag appears as follows:

<link rel="alternate" hreflang="en-US" href="https://www.yourwebsite.com/" />
<link rel="alternate" hreflang="en-GB" href="https://www.yourwebsite.co.uk/" />

In this example, you see two different tags:

rel="alternate": This attribute indicates that this is an alternative version of the page.
hreflang="en-US": This tag specifies that the page is intended for English-speaking visitors in the United States. The "en" represents the language (English), and "US" denotes the country (United States).
href: This attribute points to the URL of the specific version of the page.

Each element in the tag serves a specific purpose, and together they ensure that search engines can present the correct page to the appropriate users from a technical SEO perspective.

Hreflang tags for different regions

Hreflang tags can be further customized to better serve visitors from specific regions. For instance, if you want to provide the same content to users in Belgium, where both Dutch and French are spoken, you can implement hreflang tags to display the appropriate language version. This is especially useful when there are subtle differences in word usage and culture between regions, such as between the Netherlands and Flanders. Below is a table illustrating how different hreflang codes can be utilized to optimize content for various languages and countries:

Hreflangcode	Language	Region	Description
en-US	English	United States	English version of the website aimed at the United States.
en-GB	English	United Kingdom	English version targeted at the United Kingdom.
nl-NL	Dutch	Netherlands	Dutch version of the website focused on the Netherlands.
nl-BE	Dutch (Flamish)	Belgium (Flanders)	Dutch version tailored for Belgium, with Flemish adaptations.
fr-BE	French	Belgium (Wallonia)	French version of the website aimed at Belgium.
fr-FR	French	France	French version of the website focused on France.

How to implement hreflang tags

Follow these steps to add hreflang tags to your web pages.

Step 1: Place the Hreflang Code in HTML

Open the HTML code of the web page you want to modify.
Add the hreflang tags in the <head> section of your document, ensuring you include each language and regional version of the page. Here’s an example:
- <link rel="alternate" hreflang="en-US" href="https://www.yourwebsite.com/" />
- <link rel="alternate" hreflang="en-GB" href="https://www.yourwebsite.co.uk/" />
- <link rel="alternate" hreflang="fr-CA" href="https://www.yourwebsite.ca/" />
Make sure the links correctly point to the respective versions of your pages.

Step 2: Add Hreflang Tags to HTTP Headers

In addition to adding hreflang tags in the HTML, you can also include them in the HTTP headers of your page. This is particularly useful if you don’t have access to the HTML code.

Open your server configuration or use a .htaccess file if you’re running an Apache server.
Add the hreflang tags in the headers. It may look like this:
- Link: "<https://www.yourwebsite.com/>; rel=\"alternate\"; hreflang=\"en-US\""
- Link: "<https://www.yourwebsite.co.uk/>; rel=\"alternate\"; hreflang=\"en-GB\""
- Link: "<https://www.yourwebsite.ca/>; rel=\"alternate\"; hreflang=\"fr-CA\""
Test your headers using tools like cURL or your browser's developer tools to confirm that the tags are displaying correctly.

Stap 3: Integratie in de XML-sitemap

Another effective way to communicate hreflang tags to search engines is by including them in your sitemap. Here’s how:

Open your XML sitemap with a text editor or use a sitemap generator.
Add the hreflang tags to the section for each URL. It might look like this:
- <url>
  <loc>https://www.yourwebsite.com/</loc>
  <xhtml:link rel="alternate" hreflang="en-US" href="https://www.yourwebsite.com/" />
  <xhtml:link rel="alternate" hreflang="en-GB" href="https://www.yourwebsite.co.uk/" />
  </url>
Upload the modified sitemap to your server and ensure it is registered with Google Search Console.

Best practices for implementing hreflang tags

To ensure that you effectively use hreflang tags, here are some best practices and guidelines to follow.

Ensure bidirectional linking

A key component of hreflang tags is establishing bidirectional links. This means that if Page A references Page B with an hreflang tag, then Page B should also reference Page A. This helps search engines understand that the pages are closely connected and prevents any confusion.

Example:

Page A (English for the United States):
<link rel="alternate" hreflang="en-US" href="https://www.yourwebsite.com/" />
Page B (English for the United Kingdom):
<link rel="alternate" hreflang="en-GB" href="https://www.yourwebsite.co.uk/" />

On the header of the UK page, you should include a reference to the US version, and conversely, the US page should also reference the UK version.

Using x-default tags

The x-default tag is a valuable tool when implementing hreflang tags. This tag indicates which version of your page should be displayed when there is no other relevant version available for the user. This is especially useful for pages that serve multiple languages or regions.

When to use x-default tags:

When you have a page that serves as the default version for users without specific language or regional settings.
When offering a general version of your content, such as an international or English page, that is not specifically targeted at a particular region.

Example of an x-default tag:

<link rel="alternate" hreflang="x-default" href="https://www.yourwebsite.com/" />

Self-referencing hreflang tags

Self-referencing hreflang tags are tags that point back to the same page. This means that each version of your page should also include an hreflang tag that refers to itself. This is considered a best practice because it helps search engines understand that the specific version of the page is the correct one for the associated language and region.

Example of a Self-Referencing Hreflang Tag for the U.S. Page:

<link rel="alternate" hreflang="en-US" href="https://www.yourwebsite.com/" />

Example of a Self-Referencing Hreflang Tag for the U.K. Page:

<link rel="alternate" hreflang="en-GB" href="https://www.yourwebsite.co.uk/" />

Redirects and their impact

Redirects can significantly affect the functionality of hreflang tags. When you have pages that redirect to other URLs, it's crucial to ensure that the hreflang tags are correctly passed along to the final destination.

What to avoid:

Multiple redirects: Avoid having multiple redirects leading to different versions of the same page. This can create confusion for both search engines and users, making it less likely for the correct hreflang tags to be recognized.
404 Errors: Redirects to non-existent pages (404 errors) can also be problematic. This results in users landing on error pages, negatively impacting user experience and your SEO ranking.

Common mistakes with hreflang tags

When implementing hreflang tags, mistakes can occur. In this section, we’ll discuss the most common errors and how to avoid them.

Common mistake	Explanation	Solution
Incorrect references in hreflang tags	Incorrect references can lead to confusion for search engines. For example, if Page A refers to Page B, but Page B does not refer back to Page A.	Carefully check all links: Ensure that each tag correctly points to the right URL and that bidirectional links exist.
Incorrect language or region codes	Each hreflang tag must include the correct language and region code (e.g., "en-US" for English in the United States). Errors in these codes can reduce page visibility.	Verify the correct codes: Use ISO 639-1 (for languages) and ISO 3166-1 (for countries) to ensure accurate codes.
Multiple pages for the same language	Indicating multiple pages for the same language without the proper specifications can create confusion for search engines.	dentify unique content: Ensure that each page for a specific language offers unique content. Add regional specifications for different areas.

Tools for checking hreflang tags

There are various tools available that you can use to check hreflang tags. Here are some popular options:

Tool	Description	Cost	Complexity
Google Search Console	A Google tool that provides insights into your website’s performance, including hreflang tags. Use the "International Targeting" section for error analysis.	Free	Easy
Screaming Frog SEO Spider	A powerful tool that crawls your website and provides detailed reports on hreflang tags. Ideal for checking correct implementation and references.	Free to €200 per year (depending on the number of URLs)	Average
Ahrefs	A comprehensive SEO tool that analyzes your website's link structure and helps check hreflang tags while identifying potential issues.	From €90 per month	Average to difficult
Hreflang Tags Testing Tool	An online tool specifically designed to test hreflang tags. Enter your URL to view hreflang information, including errors or warnings.	Free	Easy
Sitebulb	A powerful website auditing tool that analyzes hreflang tags and identifies issues. It provides visual reports that are easy to understand.	From €14 per month	Average