Defining Alternates

Alternatives of a page can be set where there are other versions of this content that are specifically modified for either different devices or geographic/language targets.

<link rel="alternate" ... href="http://www.example.com" />

The alternate tag tells search engines where to find other versions of this page which may be more appropriate for users on a case-by-case basis. This tag does not have any effect on a user’s browser or experience – it only influences which URL search engines return to users on search result pages.

Language or Territory Alternates

<link rel=“alternate” hreflang="target" href="[alternate url]" />

By adding the ‘hreflang’ variable into an alternate link tag, you are telling search engines where it should send users who prefer pages in the defined language. This can also be used to segment users from different countries who speak the same language, as this includes an optional region code.

The value of the hreflang attribute identifies the language (in ISO 639-1 format) and optionally the region (in ISO 3166-1 Alpha 2 format) of an alternate URL.

All alternate pages must be defined reciprocally. For instance, in a situation where one page has four targets – English, English users in Britain, English users in Australia, and French users, the following code should appear on all pages:

<link rel="alternate" hreflang="en" href="http://www.example.com/page" />
<link rel="alternate" hreflang="en-gb" href="http://www.example.co.uk/page" />
<link rel="alternate" hreflang="en-au" href="http://au.example.com/page" />
<link rel="alternate" hreflang="fr" href="http://www.example.com/fr/page" />

In the case where only hreflang is being implemented, all canonicals should be self-referential.

Device Specific Alternates

When you have device-specific websites on different URLs to the desktop site, you should use the alternate link tag with a media query to tell search crawlers where they should send users on these devices.

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page" />

Contrary to the requirements for hreflang, when implementing alternate tagging with a media query, the alternate tag only needs to be on the desktop site; the device-specific webpage(s) should canonicalise back to the main desktop page.

Using Both Hreflang and a Media Query in one Alternate Tag

It’s possible to use both the hreflang and media query in the same alternate tag, for instance if you want to tell search engines to send British users on a mobile device to a specific page for mobile users in the UK.

<link rel="alternate" media="only screen and (max-width: 640px)" hreflang="en-gb" href="http://m.example.co.uk/page" />

In this case, the mobile page should canonicalise to the British desktop version of this page.

On-Device App Alternates

If you have an app that could be used in place of the webpage (i.e. a mobile user can open a Facebook brand page on either their mobile browser, or from within the Facebook app), you can define the link to your app and search engines (at the time of writing, only Google) will offer users the option to launch a page in your app directly from the search result page.

<link rel="alternate" href="android-app://com.example.android/example/content-uri-here" />

For this to be effective, you must also specify hooks within your app to launch with the appropriate content. More information on this is available at https://developers.google.com/app-indexing/webmasters/details.

Alternative XML Implementation

Both language and device specific alternatives can be defined within the XML sitemap.