What is the Hreflang Attribute?
The tag attribute Hreflang informs search engines of the relationship between various pages written in different languages present on a website via an HTML
or
tag. Google makes use of their attribute to provide matchless regional or language URLs in their search results based on the searcher’s nation and language preferences.
Hreflang is a vital element that must be understood by anyone who is focused on the search engine optimization of a site used internationally.
To close, hreflang is a connection property which lets Google know what language is being applied to a page, thus allowing Google to get the data it requires to present the edition of the page corresponding to the language that an individual is searching in. Essentially, if the hreflang attribute were not present, Google might show someone pages in a language they don’t understand or from a location they don’t live in.
How to use annotations for multi-language sites
Google created the hreflang attribute in December 2011 as a way to link up web pages in different languages, making it handy for creating tailored content for nearby regions. With the tag in effect, search engines will direct visitors to the version that matches their language and geographic location in order to give them the most beneficial experience possible.
We can also use hreflang in a more specific way, if we have contents targeted towards variants of a single language, suitable for instance to a certain region (for example, for the Spanish language we can set hreflang=”es-es” to localize the content in Spain, while hreflang=”es-mx” localizes Mexico) and intercept a more precise target, favoring currency variations, shipping, seasonality and culture.
Hreflang characteristics
It is essential to make something clear: hreflang is an indicator, not an instruction. This implies that the hreflang attribute is not necessarily the determining factor for a page’s ranking, as other elements perceived by the search engine may cause a higher ranking for another variation of the page.
You can put the attribute in the HTML header section, the HTTP header, or the sitemap, but you have to choose just one spot. Google states that each different version of the page should have a bunch of “link” elements in the “head” area, including a link for that page itself so that the links are the same for each version.
It is crucial to do this if we are dealing with multiple versions of a single web page, which are designed for different languages or regions. Google then receives information about the various versions and is able to point those searching to the appropriate page based on the language or geography of the user.
Where Does An Hreflang Tag Go?
Google indicates that there are three different methods available to us for applying the tag, and we only need to select one of them.
As A Link In The <head> Of The Page
The hreflang attribute looks like:
rel=”alternate” href=”(URL)” hreflang=”(language and country code)”
- The rel=”alternate” tag indicates to search engines that there is another page that is similar to the current one being viewed. It is similar to the rel=”canonical” tag.
- The ‘href=’ indicates the address of the page which is chosen to be linked.
- The hreflang attribute is used to indicate the language and region of an alternate page. Determine which web page to display by using language and nation codes.
The tags should abide by ISO 639-1’s two-letter coding system for languages. For example, en (English), es (Spanish), zh (Chinese).
If you are merely switching a page to another language within the same nation, it is not necessary to include a country code. But, when specifying a country code, it needs to abide by the ISO 3166-1 Alpha 2 standard such as “au” for Australia, “us” for the United States, and “sg” for Singapore.
The hreflang tag should always start with the language code, followed by the country code. For example, en-au, es-us, zh-sg.
For example, if the webmaster of example.com wants to show her homepage to English-speaking and Spanish-speaking users in the United States, she would use the following annotations in the of her site’s HTML:
If she wanted to show the homepage to Spanish-speaking users in Venezuela and Mexico, the hreflang annotation would look like:
This hreflang tags generator on aleydasolis.com was utilized to create these tags. Give it a go yourself if you would appreciate some assistance and help to get it right.
In The HTTP Header (If You Publish Non-HTML Files Like PDFs)
Hreflang should be implemented using HTTP headers for both PDFs and other forms of non-HTML content on your website. This has nothing to do with the HTML tags found in the code on the page, but rather is something that is configured in the background of the website.
Yoast states that utilizing HTTP headers can cause an increase in the amount of data needed with each request for your website, potentially decreasing the speed at which a user can browse.
Nevertheless, to identify a PDF document on your site in English and French versions, the link should appear in the HTTP header something like this:
Link:
; rel=”alternate”; hreflang=”en”,
; rel=”alternate”; hreflang=”fr”
On The XML Sitemap
Adding hreflang to a website can be done by utilizing the sitemap.xml file. There is an excellent Google support article that gives very specific directions.
Common Mistakes And Troubleshooting
Typos And Underscores
It is acknowledged in both of the above documents that basic errors in language and nation code occur often on global websites that are trying to incorporate hreflang.
Minor mistakes, like employing an improper country code, making use of a country code but leaving out language code, or even substituting an underscore (_) rather than a hyphen (-) can make your hreflang attribute ineffective. Despite a tweet in 2017 from Google Webmaster Trends Analyst Gary Illyes implying that it is alright to make mistakes when it comes to this, the likelihood of Google having any difficulty with it is theoretically low.
It is possible that Google is astute enough to be able to understand when GB and UK are used interchangeably as country codes; yet, it is best to use the ISO 639-1 format to demonstrate language. If you employ an incorrect acronym (such as eng instead of en, for instance), Google will very likely take no notice of it, and your code may not end up functioning correctly.
Not Using Self-Referencing Hreflangs
Including a link that references itself with an hreflang tag is another frequent mistake. This implies having an hreflang label identifying both the language and country of the page in question and pointing to the other pages.
Neglecting Bing
If you need your international website to function on Bing, then it’s necessary to adhere to their particular requirements. There is a Bing Webmasters article providing instructions on informing Bing of a website’s language and country code, however, the recommended method of using a http-equiv=”content-language” meta tag is outdated due to HTML5 standards.
Rather than relying on general beliefs, it is best to identify the language of a page by using the “lang=” element, as well as to indicate who the content was specifically intended for by adding a “Content-Language” designation.
Some Things To Know Before Implementing Hreflangs
Google Could Ignore You
Google considers hreflang annotations to be indications, not orders. In other words, Google may ignore them. It should work, but there is no absolute assurance.
Consider A Language Code With No Country Code
Users might be misdirected in other ways as well.
If you specify a URL for a particular language and certain countries (for example, en-us), but you don’t say a URL for someone who speaks the same language but lives in a country that you haven’t added a code for (for example, an English speaker in Italy), Google will try to make the most accurate guess.
Meaning it could get it wrong.
Think about incorporating a basic label with a particular language signifier but nothing related to a region. This tag “hreflang=”en” (which is generic) will assist in telling an English speaker living in Italy which version of a webpage should be loaded.
When it’s time to put hreflang tags into practice, there are some other subtleties to consider. This video from Google has been around for a while, but it’s still useful for seeing the pitfalls you may face. It is definitely worth a watch.
When to use hreflang
Google suggests three particular scenarios where it is preferable to use the alternative page system for specific languages or geographical areas:
- Pages with user-generated contents, such as forums, if we keep the main content in one language and translate only the template (navigation bar or footer).
- Similar contents in a single language but intended for areas with local variations, such as an English site for users in the United States, Great Britain and Ireland.
- Site with contents fully translated into different languages, such as each page presenting Italian, German and English versions.
Evidently, the utilization of this element is very beneficial for multilingual SEO since it accentuates the relationship between websites that have been altered into dissimilar languages and mostly empowers an improved targeting of organic traffic as Google will present a version of the page that fits the geographic location of the individual.
Additionally, this provides a beneficial user experience since, for example, a person from Australia can purchase from an English website using the Australian dollar as their default currency, and someone from Canton Ticino will encounter a page in Italian when visiting a German website.
Best practices to implement hreflang
To reach our objectives, it is necessary to abide by an outlined set of instructions and remain within established limitations. In particular:
- The alternate hreflang rel must be present on all pages and specify all versions, including the one of the page itself. We cannot limit ourselves to the home page.
- Avoid the absence of return links: if an X page refers to page Y, page Y must refer to X page.
- Do not refer to pages with HTTP status code 404 or 301/302.
- Check the language and geographical area codes: the language codes are in ISO 639-1 format and the geographical area codes in ISO 3166-1 Alpha 2.
- The indication of the geographical area in hreflang is optional, but it is not possible to use only the latter without specifying the language.
- If there is a canonical rel on the page, it must be self-referential and report itself as a canon. Never point the canonical toward another page, unless you want to block it. Also, you cannot combine hreflang and canonical attributes in a single tag.
Hreflang, a complex topic to simplify
Motoko Hunt attempted to demonstrate in her article that the hreflang attribute itself is not a challenging concept, but that it is the complex web infrastructure which can make it an intriguing and sometimes difficult process.
The last tip is to begin with only a few tongues or a limited selection of pages, and explore the options, evaluating how they operate.
When utilized in the right way, we can recognize its worth, as hreflang comes with a great opportunity to allocate resources adequately for wide-reaching implementation.
John Mueller, as mentioned in a Reddit thread, discussed the concept of simplification. He suggested that when implementing the hreflang attribute, the first thing to assess is if there is an actual need for this attribute and if there may be simpler, fast solutions like a language/country pop-up shown on the home page.
Specifically, according to Google, using hreflang is especially important if the website in question is strongly focused on local reaches that have a significant impact on business and customers (e.g., local currency, availability of product or delivery). It is always crucial to make sure there are no underlying issues that might cause visitors to accidentally land on the wrong version of the site. If Google has already provided the accurate versions of web pages on its own, there is no benefit to including the hreflang attribute and we can then use the time to focus on other areas that need to be optimized.
Leave a Reply