Hreflang is an HTML attribute that allows Google and other search engines to recognize localized versions of web pages. If you have sections of your site for a French audience, for example, an hreflang tag helps Google understand that the section should appear in search results on Google.fr, not Google.com.
Hreflang is not complicated. Some site owners are afraid to use it, perhaps due to Google’s stiff explanation. I’m fond of the way a colleague describes it.
Think of an office building with a master directory in the lobby. To be more useful, this directory should be on every floor, not just the lobby, so that no matter the floor, you can always find what’s on the other floors.
Similarly, to understand the language of a web page, Google needs to see this full directory regardless of which language it lands on. The complete identical hreflang code needs to be on each translated version of the page.
Understanding the Code
Here is an example of hreflang code.
<link rel="alternate" href="https://www.website.com/" hreflang="en-us" />
<link rel="alternate" href="https://www.website.com/en-ca/" hreflang="en-ca" />
<link rel="alternate" href="https://www.website.com/de-de/" hreflang="de" />
<link rel="alternate" href="https://www.website.com/fr-ca/" hreflang="fr-ca" />
<link rel="alternate" href="https://www.website.com/fr-fr/" hreflang="fr-fr" />
<link rel="alternate" href="https://www.website.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.website.com/" hreflang="x-default" />
By displaying the language and region code, each line in this block is telling Google what version of the home page should be in which Google search engine.
For example, the first line is telling Google that https://www.website.com should be in the United States’ Google for English speakers.
The second line tells Google that for English speakers in Canada, it should be indexing https://www.website.com/en-ca/.
Line three does not have a language and region code. In this case, “de” represents both searchers who speak German (Deutsch). This is a special case to remember.
The last line is the catchall default. It instructs search bots that “if none of the above represents the audience, then default to https://www.website.com/.” This is the other special case to memorize.
The challenges I encounter with hreflang are usually implementation errors on global ecommerce sites. An example error is where the page is in English, but the code suggests it’s in French. Sometimes coding mistakes go unnoticed until a search optimizer catches them. If you follow the simple rule of representing every region and language you can in one global code block, you can’t go wrong.
Can search engines determine the language and region without hreflang code? Google’s John Mueller says, “If it’s in a different language, usually Google can figure that out without hreflang. Most queries are clearly in one language, so we can send users to that version of the page.”
However, search pros know all too often that Google misses obvious elements. I’ve seen severe indexation problems because of poorly coded or inaccessible hreflang tags.
My advice? Audit your hreflang tags to make sure you are sending the correct signals. Google is not yet completely self-sufficient.