hreflang tag cover - globe with chat bubbles and plants

What is an Hreflang Tag? SEO Basics & Examples

Learn hreflang best practices for international SEO, including page-level implementation, language and country codes, self-referencing tags, and proper tag use.
Published:
Updated:
Author: Taylor Brown

What is an hreflang tag?

The hreflang tag is an HTML attribute that signals to search engines the language and geographic targeting of a webpage.

It helps search engines understand which language you use on a specific page, so they can serve the correct language or regional URL in search results.

Example Code

Here’s an example of what the hreflang tag looks like:

<link rel="alternate" hreflang="en-us" href="http://example.com/en-us" />
<link rel="alternate" hreflang="fr-ca" href="http://example.com/fr-ca" />

In this example, there are two versions of the website: US English and Canadian French.

Why is the tag important?

The hreflang tag is vital for websites with content in multiple languages or tailored to different regions. It helps search engines deliver the most relevant version of your content to users based on their language preferences or geographical location. This can significantly enhance user experience and reduce bounce rates.

Also, using hreflang tags can prevent problems associated with duplicate content. Without these tags, search engines might consider the same content in different languages as duplicate content, which could harm your SEO performance.

How to Add Hreflang Tags

Implementing hreflang tags requires careful attention. Here are the key steps:

1. Identify Your Pages and Versions

Firstly, identify the pages on your site with multiple language or regional versions. Make a spreadsheet of these pages and their variations.

2. Choose the Right Language and Region Codes

Next, choose the appropriate language and region codes for each page version. Language codes should follow ISO 639-1, and country codes should follow ISO 3166-1 Alpha-2. For instance, “en” for English, “fr” for French, “us” for the United States, and “ca” for Canada.

3. Apply the Hreflang Tag

For each page version, add a link element in the <head> section with the hreflang attribute. This should be done for every language and region variant of the page, including the page itself.

4. Add The Tags Across All Variations

Ensure each language or region variant of a page includes the same set of hreflang tags. This helps search engines understand the full set of variations.

5. Validate Your Implementation

Use tools like Google Search Console or third-party hreflang tag validators to check your implementation. This will help you identify and fix any errors or issues.

Best Practices for Hreflang Tags

Let’s delve deeper into what you should keep in mind when implementing the tags:

  • Page-by-Page Implementation: Hreflang tags should be applied on a page-by-page basis. If you have multiple versions of a single page in different languages or target different regions, each version should have hreflang tags.
  • Self-Referencing Tags: Each language or regional version of a page should include a reference to itself in the hreflang tags. This helps search engines understand the complete set of pages and variations.
  • ‘x-default’ Attribute: If you have a version of a page that isn’t targeting any specific language or region and serves as a catch-all, use the x-default hreflang attribute. This instructs search engines to serve this version to all users whose language and location aren’t specifically targeted by other page versions.
  • Language and Country Codes: Ensure you use the correct language and country codes according to ISO standards. Language codes should follow ISO 639-1, and country codes should follow ISO 3166-1 Alpha-2.
  • Consistent Link Elements: The link elements within the hreflang annotations should be consistent across all page versions. For instance, if one page uses absolute URLs in its href attributes, all pages should use them too.
  • Avoid Mixing Formats: Stick to a single format for hreflang annotations. If you use HTML link elements in the header for one page, avoid using HTTP headers or sitemap annotations for other pages.
  • Closely Related Languages and Regions: If you’re targeting closely related languages (such as American English and British English) or regions, use hreflang tags. This will help search engines differentiate between the versions and serve the right content to users.
  • Regular Checks and Updates: Check your hreflang implementations regularly to ensure they work as expected. If you add new languages or regions to your site, update the hreflang tags accordingly.

Use these techniques to ensure your hreflang implementation is robust and effective, enabling your website to reach its intended audience across languages and regions.

Bottom Line

Correctly implementing hreflang tags is crucial for the SEO of any multilingual or multinational website. While it can be a bit complex, getting it right can significantly improve your site’s performance in international search results, providing a better user experience and enhancing your global reach.

Taylor Brown

I’m Taylor, the guy who runs TCB Studio. I’m a digital and creative professional based in Kansas City. This site is where I share practical resources and information on helpful technology.

Related Articles

apply noindex tag cover - no entry sign

How to Use a Noindex Tag

A noindex tag tells search engines not to include a page in search results. Learn how it works and how...

301 redirect cover

What is a 301 Redirect? SEO Basics & Best Practices

Learn what a 301 redirect is, why it matters for SEO, and how to use redirects correctly when changing URLs,...

404 cover image

What is a 404 Error? Basics & SEO Considerations

Learn about 404 errors and what they mean for your website. Find SEO considerations and why fixing broken pages is...

alt text cover - alt tag and leaves

What is Alt Text for Images? SEO Basics

Alt text (alternative text) describes images in HTML to improve accessibility, user experience, and SEO by helping screen readers and...