Day: March 12, 2024

Imagine you have a thriving online store selling handmade crafts worldwide. You want everyone to enjoy your products, no matter where they live. But what if someone in France stumbles upon your website, and everything’s in English? They might struggle to navigate and understand your offerings. This is where hreflang SEO comes in!

Hreflang SEO isn’t a website translator, but it’s a clever way to tell search engines like Google which version of your website is best for users in different locations and languages.  If you have separate webpages in French and English, for example, hreflang SEO helps Google show the French version to users searching from France.

Now, let’s take a deeper look at Hreflang Tags:

What Are Hreflang Tags?

Hreflang tags are special pieces of code that live within your website’s pages. They may look technical, but their function is straightforward! They tell search engines:

• What language is on this page: Is it English? Spanish? Something else?
• Who is this page for: Are we targeting people in the US, Mexico, or a different country?

Think of hreflang tags as secret messages for Google. They help Google understand the different versions of your website and who they’re intended for.

When you search “what is Hreflang,” in the US, you get:

But, when you search the same in France, you get:

Hreflang tags use two sets of codes to specify language and region:

• ISO 639-1 language codes: These are two-letter codes that define a specific language. For instance, “en” represents English, “es” for Spanish, and “fr” for French.
• ISO 3166-1 alpha-2 country and region codes: These are also two-letter codes that denote a country or region. Some examples include “US” for the United States, “GB” for the United Kingdom, and “IN” for India.

Example Of Hreflang Tags:

Let’s say you have a page about your online craft store on your website “example.com.” You have two versions: one in English for US customers and one in Spanish for Mexican customers. Your hreflang tags might look like this:

    <link rel="alternate" hreflang="en" href="https://example.com/contact-us/" />
  

These tags tell Google that the first page  is in English for US visitors, and the second page  (https://example.com/en-us/) and it continues here.
is in Spanish for Mexican visitors.

Hreflang Tags Are A Signal, Not A Directive

While hreflang tags are a powerful tool to help search engines understand your website’s structure, it’s important to remember they are not directives. Search engines may still choose to show other variations of your pages, depending on a user’s location or other search factors.

Benefits Of Using Hreflang Tags

Now that you understand what hreflang tags are, let’s talk about why they’re awesome for your website! Here’s what you get:

Improved User Experience (UX)

Go beyond convenience!  Deliver a seamless experience tailored to user preferences. This fosters brand loyalty and reduces bounce rates, as users are less likely to leave when they’re presented with information in their own language.

Increased Website Traffic (Qualified)

Attract not just more traffic, but the right traffic. Hreflang tags ensure your website appears in searches conducted in the languages you support, leading to highly relevant visitors more likely to convert.

Better Search Engine Ranking

Hreflang tags send strong signals to search engines about your target audiences. This helps them serve your pages to the most appropriate users, often resulting in improved rankings across multiple regions.

Reduced Duplicate Content Penalties

For global websites, duplicate content is common.  Hreflang tags tell search engines, “These pages are meant for different audiences,” minimizing the risk of getting penalized for unintentional duplication.

Competitive Advantage

Many websites still miss the mark with hreflang implementation. Correct use gives you a strategic edge in reaching specific global markets and maximizing your SEO potential.

Example: A Canadian travel company implements hreflang tags targeting English and French speakers. As a result, their website gains improved visibility in both Canada and France, and they notice a rise in bookings from French-speaking users, who now have a smoother browsing experience.

How to Implement hreflang Tags

TBH hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.

— John (@JohnMu) February 19, 2018

Implementing hreflang tags might sound complicated, but the basics are easier than you think! Here are the main places to put them, and some extra things to remember:

Where to Place Hreflang Tags:

In the HTML <head> 

This is the most common method. You add a few lines of code within the <head> section of each webpage with alternative language versions.

Example:

English “About Us” page: https://example.com/en-us/.
French “About Us” page: https://example.com/fr/a-propos-de-nous/
Your hreflang tags in the <head> section would look like this:

<head>
... other code ...
<link rel="alternate" hreflang="en" href="https://example.com/about-us/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/a-propos-de-nous/" />
... other code ...
</head>
  

Step-by-Step Instructions:

1. Identify alternate pages: List all pages with versions in other languages.
2. Open HTML in text editor: Use your website’s editing tool or a simple text editor.
3. Find the <head> section: Locate the <head> and </head> tags.
4. Paste hreflang tags: Carefully add the hreflang tags within the <head>.
5. Repeat for each page: Implement the tags on all pages with alternate versions.

In the HTTP header  

This option is useful for non-HTML files like PDFs.

Example:

For a PDF document:

• English PDF: https://example.com/info.pdf
• Spanish PDF: https://example.com/es/info.pdf

Your HTTP header would include:

Link: <https://example.com/info.pdf>; rel="alternate"; hreflang="en",
      <https://example.com/es/info.pdf>; rel="alternate"; hreflang="es"
  

Step-by-Step Instructions (May require technical support):

1. Access server configuration: This often requires accessing files like .htaccess (this may need help from your web host or developer)
2. Add HTTP header: Carefully paste the code, making sure it matches your file URLs and language codes.

In The XML Sitemap 

Your website’s sitemap can include information about different language versions of your pages, helping search engines understand your website’s structure.

Example:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/about-us/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/about-us/" />
  

Step-by-Step Instructions:

1. Locate XML sitemap: Find your existing sitemap file.
2. Add hreflang entries: Within each <url> section, include <xhtml:link> entries
3. Submit to search engines: Re-submit your sitemap in tools like Google Search Console.

Handling Complex URLs for Hreflang

While the standard examples make hreflang tags seem simple, website URLs aren’t always as clean as “[example.com]”. Here’s how to manage situations like query parameters and dynamic URLs:

Query Parameters

When a query parameter doesn’t change the core content’s language, it’s usually safe to exclude it from your hreflang tag.

• Example: A filtering parameter like https://example.com/shop?color=blue likely doesn’t necessitate a separate hreflang tag, as the primary product page remains the same.

Dynamic URLs

 If your website generates URLs with unique identifiers or session IDs, focus on referencing the canonical (cleanest) version of the page within your hreflang tags.

• Example: The product page with the URL https://example.com/product.php?id=12345&lang=en can be represented in the hreflang tag as https://example.com/product/12345/.

Important Note: In complex scenarios, it’s best to consult your website developer or an SEO expert to ensure your hreflang implementation aligns with your specific website structure.

Special Considerations for JavaScript-Heavy Websites

Search engines have become more adept at understanding JavaScript, but they still have limitations.  If your website is a Single-Page Application (SPA) or heavily depends on JavaScript to load the primary content, hreflang implementation can get trickier:

Challenges

Search engines might struggle to see your alternate language versions if the HTML doesn’t pre-populate hreflang tags.

Potential Solutions

• Server-Side Rendering (SSR) or Dynamic Rendering: These solutions ensure search engines receive pre-rendered HTML with hreflang tags included.
• JavaScript Workarounds: If SSR isn’t possible, you can potentially use JavaScript to modify the hreflang tags after the content loads.

Note:

• This is a more complex solution and might require custom development.
•  Implementing hreflang on JavaScript-heavy websites often requires specialized solutions. Consult an SEO expert or a developer familiar with SPAs and SEO for the best approach in your case.

Building hreflang Tags: Syntax and Structure

No matter where you put them, hreflang tags follow a specific format. Here’s the basic structure:

<link rel=”alternate” hreflang=”language-code” href=”URL-of-page” />

• rel=”alternate”: Tells search engines this is an alternate version of the page.
• hreflang=”language-code”: Specifies the language of the alternate page (e.g., “en” for English, “es” for Spanish). You can also add a region if needed (e.g., “en-us”, “en-gb”).
• href=”URL-of-page”: This is the full URL of the alternate language version.

Important Hreflang Principles

Understanding these key principles will ensure you get maximum benefit from your hreflang tags:

Self-referencing Tags

Every page on your website should include a hreflang tag pointing to itself. This reinforces to search engines that a page exists for a specific language or regional variation.

Bidirectional Tags

If page A links to page B as an alternate version, page B should also link back to page A. This creates a strong, two-way signal for search engines to understand the relationship between your alternate pages.

Understanding Hreflang Fallbacks

Search engines aim to serve the most relevant version of your content to users based on their language and location.  Think of the hierarchy like this:

• Ideal Match: A page specifically targeted to the user’s language and region (e.g., hreflang=”es-MX” for a user from Mexico).
• Broader Match: A page for the user’s general language if a region-specific version doesn’t exist (e.g., hreflang=”es”).
• X-default: Your x-default page acts as a catch-all if no other language matches are found.

Example

Let’s consider a travel website:

• Homepage:
  • hreflang=”en” (Serves as a fallback for any English-speaking users)
• About Australia Travel:
  • hreflang= “en-AU” (Targets Australian visitors)
  • hreflang=”en” (Serves as a fallback for other English speakers)
• Destinations in France:
  • hreflang=”fr-FR” (Primary target: France)
  • hreflang=”fr” (For other French speakers around the world)

Tip: Use hreflang validation tools to check your implementation and identify any errors such as missing reciprocal tags.

Language and Country Codes

• Use the right codes: Hreflang tags use ISO 639-1 (language) and ISO 3166-1 alpha-2 (country/region) codes. Find a list of valid codes for accuracy.
• Example: en-gb targets English speakers in the United Kingdom.

Things to Remember!

• Valid URLs: All links within hreflang tags must point to working pages.
• Hreflang vs. Canonical: Hreflang is for language variations, rel=”canonical” is for duplicate content.
• Tools and Resources: Consider using online tools or plugins to simplify hreflang implementation.

Common hreflang Tag Mistakes to Avoid (and How to Fix Them)

Hreflang can be tricky! Here are some common mistakes to watch out for:

1. No Self-Referencing Hreflang Tags

Example: Let’s say your English “Contact” page is at https://example.com/contact-us/.  Without a self-referencing tag, your code is incomplete.
Correct hreflang tag:

<link rel=”alternate” hreflang=”en” href=”https://example.com/contact-us/” /> 

2. Incorrect Hreflang Links

Example:  You accidentally type http://example.com/about-us instead of  https://example.com/about-us/.  Even a tiny difference breaks the link.
How to fix:  Carefully proofread URLs within your tags. Even small typos can cause issues.

3. Missing Return Tags

Example: Your French “About Us” page links to the English version, but the English page doesn’t link back to the French one.
How to fix: Each linked page should include a tag pointing back to its counterparts.

4. Conflicting Hreflang and rel=”canonical” URLs

Example:  You have two identical product pages, one with a .com and one with .co.uk. You use both hreflang (for targeting UK vs general English) and a canonical tag.
Why it’s an issue:   Conflicting signals confuse search engines.
How to fix: Use hreflang for language/regional differences and the canonical tag for duplicate pages meant in the same language*

A few more common pitfalls:

5. Incorrect Language/Country Codes

Example: Using uk instead of the correct en-gb for British English. Search engines won’t recognize incorrect codes.
How to Fix: Use reference lists for valid hreflang codes.

6. Hreflang Tags on Blocked Pages

Example: If you block a page using robots.txt, but it still has hreflang tags, search engines can get mixed messages.
How to Fix: If a page is blocked, remove its hreflang tags.

Tools for Semi-Automating Hreflang Implementation

If the idea of manually adding hreflang tags seems overwhelming, fear not! There are tools to make the process easier, especially for larger websites. Here’s a quick overview:

Website Plugins

Many popular content management systems (like WordPress) have plugins specifically designed for hreflang implementation. These can often generate and insert the necessary tags for you.

WordPress Plugins

• Hreflang Manager:  A popular and user-friendly option. It helps you easily add and manage hreflang tags for your posts and pages.
• Polylang: A comprehensive multilingual plugin that includes hreflang support.

• Weglot Translate: A premium translation plugin that also handles hreflang tag generation.

Online Hreflang Generators

There are websites that allow you to input your page URLs and language versions, and they’ll generate the correct hreflang code ready for you to copy and paste.

Online Hreflang Generators

Aleyda Solis Hreflang Tags Generator Tool:  A free and straightforward tool to generate your hreflang tags.

• SISTRIX hreflang Generator: Another excellent tool with the added ability to validate existing hreflang tags.

Specialized SEO Tools

Some comprehensive SEO platforms include hreflang management features, letting you visualize your site structure and flag potential errors.

Specialized SEO Tools

• SEMrush: A powerful SEO suite with a  ‘Site Audit’ feature that includes hreflang analysis.
• Ahrefs: Offers a similar ‘Site Audit’ feature, allowing you to identify and fix hreflang errors.

Note:  Even with tools, it’s crucial to understand the basics of hreflang tags to ensure everything is set up correctly.

Conclusion

Don’t let language barriers limit your website’s potential! While hreflang tags might sound complicated, they’re easier to implement than you might think! 

Begin with basic steps like identifying your language versions and choosing where to place your tags (HTML, HTTP, or sitemap).  If you need a helping hand, many tools and plugins can streamline the process.  

Give your website a powerful global voice with hreflang, and watch your reach expand.

Frequently Asked Questions