1

We are trying to figure what is the correct hreflang attributes that should be displayed on our pages. We have 4 languages that we will enable for all our pages: English, French, Spanish, German. Our site is setup as below.

  • All English pages will be accessible through https://www.example.com/some-path
  • All French pages will be accessible through https://fr.example.com/some-path
  • All Spanish pages will be accessible through https://es.example.com/some-path
  • All German pages will be accessible through https://de.example.com/some-path

What is the correct format to display the hreflang attributes so that it is crawled correctly by search engines without taking a hit for SEO?

Here is what we tried.

Option 1

<link rel="alternate" hreflang="en" href="example.com/some-path">
<link rel="alternate" hreflang="es-es" href="example.com/some-path">
<link rel="alternate" hreflang="fr-fr" href="example.com/some-path">
<link rel="alternate" hreflang="fr-ca" href="example.com/some-path">
<link rel="alternate" hreflang="de-de" href="example.com/some-path">

Option 2

<link rel="alternate" hreflang="en" href="https://www.example.com/some-path">
<link rel="alternate" hreflang="es-es" href="https://es.example.com/some-path">
<link rel="alternate" hreflang="fr-fr" href="https://fr.example.com/some-path">
<link rel="alternate" hreflang="fr-ca" href="https://fr.example.com/some-path">
<link rel="alternate" hreflang="de-de" href="https://de.example.com/some-path">

Option 3

<link rel="alternate" hreflang="en" href="www.example.com/some-path">
<link rel="alternate" hreflang="es-es" href="www.example.com/es-es/some-path">
<link rel="alternate" hreflang="fr-fr" href="www.example.com/fr-fr/some-path">
<link rel="alternate" hreflang="fr-ca" href="www.example.com/fr-ca/some-path">
<link rel="alternate" hreflang="de-de" href="www.example.com/de-de/some-path">

The goal we are trying to achieve is we want to follow the Supported language/region codes section from webmasters. At some point we will enable more languages such as French for Belgium and French for Canada

Do not specify a country code by itself. Google does not automatically derive the language from the country code. You can specify a language code by itself if you want to simplify your labeling. Adding the country code after the language to restrict the page to a specific region. Examples:

be: Belarusian language, independent of region (not Belgium French)

nl-be: Dutch for Belgium

fr-be: French for Belgium

1

The hreflang tag needs to be a fully qualified URL including a protocol part of some sort.

Take a properly formatted language tag like this one as an example:

<link rel="alternate" hreflang="es-es" href="https://es.example.com/some-path">

Crawlers read that tag literally like this:

There is an alternate version of this page available in the Spanish (ISO 639-1 code es) language targeted towards residents of Spain (ISO 3166-1 Alpha 2 country code -es) at the URL https://es.example.com/some-path.

Using the alternate tag, you are literally telling the crawler the URL where this page's foreign-language counterpart is located. If you copy the URL from the href attribute of the tag and paste it into a fresh browser session, the foreign language page should load in your browser. That's one of the ways to know you have it set up properly.

  • the main reason for having fr-fr is that we wanted to indicate it was French for France. At some point in phase 2 of our translation project, we will want to deploy French for Canada and French for Belgium. – usernameabc Jan 9 at 23:12
  • I think the list I found of valid language codes may be wrong. I'm looking into it more. – Maximillian Laumeister Jan 9 at 23:16
  • I believe you may be looking for ISO Language Code Table. In general, the first part is required, also called lang_code, but the second part is optional. For example for fr-CA, fr would be lang_code and CA would be country/region. – usernameabc Jan 9 at 23:20
  • I updated my answer. I'm sitting here scratching my head, as the first two resources I found were incomplete and misleading. You're totally right, from what I can tell, it's all well and good to target the main region of a language using an ISO 3166-1 Alpha 2 region code. – Maximillian Laumeister Jan 9 at 23:23
  • 1
0

Perhaps you are making this too difficult(?). Start the pages with the typical declaration:

<!DOCTYPE html>
<html lang="en">

or, "fr-fr", or "es", etc. Goole, other search engines, and browsers will not have any question about what language to display.

  • still need to display the correct hreflang attribute or are you saying that having lang=en, lang=fr-fr, and other languages negates the importance of hreflang? – usernameabc Jan 10 at 21:52
  • It seems to me that they do much the same thing (i.e.; provide information to search engines and servers as to which language is contained on the page.) reference: Mozilla hreflang attribute, W3C Declaring language in HMTL – elbrant Jan 11 at 0:52

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.