Consider how difficult it is for your company to function globally: you have offices all over the globe. Executives from various markets must communicate with one another across cultures, languages, and time zones. You must create original content for each market and translate current information, such as knowledge bases, resources, blog articles, and FAQs.
More significantly, you must deliver the appropriate content to the appropriate clients in the appropriate locations. How? The hreflang attribute.
The hreflang tag is the icing on top of the intricate worldwide sundae, as Google's John Mueller once defined it as "one of the most challenging components of international SEO."
What is the meaning of hreflang?
Hreflang
Hreflang is an HTML attribute element that indicates each URL's language and geographic area.
For example, the hreflang tag ensures that your Australian customers see the Australian English version of your website rather than the US English or German version. (This only applies to pages that have the same material in different languages; it does not apply to pages that have content that is unique to a particular country.)
Google and Yandex both actively use href language tags to decide which version of translated content to present to their users. The content-language HTML attribute is used by Baidu and Bing. So, before we continue, here's a nice reminder to familiarise yourself with the most prominent search engine(s) in your target markets. (Google isn't always to blame!)
Outside of China, Google's massive 81.5 percent global market share puts the search engine we all know and love at the top of your list of concerns. In Russia, Yandex is the most popular search engine, whereas in China, Baidu is the most popular. In Japan, Yahoo is the most popular. It's quite likely that you'll need both types of tags in the end.
It's worth noting that Google won't employ language-specific subdomains to offer the appropriate content versions to your consumers automatically. As a result, the most effective way to tell Google which language version to show your consumers is to utilise hreflang annotations.
SEO impact of Hreflang
Let's begin with the most evident hreflang SEO issue: the user experience. When you only speak English, imagine landing on a page written in Spanish. If you don't tell Google which language versions to provide, that's exactly what could happen to your clients. As a result, your bounce rate will skyrocket, and people will be less likely to click on your SERP results.
hreflang clusters are a less-obvious technical SEO consequence of hreflang tags. Because it's not enough to simply drop the tag on the page, hreflang implementation can be logistically challenging. Hreflang clusters are created by properly implemented hreflang annotations: a collection of equivalent pages for other languages or areas.
Each urlset has a set of ranking signals in common. As a result, if a page is mistakenly left out of its cluster, it will not benefit from the authority of the other pages. A return tag error will also occur if a page does not have a reciprocal reference.
How about stuff that is duplicated?
The good news is that Google does not consider translated pages to be duplicate content. Search engines will consider duplicate material if you have multiple English language pages for the United States, Australia, and the United Kingdom. The hreflang tag prevents search engines from selecting the incorrect version.
How do I add hreflang tags to my website?
Let's clear up the hreflang canonical issue before we talk about how to use hreflang tags.
Canonical and hreflang are two different things.
The hreflang attribute, like canonicalization, assists Google in determining the relationship between pages. There are, however, significant important distinctions between canonical and hreflang tags.
Canonical tags designate the "preferred" page as the source or priority version of duplicate pages. When you use canonical urls to set a preferred page, the other versions aren't indexed or served in the SERPs. They're just part of the site's core UX functionality. Product page URLs with parameters are a nice illustration of this.
Hreflang tags, on the other hand, inform search engines that you have multiple language versions of the same page and that they should provide the most relevant one based on the user's location and language. Each page in your hreflang cluster is indexed in this instance, and it can be served in the search results. The search engine, on the other hand, will choose the one that is tagged for the correct language and area.
That's why the two tags are so dissimilar in terms of implementation. The direction of a canonical is quite binary: this is our chosen page, and this is not. The hreflang tag provides a considerably more extensive set of instructions: all of these pages are translations or location-based equivalents of one another. Use this one, and this one, and this one, and this one...
You can't automate hreflang tags as quickly as canonicals because of the extra layer of complexity. Furthermore, you should never use the two terms interchangeably.
hreflang values for X-default
The following is the syntax for hreflang tags:
a link with the rel="alternate" attribute hreflang="x" href="https://www.example.com/new-page" /> hreflang="x" href="https://www.example.com/new-page" />
What this means is that the linked page is a translated version of our current page in language x.
The x will be replaced with the two-letter ISO 639-1 code for the country/language you desire. A complete list of ISO 639-1 language and region codes may be found here.
Setting a "x-default" page is strongly recommended by Google. This sets up a single URL as the default version, which doesn't target a specific area or language for visitors who aren't from the locations you chose.
How do I make a hreflang tag?
It's as simple as replacing that x with your country code to create a hreflang tag for translated web pages. It would look like this in French if we wanted to translate our sample link:
a link with the rel="alternate" attribute hreflang="fr" href="https://example.com/french-version" /> hreflang="fr" href="https://example.com/french-version" />
You'll use a two-letter code in the ISO 3166-1 alpha-2 format to target a locale instead of (or in addition to) the language. Let's have a look at some of the different tags we may use to target English speakers in different parts of the world.
- EN-UK: rel="alternate" link hreflang=“en-gb” href="https://example.com/uk/our-page" /> href="https://example.com/uk/our-page" />
- EN-US: rel="alternate" link hreflang=“en-us” href="https://example.com/us/our-page" /> href="https://example.com/us/our-page" />
- EN-CA: rel="alternate" link hreflang=“en-ca” href="https://example.com/ca/our-page" /> href="https://example.com/ca/our-page" />
- EN-AU: rel="alternate" link hreflang=“en-au” href="https://example.com/au/our-page" /> href="https://example.com/au/our-page" />
It's worth noting that this link employs both ISO codes: the first is used to set the language, and the second is used to point the search engine to the right version of the page.
Where should hreflang tags be placed?
Href tags can be set in three ways: HTML, HTTP, and XML. The HTML sitemap approach is the simplest, while the XML sitemap method is more scalable.
HTML
If you only have one other market to consider (say, Canada and Germany), the sole implementation-related point to remember is that hreflang annotations are bidirectional. That means they can only work in groups of two. If a tag on the English version of a page points to the German version, the tags on the German version must also point to the English version in order for the tags to count. This demonstrates to Google:
- Your pages have a symbiotic interaction with one another.
- Both are under your control.
And what if you're spread throughout the globe? Let the good times roll! This is the point where you'll need to create your hreflang clusters for each group of pages.
The good news is that your translated pages should already be set up at this point. You should also keep a list of them so you don't have to guess at country codes. Instead, categorise your URLs by cluster in a spreadsheet, then assign each one a country code and generate a hreflang link for it. After that, you'll copy and paste all of the link components from the cluster into the head of each page in your cluster.
Your page must also mention itself, so don't remove the link to the French version of the main page from your cluster if you're already on it. This makes the entire tag easier to implement because it's just a matter of copying and pasting.
THIS IS HOW IT APPEARS IN ACTION.
Let's imagine we want our "hello" page to render correctly in the following countries: the United States, Germany, France, Russia, Spain, and China. (Keep in mind that you'll need to add the Baidu-supported language codes for China.) However, a large proportion of Chinese clients will use Google as well, so use both).
This is how our hreflang cluster would look:
HTTP
You won't be able to write your directive in HTML for non-HTML documents (like pdfs). In this situation, the http header would be used. If you're converting a pdf from English to French, include the following in the http header of each file: http://example.com/blog/englishversion.pdf https://example.com/blog/frenchversion.pdf> rel="alternate" hreflang="en"> hreflang="fr" rel="alternate">
Sitemap in XML
Finally, you may use the xhtml:link property to declare your hreflang clusters directly in your sitemap. That would look like this if we used the six countries we specified for our html example:
For the remaining four country pages, repeat the process.
The end outcome may appear to be a monstrosity. However, because you can work with everything in one file rather than page by page, it's actually easier and far more scalable to build than HTML.
Typical hreflang difficulties
Even though you can easily automate the development of hreflang tags, problems can arise. Here are a few common blunders:
Human blunder
Human mistake is the most prevalent reason of hreflang failure, and it's not easy to identify or troubleshoot. Perhaps a page has changed and you've linked to a 404 page. Perhaps you misspelt a URL or failed to close a tag. It occurs!
The Solution: To minimise this risk, automate as much as possible. Also, crawl your site on a regular basis to look for broken links or 404s. Consider using an XML sitemap instead of an HTML sitemap. Instead of altering the HTML on individual sites, you may simply change your sitemap and upload a clean version of the file if you run into a lot of problems.
Tag: Improper
The search engines will simply overlook that version of the page if you misspell a tag. That implies it'll most likely go to your default page instead, delivering a German site to your German speakers.
The solution is simple: Many site spiders, such as the one from Ahrefs, will check to see if your hreflang tags are legitimate. Crawl, crawl, crawl will become a recurring theme in all of our troubleshooting tips. It's simple to fix the problem once your crawler discovers it.
Multiple languages are referenced on the same page.
Your "hello" pages in English and French should look like this:
/> link rel="alternate" hreflang="en" href="https://example.com/hello" /> link rel="alternate" hreflang="fr" href="https://example.com/salut" /> link rel="alternate" hreflang="fr" href="https://example.com/s
You have an issue if they look like this:
href="https://example.com/hello" link rel="alternate" hreflang="en" href="https://example.com/hello" />
href="https://example.com/hello" link rel="alternate" hreflang="fr" href="https://example.com/hello" />
The solution is simple: Conduct a web crawl to find and rectify issues.
Hreflang refers to URLs that aren't canonical.
It's astonishingly easy to forget to include a trailing slash, to omit the www when you shouldn't, or to fail to link to the genuine canonical version of a page.
The solution is simple: A web crawl will reveal the problem, allowing you to fix it. However, prevention is crucial in this situation. This begins at the very beginning of your automation system. Know what your normal canonical link should look like, and use that as a guideline as you build out your system.
Additional problems are all variants on the same theme: they will be detected by a web scan, and prevention is vital.
Have you forgotten to tag self-references? Is there a reciprocal tag missing? Is there a discrepancy between the sitemap and the HTML? Look at the overall topic.
Finally, hreflang tags are simple to comprehend. The implementation is what gives them their reputation for complexity. Building an automation-based system that works for you and your team, on the other hand, will make implementation a breeze. Then crawl, crawl, crawl some more, correct any mistakes, and continue. Soon, your clients all over the world will be reading information that is tailored to their needs.