Hreflang and SEO: Full Guide for Newbies

SEO and Content Marketing Expert at SE Ranking specializing in industry research around SEO and AI trends.

Reviewed by SEO Specialist at SE Ranking. Olena has expertise in market research, website performance improving, investigating and fixing technical SEO issues.

Nov 21, 2024

Every day, millions of French users visit global websites like Amazon.com. Although the official page of Amazon.com is in English, users can still see text and product descriptions in French. This is because Amazon’s global website has a localized version for France, ensuring that all French users can automatically see the website content in French.

If your website has pages localized into several languages, similarly to Amazon, you can specify the right language for each page by using hreflang attributes.

Hreflang makes it easy for search engines to identify that your website has content in different languages, streamlining the process of redirecting visitors to the page that corresponds to their geographic region.

Key takeaways

• Hreflang is an HTML attribute essential for websites with multilingual content. It guides search engines to display the most relevant language version to users based on their location and language preference.
• You should include a hreflang tag on every page that has a language or regional alternative, and each page should reference all its language versions (including itself).
• By implementing hreflang correctly, websites can optimize their international SEO, improve user experience, and avoid duplicate content issues.
• You can inform Google about multiple language versions of a page through hreflang implementation using HTML tags, HTTP headers, or a sitemap.
• When using hreflangs, make sure to include a tag for each language version of a page, including the original; ensure reciprocal links between language versions; use fully-qualified URLs with the protocol (http/https); and allow hreflang to link pages across different domains.

What is hreflang?

Hreflang is an HTML attribute used for websites with content in multiple languages and for visitors from different regions.

This essentially means that if the home page, example.com, is translated into German and English, you can use the hreflang attribute to indicate the language and/or the region for your pages. Depending on the user’s location, Google will pick and show them the corresponding version of the page.

What does a hreflang tag look like?

An hreflang tag typically takes on the form of the following HTML tag:

<link rel="alternate" hreflang="language_code" href="URL_of_alternative_page">

How sites use the hreflang attribute

If you lived in France and Googled "Samsung official site," you would see the following results: By clicking on the first link, you would be taken to https://www.samsung.com/fr/. Basically, Google would identify your location and take you to the French version of the website.

How many language versions your website really needs

Creating localized pages for lots of different regions might seem like the best solution for user experience, as users are clearly more likely to spend more time on the site if it is presented in their native language.

Still, it’s important to balance the benefits with the resources required to create and maintain a multilingual site. Investigate your website analytics to determine the countries or regions where your user base is thriving. Conduct user research to gauge their language preferences and expectations. This will help you make informed decisions concerning the number of language versions your website truly needs.

Is hreflang important for SEO?

Hreflang implementation is important for SEO because these tags help search engines understand the relationship between different language versions or regional variations of your web pages.

By setting hreflang correctly, you can benefit in the following ways:

Improving UX

Hreflang allows search engines to deliver the most suitable language version or regional variation of your web page to users based on their language preferences or geographical location. This personalized approach ensures that users find the content that’s most relevant to them, resulting in an improved user experience on your website. Google values websites that provide a good user experience.

Preventing duplicate content problems

Search engines may interpret similar content in multiple language versions or region-specific content in the same language as duplicate content, which can have a negative impact on your website’s rankings. Hreflang tags signal to search engines that these are alternative versions of the same content, eliminating the risk of duplicate content issues.

Targeting specific audiences

Hreflang empowers you to effectively target specific language-speaking or region-specific audiences. This capability enables you to drive more targeted traffic to your website from different markets.

Boosting international SEO

If you have an international website targeting different countries or language markets, hreflang is instrumental in improving your international SEO efforts. By helping search engines understand the language and geographic targeting of your content, hreflang ensures that it is appropriately displayed to users in their preferred language or region.

When you need the hreflang attribute

1. When only certain parts of a webpage (a template, header, footer, or navigation elements) are translated.
2. When the site has different content for different regions. For example, English content for US users and French content for Canadian users.
3. When the site is fully localized into several languages:
   • A Portuguese website may have two versions:
     • one for Portugal:
     • one for Brazil:
4. When global sites have several versions for different regions in one language. This can include the UK, USA, and Canada versions.
5. When websites are available in different languages: English, Italian, and Chinese.
6. When sites cater to visitors from specific regions and offer content in English and French only for visitors from the UK.

If your website is similar to any of the examples above, it is necessary to implement the hreflang attribute.

When you shouldn’t use hreflang

• When you don’t target other languages or countries Hreflang annotations are primarily used to indicate language and regional targeting for international or multilingual websites. If your website is exclusively focused on serving a specific language or country, and you have no plans to cater to other regions, implementing hreflang isn’t necessary.
• For non-canonical pages When the rel=canonical redirects a user to another page, it sends the following signal to search engines: “Don’t pay attention to this page, please index another canonical page instead.”
  Pro Tip: Redirects can easily break hreflang if they aren’t set up properly, especially when pointing to non-canonical or non-200 URLs.
• When you target different cities in the same country
  If you have a local business and a website that targets several cities within the same country, and your audience in those cities speaks the same language, you can do without hreflang tags. But if your visitors from those cities use different languages or dialects, and you have specific content tailored for them, make sure to use hreflang tags.

One more thing to keep in mind is to avoid using hreflangs that point to non-existing pages. This can confuse search engines, lead to errors in indexing, and ruin user experience.

The basics of hreflang implementation

The following fundamental hreflang SEO practices ensure that these annotations function correctly and effectively indicate the language and regional variations of web pages.

Include all language versions of a page with the hreflang tag, including the page itself

This means that in addition to mentioning other language versions, hreflang should also point back to the original page.

Specify the full address of the alternative URL (absolute URLs)

Hreflang annotations should use fully-qualified URLs for both the original and alternative versions of the page, including the protocol ( http/https ). This ensures clarity and prevents any ambiguity in interpreting the URLs.

Include bidirectional links

When implementing hreflang tags, it’s essential to establish bidirectional links between your pages. This means that each page with an hreflang tag should reference its alternate language versions, and vice versa.

Consider including alternative URLs that belong to different domains

In certain cases, multilingual versions of a website may exist on separate domains. But you can still use the hreflang tag to establish connections between these sites, regardless of different domain names, as long as you meet the requirements mentioned above.

Languages and region codes

The language and region codes are used to specify the targeted language or region for alternative versions of a web page. These codes can be single codes like it, en, es, de, etc., while in other cases, you may notice a combination of codes like en-US, en-GB, etc.

How to set up the hreflang attribute

There are three ways to inform Google about multiple language versions of a page through hreflang implementation:

1. HTML tags
2. HTTP header
3. XML sitemap

HTML tags

Here is a sample piece of HTML code from seranking.com that includes hreflang attributes.

Hreflang HTTP headers

If you have non-HTML files like PDFs, you can use an HTTP header to inform search engines about pages available in multiple languages.

XML sitemap

Let’s explore how to use a sitemap to inform search engines about alternative versions of a page.

How to audit your website for hreflang issues

Particularly, with the Website Audit tool, you can now expect to receive even more reliable data on your website’s performance from a technical standpoint.

Common hreflang mistakes

Implementing hreflang correctly can be challenging. Even minor mistakes can have a significant negative impact on your website’s visibility and user experience.

Missing return links

If page A has an hreflang tag pointing to page B, then page B must also include an hreflang tag pointing back to page A.

No self-referencing hreflang

Each page should not only include URLs of other language versions but also reference itself.

Region code alone is specified (missing language code)

When specifying hreflang, it is necessary to include either the language code or both the language code and the region code if required.

Invalid language code

Making a mistake in language code can result in the hreflang tag not functioning correctly or at all.

Several language codes for one URL

If multiple language codes have the same URL, search engines are unlikely to determine which language version to show.

Hreflang to non-canonical URLs

Hreflang tags should be used specifically to indicate language and regional alternatives of canonical URLs.

Hreflang to non-200 pages

If the page returns anything other than the 200 OK status code, something is wrong with that page.

Hreflang to noindexed pages

“Noindex” is a directive that instructs search engines not to include a particular page in their index, resulting in the page not appearing in search engine results.

Missing x-default

The x-default hreflang attribute is used to specify a default page when none of the specified language or regional variants match the user’s preferences.

Conclusion

Applying hreflang tags is an excellent strategy for assisting search engines in delivering the right page results to users who are searching within distinct languages and regions. By implementing hreflang correctly, you can address duplicate content issues, improve the user experience, and give your content a major global SEO boost.