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!
Thanks fpor the article, Eneko!
What I dont understand is:
a) each website should have a selfreference in its hreflang (which is, in ur example, NOT the case for mobile)
b) Hreflangs should always point viceversa (which is not the case in ur example either: m points in its hreflang to desktop, but of couase, desktop doesnt point back)
Maybe u should ONLY use a canonical with the monbile version?
Hi Nora!
Thanks for your comment, I´ll try to explain:
In this case…
a) Self referencing means refering the own CANONICAL page, not the own URL.
b) Viceversa matching means pointing each other´s CANONICAL page, not each other´s URL.
…because we start from the fact that we do need the canonical tag in the mobile version (since we want to make it easier for Google to understand our only website, which is composed by two versions – mobile and desktop -).
So, first of all, it comes the need to use the canonical tagging for mobile version.
Once we got that, the hreflang tagging needs to be as clear as possible for Google, so the right way is referencing and matching the canonical ones.
I understand what you mean when saying “maybe u should only use a canonical with mobile version” but, as long as Google doesn´t adopt an official position, this seems to be the clearest and the cleanest.
And, well, this is close to an official position anyway:
https://plus.google.com/+JohnMueller/posts/17fbv5phpks
🙂
Hi, this is a rare article, because most I’ve read don’t have the mobile version as a non canonical. With Google now being ‘mobile first’ are you 100% positive this is the way to go for PC sites with seperate Mobile sites? You state the PC site is the canonical and the Mobile points to the PC site. I would think in this ‘mobile first’ world that Google supports, shouldn’t the Mobile be canonical and the PC site point to the mobile? Thanks for clearing this issue up.