Enjoyed the Read?

Don’t miss our next article!

Hreflang: The Easy Guide for Beginners

Joshua Hardwick
Head of Content @ Ahrefs (or, in plain English, I'm the guy responsible for ensuring that every blog post we publish is EPIC). Founder @ The SEO Project.

Article stats

  • Referring domains 38
  • Organic traffic 493
Data from Content Explorer tool.
    If your website has content in multiple languages, then it’s crucial that you understand and use the hreflang attribute.

    Hreflang is a simple HTML attribute, but it can be difficult to get to grips with.

    Google’s John Mueller described hreflang as “one of the most complex aspects of SEO” because it gets “really hard quickly.”

    But don’t let that put you off. Hreflang isn’t that complicated to understand, and its implementation can be automated to a large extent. (We’ll talk about that later on.)

    Here’s everything you’ll learn in this guide:

    • What the hreflang attribute is
    • Why hreflang matters for SEO
    • What hreflang looks like
    • How to construct a hreflang tag
    • How to implement hreflang
    • How to semi-automate hreflang implementation
    • How to find and fix hreflang issues

    What is hreflang?

    Hreflang is an HTML attribute used to specify the language and geographical targeting of a webpage. If you have multiple versions of the same page in different languages, you can use the hreflang tag to tell search engines like Google about these variations. This helps them to serve the right version to their users.

    For example, if we Google “apple official website” in the US, this is the first result:

    apple us

    If we do the same in Spain, we see this version of the page:

    apple spain

    Hreflang makes this possible.

    Why does hreflang matter for SEO?

    If you’ve spent time translating your content into multiple languages, then you’ll want search engines to show the most appropriate version to their users.

    Both Google and Yandex look at hreflang tags to help do this.

    Sidenote.
    Bing and Baidu don’t look at hreflang tags. They instead use the content-language HTML attribute.

    Catering to the native tongue of search engine users also improves their experience. That often results in fewer people clicking away from your page and back to the search results (i.e., higher dwell time), a lower bounce rate, a higher time on page, etc.—all that other good stuff that we believe to have a positive impact on SEO and rankings.

    But there’s one other reason why hreflang attributes are important: duplicate content.

    Say that you have two versions of your page: one targeting UK readers with British English spellings, and one targeting US readers with American English spellings. These two pages are almost identical and thus, Google may see them as duplicate content.

    Hreflang tags fix that issue and allow Google to understand the relationship between them.

    What does a hreflang tag look like?

    Hreflang tags use simple and consistent syntax:

    <link rel="alternate" hreflang="x" href="https://example.com/alternate-page" />

    Here’s what each part of that code means in plain English:

    1. link rel=“alternate”: The link in this tag is an alternate version of this page.
    2. hreflang=“x”: It’s alternate because it’s in a different language, and that language is x.
    3. href=“https://example.com/alternate-page”: The alternate page can be found at this URL.

    How to construct a hreflang tag

    Constructing a hreflang tag is as simple as looking up the code for your chosen language and filling in the tag. Hreflang supports any two-letter ISO 639–1 language code. (See a full list of them here.)

    Example:

    Say that we wanted to add a hreflang tag from the English version of our blog post about free keyword tools to the German version. This is the hreflang tag we’d end up with:

    <link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" />

    All we did was fill in the language code (de for Germany) and URL.

    Targeting a locale (optional)

    While it’s totally fine to specify a language and leave it there, hreflang tags also support the addition of a region or country. This is also a two-letter code, but this time it’s in the ISO 3166–1 alpha‑2 format (full list). You only need to add this when you wish to target speakers of a particular language in a particular locale. For example:

    English speakers in the UK:

    <link rel="alternate" hreflang="en-gb" href="https://example.com/uk/hello" />

    English speakers in the US:

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

    You can see that the syntax here is: hreflang=“language-country.”

    Why you might need to specify both

    Imagine that you run an ecommerce store selling a single product. Your store ships to both the US and the UK, both of which are predominantly English-speaking countries. However, customers in the US want to buy in dollars whereas customers in the UK want to buy in pounds.

    To solve this problem, you create two versions of your product page. One displays the price in dollars, the other in pounds.

    Pricing aside, these two pages are identical, so you need to use hreflang tags to explain to search engines why the two versions exist.

    hreflang image

    There may also be times when you need to do things the other way around: i.e., target speakers of multiple languages in the same country.

    For example, imagine that you have a blog post about budget road trips in Canada. Canada has two official languages: English and French. 56.9% and 21.3% of Canadians speak English and French respectively, so chances are that you’ll benefit from having two variants of this post.

    The basics of hreflang implementation

    Hreflang tags are reasonably simple to implement, and we’ll discuss three methods for doing that in a moment. But no matter which method you opt for, there are three golden rules that you must remember at all times.

    Rule #1: Hreflang tags are bidirectional

    It’s critical to understand that hreflang tags work both ways. In other words, if you add a hreflang tag to an English page pointing to the Italian variant, then the Italian variant must return the favor with a hreflang tag pointing to the English page.

    how to implement hreflang tags correctly

    This proves to search engines that you have control over both pages, and that they’re each in agreement about their relationship to one another.

    Think of it like setting a relationship status on Facebook. You could easily declare yourself as in a relationship with Jeniffer Aniston or Brad Pitt but unless they do the same, nobody is going to believe you.

    Rule #2: Self-referential hreflang attributes are good practice

    Google states that “each language version must list itself as well as all other language versions.” In plain English, that means that every page should have a self-referential hreflang tag—i.e., one that points back to itself.

    So, if we wanted to add a hreflang tag from an English page (https://example.com/hello) to the Italian version (https://example.com/ciao), that page should have both of the following hreflang tags:

    <link rel="alternate" hreflang="it" href="https://example.com/ciao" />

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

    The first specifies the URL of the alternate Italian version of the page, and the second is a self-referencing tag that points back to the page itself.

    The Italian page would also need both of these hreflang tags.

    how self referential hreflangs work

    Sidenote.
    Google’s John Mueller did recently say that “self referential hreflang is optional — but good practice.” This is at odds with Google’s official recommendation on the matter. So our advice is to use them.

    Rule #3: X‑default tags are recommended, but not mandatory

    The hreflang x‑default tag specifies the default or fallback page that gets shown to users when no other language variant is appropriate. You don’t have to use them, but Google recommends that you do. This is what one looks like:

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

    Basically, instead of using a language-locale code, the x‑default tag is used.

    How to implement hreflang tags

    There are three ways to implement the hreflang attribute:

    1. HTML tags
    2. HTTP headers
    3. Sitemaps

    1. Implementing hreflang tags using HTML

    If you’re new to hreflang, then using basic HTML tags is probably the easiest and quickest way to implement. All you need to do is add any appropriate hreflang tags (as discussed above) in the <head> tag of your web page.

    Example:

    We recently launched the Ahrefs blog in a number of different languages including German, Russian, Chinese, and Spanish. We’re now slowly translating English versions of the posts on our main blog into these languages. One of the posts we’ve already translated into both Chinese and Spanish is our list of the best free keyword research tools.

    Here are the URLs for all three variants:

    English: https://ahrefs.com/blog/free-keyword-research-tools/

    German: https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/

    Chinese: https://ahrefs.com/blog/zh/free-keyword-research-tools/

    To implement hreflang tags correctly for this setup, we’d add this code to the <head> section of each of our pages:

    <link rel="alternate" hreflang="en" href="https://ahrefs.com/blog/free-keyword-research-tools/" />
    <link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" />
    <link rel="alternate" hreflang="zh" href="https://ahrefs.com/blog/zh/free-keyword-research-tools/" />
    <link rel="alternate" hreflang="x-default" href="https://ahrefs.com/blog/free-keyword-research-tools/" />
    

    The issue with this method is that it gets pretty time-consuming and messy very easily.

    Case in point, if we were to also translate our list of free keyword research tools into Spanish, then we’d have to go back and add another hreflang tag to all other variations of that page.

    Using WordPress?

    Use the HREFLANG Tags Lite WordPress plugin to implement HTML hreflang tags in seconds.

    2. Implementing hreflang HTTP headers

    For non-HTML pages such as PDFs, it’s not possible to implement hreflang by placing tags in the <head> of the HTML. Reason being, there is no HTML. In such cases, you can use HTTP headers to specify the relative language of document variants.

    Example

    Imagine that we convert each version (English, Spanish, German) of our free keyword research tools post to PDF.

    Here’s what the HTTP header should look like for each of those files:

    HTTP/1.1 200 OK
    Content-Type: application/pdf
    Link: <https://ahrefs.com/blog/free-keyword-research-tools.pdf>;
    rel="alternate";hreflang="x-default", 
    <https://ahrefs.com/blog/free-keyword-research-tools.pdf>; 
    rel="alternate";hreflang="en", 
    <https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools.pdf>; 
    rel="alternate";hreflang="de", 
    <https://ahrefs.com/blog/zh/free-keyword-research-tools.pdf>; 
    rel="alternate";hreflang="zh"
    

    3. Implementing hreflang in your XML sitemap

    Sitemaps can include relevant markup to specify the hreflang of a page and its variants. For this, you can use the xhtml:link attribute.

    Example

    If we run with our original example (the three HTML variants of our list of free keyword tools), then this is the full markup for our sitemap:

    <url>
      <loc>https://ahrefs.com/blog/free-keyword-research-tools/</loc> 
      <xhtml:link rel="alternate" hreflang="x-default" href="https://ahrefs.com/blog/free-keyword-research-tools/" />
      <xhtml:link rel="alternate" hreflang="en" href="https://ahrefs.com/blog/free-keyword-research-tools/" /> 
      <xhtml:link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" /> 
      <xhtml:link rel="alternate" hreflang="zh" href="https://ahrefs.com/blog/zh/free-keyword-research-tools/" /> 
    </url>
    <url>
      <loc>https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/</loc> 
      <xhtml:link rel="alternate" hreflang="x-default" href="https://ahrefs.com/blog/free-keyword-research-tools/" />
      <xhtml:link rel="alternate" hreflang="en" href="https://ahrefs.com/blog/free-keyword-research-tools/" /> 
      <xhtml:link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" /> 
      <xhtml:link rel="alternate" hreflang="zh" href="https://ahrefs.com/blog/zh/free-keyword-research-tools/" /> 
    </url>
    <url>
      <loc>https://ahrefs.com/blog/zh/free-keyword-research-tools/</loc> 
      <xhtml:link rel="alternate" hreflang="x-default" href="https://ahrefs.com/blog/free-keyword-research-tools/" />
      <xhtml:link rel="alternate" hreflang="en" href="https://ahrefs.com/blog/free-keyword-research-tools/" /> 
      <xhtml:link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" /> 
      <xhtml:link rel="alternate" hreflang="zh" href="https://ahrefs.com/blog/zh/free-keyword-research-tools/" /> 
    </url>
    

    This may look like the least efficient and most nightmarish way to implement hreflang attributes, but often the opposite is true. Reason being, everything is defined in a single file. There’s no need to edit multiple HTML documents each time you make a slight change or delete a page.

    Furthermore, if you’re good with scripts, you can automate this process quite easily.

    How to semi-automate hreflang implementation

    Earlier in this guide, I showed a tweet from Google’s John Mueller where he stated that the hreflang attribute is the most complex part of SEO. Here it is again for good measure:

    His reason for this is that it “gets really hard really quickly.”

    This is definitely true for large multilingual sites. However, given that you’re here reading what is effectively a beginner’s guide to hreflang tags, my guess is that your website isn’t one of a multinational brand with tens of thousands of customers, but rather a small-to-medium-sized site with some multilingual content.

    If that’s the case, then I have good news:

    Managing and implementing your hreflang tags can be automated to a large extent.

    To do it, make a copy of this Google Sheets template, then follow the instructions below.

    1. Choose your languages and localities

    Head over to the “Setup” tab in the Google Sheet. Select the default language (or language-locale) for your website along with up to four other variations.

    For example, if we were setting up this sheet for the Ahrefs blog, we would specify English as our default, then Spanish, German, Russian, and Chinese as the four alternative variations.

    hreflang sheet setup

    2. Paste in your URLs

    Head to the “URLs” tab. You should see up to five columns, each of which will have a header cell corresponding to the languages chosen in the previous step. There is also a column for “x‑default” values.

    hreflang columns

    Paste URLs into the sheet as appropriate.

    For example, if we were doing this for the Ahrefs blog, we would paste any English posts (our primary/default language) in the first column. Then, we would paste the URLs of the relevant translated versions into the other columns.

    hreflang urls

    Do this for all relevant international pages on your website.

    3. Download the hreflang XML sitemap

    Head to the “Results” tab where you will find auto-generated code for an XML sitemap.

    generated sitemap

    Copy everything in column A. Paste it into an XML document.

    xml sitemap

    Upload this to your website, then submit to Google via Search Console.

    4. Log changes in the sheet

    Whenever you add or remove a translated page from your website, log that change in this Google sheet. If you remove a page, just delete that URL. If you add a new translated version of a page to your website, add that to the appropriate column.

    The sheet will regenerate the sitemap code on the fly. You just need to copy/paste it into your sitemap in place of the old code.

    How to audit your site for hreflang issues

    No matter how much you try to stay on top of hreflang attributes, some mistakes will almost always slip through the net. For that reason, it’s crucial to regularly audit your website for hreflang issues and nip them in the bud as soon as possible.

    The easiest way to do that is to regularly crawl your website using Ahrefs’ Site Audit tool.

    https://www.youtube.com/watch?v=LjinWqfGyVE

    Site Audit is a cloud-based crawler that checks your site for hundreds of SEO-related issues, including those related to hreflang.

    Here are the nine hreflang related issues Site Audit may find, and how to fix them:

    1. Self-reference hreflang annotation missing

    This warning triggers when a self-referencing hreflang tag is absent from one or more pages.

    Why it’s an issue

    To reiterate our point from earlier, Google states that “each language version must list itself as well as all other language versions,” so it’s important to use a self-referencing hreflang tag whenever you add a hreflang tag to a web page.

    How to fix

    Review the affected pages, then add a self-referencing hreflang tag to each of them using your chosen method.

    2. Hreflang annotation invalid

    This warning triggers when one or more URLs have hreflang tags with invalid language or locale codes.

    Why it’s an issue

    Search engines ignore any invalid hreflang tags, meaning that they may overlook alternate versions of your page. This is bad for SEO because it means search engines may not be able to show the most appropriate version of your page to users.

    How to fix

    Review the affected page. Check the “Is valid hreflang” column to see the invalid hreflang tags for each page. Remove these in favor of hreflang tags that use valid language or language-location code formats.

    3. Page referenced for more than one language in hreflang

    This warning triggers when one or more URLs are referenced for more than one language in hreflang annotations. For example:

    <link rel="alternate" hreflang="en" href="http://example.com/page.html" />
    <link rel="alternate" hreflang="de" href="http://example.com/page.html" />

    Why it’s an issue

    Each piece of content should only serve one language or language-location. Having two or more contradicting references will confuse search engines, and they may end up ignoring both hreflang attributes.

    How to fix

    Review the affected pages, then inspect the URLs that reference the page in their hreflang attributes for errors. Remove the incorrect hreflang attribute to leave only one correct attribute per language.

    4. Missing reciprocal hreflang (no return-tag)

    This issue triggers when confirmation (return) links are missing for the pages declared in hreflang annotations.

    Why it’s an issue

    Hreflang tags are bidirectional (i.e., if page A links to page B in hreflang annotations, page B must link to page A in return).

    How to fix

    Review the affected pages. Add bidirectional hreflang tags where necessary.

    5. Hreflang to non-canonical

    This issue triggers when one or more page’s reference a non-canonical URL in their hreflang tags.

    Why it’s an issue

    Rel=“alternate” hreflang=“x” will instruct search engines to show the translated (localized) version of a page while rel=canonical attribute will flag that this is not the authoritative (canonical) version. These two attributes contradict each other and confuse search engines.

    How to fix

    Review the affected pages. Modify their hreflang annotations so that they point to canonical URLs only. Or, if you find a page with a rogue canonical tag, remove that from the page to ensure that the hreflang attribute is properly understood and followed by search engines.

    6. Hreflang and HTML lang mismatch

    This issue triggers when there is an inconsistency between the declared hreflang and HTML language attribute for one or more URLs.

    Why it’s an issue

    Google doesn’t use the HTML language attribute but other search engines and browsers do. It’s important to keep these two attributes consistent with one another.

    How to fix

    Review the affected pages. Change the HTML language attribute to ensure consistency with the declared hreflang attribute.

    7. Hreflang to broken page

    This issue triggers when one or more page’s reference broken URLs in their hreflang annotations.

    Why it’s an issue

    Google and other search engines cannot show their users content that doesn’t exist. For that reason, hreflang attributes pointing to dead pages will most likely be overlooked by Google and other search engines.

    How to fix

    Review the affected pages. Change the hreflang annotations to ensure that they link to working pages.

    8. More than one page for same language in hreflang

    This issue is triggered when one or more URLs reference two or more page’s for the same language (or language-location) in their hreflang annotations.

    Why it’s an issue

    Referencing multiple pages for the same language (or language-location) in hreflang annotations only serves to confuse search engines. They will often ignore or misinterpret such directives.

    How to fix

    Review the affected pages. Remove one of the hreflang annotations so that only one page is referenced for each language.

    9. X‑default hreflang annotation missing

    This issue is triggered when there is no x‑default hreflang annotation on the page.

    Why it’s an issue

    Although x‑default hreflang attributes are optional, Google recommends them as a way for you to “control the page when no languages match.” SEO best practice is to use x‑default tags for all hreflang annotations.

    How to fix

    Review the affected pages. Make sure each of them has a “x‑default” hreflang attribute set. Ensure that this points to a page not specific to one language or region.

    …….

    To keep on top of hreflang issues that may arise over time, consider scheduling a daily, weekly or monthly crawl in Ahrefs’ Site Audit tool. You can do that in your project settings.

    crawl scheduling

    New issues will show in the Localization report for the associated project after each scheduled crawl, so make sure to check this periodically.  

    Final thoughts

    Hreflang isn’t that complicated. You just need to stay organized, automate the implementation as much as you can, stay on top of any issues that will inevitably arise, and fix those issues as quickly as possible.

    Any questions? Let me know in the comments or on Twitter.

    Shows how many different websites are linking to this piece of content. As a general rule, the more websites link to you, the higher you rank in Google.

    Shows estimated monthly search traffic to this article according to Ahrefs data. The actual search traffic (as reported in Google Analytics) is usually 3-5 times bigger.



    Article stats

    • Referring domains 38
    • Organic traffic 493
    Data from Content Explorer tool.