Hreflang for websites with mobile version

The Hreflang tags are are a type of tag established by Google in 2011 which should be used in websites with similar content in differing languages, in such a way that the search engines can better understand the language equivalent between the sites counterparts.

One of the most common SEO errors that we are currently finding has to do with the incorrect implementation of these tags.

Generally these are obvious errors and easily solved, following the logic and the official Google page, but sometimes there are cases that Google itself does not get enough involved.

Canonical + Alternate Hreflang

There exists a false belief relating to Hreflang: “There has to be a tag pointing to the page we find ourselves on”. In truth, this is not the case, what should be in place is a tag pointing to the official page where the “official” content is found for the language on which we find ourselves.

Difficult to understand? Not so much. Imagine we find ourselves on the page

domain.com/en/page1-christmas

…which is the christmas version (seasonal campaign) of a page whose “usual” URL is:

domain.com/en/page1

The hreflang tag (for this language) should be such that:

<link rel=”alternate” hreflang=”en” href=”http://domain.com/en/page1” />

…and also the “href” should coincide with the corresponding canonical reference, that will be:

<link rel=”canonical” href=”http://domain.com/en/page1” />

This is something that John Mueller showed some time ago (contravening previous other Google forums), who is becoming the most similar to a Matt Cutts substitute who has left Google so that us SEO do not feel like orphans.

Hreflang tags for mobile

Nowadays it is most common to find ourselves with responsive layouts where there is not a huge problem to manage URLs: however, those sites that have a version that is exclusively for mobiles (e.g. m.domain.com) will have to pull their socks up to implement a more conscientious tag.
Let’s get straight to the point, because the code itself does not leave room for doubt nor any further explanations. This would be the correct tag for a bilingual website with a mobile version (en,sp):

domain.com/en/page1
<link rel=”canonical” href=”http://domain.com/en/page1” />  (optional, but recommended)

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.domain.com/en/page1” />
<link rel=”alternate” media=”handheld” href=”http://m.domain.com/en/page1” />

<link rel=”alternate” hreflang=”en” href=”http://domain.com/en/page1” />
<link rel=”alternate” hreflang=”es” href=”http://domain.com/es/page1” />

m.domain.com/en/page1
<link rel=”canonical” href=”http://domain.com/en/page1” />

<link rel=”alternate” hreflang=”en” href=”http://domain.com/en/page1” />
<link rel=”alternate” hreflang=”es” href=”http://domain.com/es/page1” />

domain.com/es/page1
<link rel=”canonical” href=”http://domain.com/es/page1” />  (optional, but recommended)

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.domain.com/es/page1” />
<link rel=”alternate” media=”handheld” href=”http://m.domain.com/es/page1” />

<link rel=”alternate” hreflang=”en” href=”http://domain.com/en/page1” />
<link rel=”alternate” hreflang=”es” href=”http://domain.com/es/page1” />

m.domain.com/es/page1
<link rel=”canonical” href=”http://domain.com/es/page1” />

<link rel=”alternate” hreflang=”en” href=”http://domain.com/en/page1” />
<link rel=”alternate” hreflang=”es” href=”http://domain.com/es/page1” />

The attribute “media” is included following Google’s SEO recommendations for mobiles in such a way as the search engine knows which are the mobile versions. An additional tag can be included with “media” for low range phones, if an ad-hoc version is found (nowadays this would not be common).

Finally we leave you with this this image taken from a German SEO blog which allows you to understand even more clearly how this kind of implementation is carried out:

So there’s no excuse to not do it well. If we implement in this way, Google can interpret Hreflang correctly and understand what content to show for each language or region. Go for it!