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: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
- 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:
If we do the same in Spain, we see this version of the page:
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. 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:
- link rel=“alternate”: The link in this tag is an alternate version of this page.
- hreflang=“x”: It’s alternate because it’s in a different language, and that language is x.
- 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.
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.
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.
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="de" 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.
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:- HTML tags
- HTTP headers
- 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.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
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.
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.
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.
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.
Copy everything in column A. Paste it into an XML document.
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.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.
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.https://www.businesscreatorplus.com/hreflang-the-easy-guide-for-beginners/
No comments:
Post a Comment