When you have separate mobile and desktop websites you need to make the relation between these two clear to search engines, to help them understand which website to serve to their users and to prevent duplicate content issues. In this article we’re going to explore how to do this.
When people talk about rel=”alternate” mobile, rel=”alternate” media tag or rel=”alternate” media attribute, they refer to this link relation:
This link relation is used to indicate a relation between a desktop and a mobile website to search engines. If you have a separate desktop and mobile website, and you care about mobile SEO you need to be using the mobile attribute. Currently only Google and Yandex support the use of the mobile attribute.
If a sizable percentage of your visitors is coming from mobile devices it may make sense to optimize their experience with a dedicated mobile website. Note that this is different from having a “responsive website”, With a responsive website there’s a single website with a layout that adjusts itself to the device it’s shown on, whereas with a dedicated mobile website there’s a fully separate website on its own URL.
In this case, where you have separate desktop and mobile websites you want search engines to show the right version of the website to the right user. When users on a desktop are using search engines and your website comes up you want them to end up on your desktop website. If they’re on a mobile device, you want search engines to show your mobile website.
mobile attribute can be implemented in the HTML or through the XML sitemap.
On the desktop page
In the HTML of the desktop page, use the link relation definition to point to the mobile version of the page:
This means that the mobile website should be served when the width of the user’s device is less than 640 pixels.
On the mobile page
In the HTML of the mobile page, point to the desktop version of the page using the canonical URL:
<link rel="canonical" href="http://www.example.com/">
Having the canonical URL there prevents duplicate content. It tells search engines the desktop page should be indexed.
Google also supports the
mobile attribute definition through XML sitemaps.
Please note that it’s still required to have the canonical URL on the mobile page, pointing to the desktop page.
In order for search engines to understand the relation between the desktop and mobile pages, the desktop page needs to have the mobile attribute and the mobile page “confirms” the relationship using the canonical URL.
Each desktop page should only have one mobile counterpart and vice versa.
Avoid having rel=alternate mobile and rel=canonical tags that point to URLs that in turn redirect to other pages. This is confusing for search engines.
Even though it’s not against the specification of the link tag, the general consensus is not to use relative URLs when defining mobile attribute. Relative URLs are more likely to be interpreted wrong by search engines. The same best practice applies to other uses of the link tag: canonical URL,
hreflang attribute and pagination attributes.
Use Google’s Mobile Friendly tool to test the mobile friendliness of your website.
mobile attribute is a signal rather than a directive. Search engines are not required to follow your definition of the mobile attribute, but they usually do.
No, if you have a responsive website you don’t need to use the
mobile attribute. The
mobile attribute is only meant to be used when you have a separate desktop and mobile website on different URLs.
Search engines are still desktop oriented, so your desktop website is leading when search engines determine your website’s relevance for search queries. However, Google has announced this will change somewhere in 2018 for them: your mobile website will be leading. Search engines call this a “mobile-first index”.
Contrary to popular belief, mobile users often don’t want less content and less features so it makes sense to just offer them the same, but using a mobile optimized experience.