As mobile usage continues to skyrocket and search engines increase their focus on mobile-friendly ranking, you’ve probably noticed that we’ve been working to bring you even more ways to ensure that your website is optimized for mobile devices. And while Google and many of us in the SEO world strongly encourage implementing responsive design where possible to improve both search performance and user experience, we realize that in some cases this isn’t always an option.
For some businesses, it still makes sense to create separate, corresponding URLs in the subdomain for mobile users and desktop users. This way you can still ensure that the content users access is best formatted for the screen they are using and that your content is search engine optimized. If this is the case, you want to be sure that Google and other search engines understand the relationship between your desktop and mobile pages using the rel= “alternate” tag in your sites code, to ensure that both are indexed properly and offer a great experience for visitors regardless of the device they use. To help you properly set up this configuration, I’ve created this guide to rel=”alternate” for mobile subdomain optimization.
Why is using “rel=alternate” tags important?
Making sure that your desktop and mobile pages redirect both users and search engines to the correct content may seem fairly straightforward, but many sites fail to do so, or don’t implement the redirects properly. By not correctly establishing the relationship between the pages, Google and other search engines will see them and treat them as separate entities, which is likely to lower the ranking of both, rather then having them work together.
And from a users standpoint, if a person lands on the desktop version of a page while using a mobile device, or vice versa, they aren’t likely to have a great experience and may not stick around, which, of course, will affect rankings as well as conversions and sales. So, now that we’re clear on the importance of rel=”alternate” tags, let’s dive into how to correctly configure them.
How to annotate desktop and mobile URLs
If you have already created separate mobile that URLs that correspond to the pages on your desktop site, or plan to do so now, you want to be sure that those pages are properly annotated to establish their relationship to each other. To ensure that their algorithms understand these relationships, Google recommends adding the following annotations:
- Add a special link rel=”alternate” tag on the desktop page, which points to the corresponding mobile URL. This enables Googlebot to easily find your site’s mobile pages in your subdomain.
- Add a link rel=”canonical” tag on the mobile page, which points to the corresponding desktop URL. This helps to consolidate indexing and ranking signals (including external links) to the desktop version, and avoids confusion about duplicate content.
Google supports two methods to include this annotation: both in the HTML of the pages themselves and in sitemaps. It’s important to note that Google recommends directing tablet users to the desktop version of your pages, instead of the mobile, as data has shown that tablet users prefer that option.
By establishing this two-way annotation (also known as bi-directional), you will help Googlebot to more easily find your content, and enable Google’s algorithms to easily understand the relationship between the two pages and handle them appropriately. As I mentioned before this will help optimize your mobile pages for indexing and ranks, and will also create a much more streamlined and pleasant mobile experience for your visitors. Creating the best possible user experience is not only a smart business move to increase the likelihood of conversions and sales in this new mobile-friendly era, but also will continue to send more positive signals to search engines as your retain more visitors.
How to avoid common mistakes when using rel=”alternate” tags
Adding the rel=”alternate” and re=”canonical” tags to your HTML and sitemap will take time, but it’s important to set them up properly and avoid the common mistakes for this configuration. Keep these tips in mind when optimizing your mobile content:
- Keep a 1-to-1 ratio: Be sure to maintain a direct 1-to-1 ratio between the mobile page and the corresponding desktop page. Annotating multiple desktop pages to one mobile page (or vice versa) will confuse both Google and your visitors.
- Don’t redirect mobile users to your home page: If you don’t have a corresponding mobile page for a particular page that a mobile user is trying to access, let them access the desktop version. The content may not be ideally optimized for them, but it’s a better experience than being redirected to your homepage, which is not what they’re looking for, or not being able to access the page at all.
- Minimize page load times: Be sure that the mobile pages that users are redirected to offer as quick of a load time as possible to create a quick and smooth experience for the visitor.
- Avoid overlays and pop-ups: Often times businesses will try to immediately direct mobile visitors to download their app with overlays and pop-ups before they even see the mobile page. But these roadblocks can slow visitors down and even drive them away, so it is recommended to include both the content the searcher is looking for on the mobile page, along with a (closeable) prompt to download the app.
Automatic redirects
Now that you’ve configured your pages to correctly signal to search engines to understand the relationship between your mobile and desktop pages, you’ll likely want to set up automatic redirects to send users to the URL that best serves them. To help redirect users and Googlebot user agents appropriately, Google recommends the following two redirection options:
- HTTP redirects: Commonly used to redirect visitors to device-specific URLs based on the HTTP request headers. Be sure to maintain consistency by specifying the alternate URL in the page’s link rel=”alternate” or sitemap. As far as Google is concerned, it doesn’t matter if you use a 301 or 302 redirect, though they recommend 302 whenever possible.
- JavaScript redirect: If HTTP redirects are too difficult, you can use JavaScript to redirect users to the appropriate URLs. Just remember that this can dramatically slow down the redirect time and potentially cause you to lose visitors.
Unidirectional redirects or Bidirectional redirects
There are two different approaches commonly used to redirect users to the correct desktop or mobile URL: bidirectional and unidirectional, both of which are acceptable to Google. With unidirectional redirects, a website will only redirect mobile users visiting the desktop page to the mobile version. While bidirectional redirects will redirect both mobile and desktop users respectively to the mobile and desktop pages. While both work as far as Google is concerned, it is generally recommended to use bidirectional to ensure the greatest flexibility and sharing potential for your content. That way if a mobile user shares the content they found and a desktop user clicks on the content, they will be directed to the corresponding desktop page, instead of just the mobile page (as might happen with unidirectional), which would be a less ideal experience.
And finally, it’s important to give mobile users the option to visit the desktop version of the page they are visiting if they want, especially if there are additional features available on the desktop version that aren’t on the mobile page.
Conclusion
There’s no question, at this stage in the game, it’s vital that you offer your visitors the best possible experience when they visit your website regardless of what device they are using. With so many more people relying on mobile devices everyday, you can’t afford not to have a mobile-friendly site, both for customer retention and for SEO. For those websites that haven’t yet implemented responsive design or will require a complicated overhaul to do so, using rel=”alternate” to optimize your mobile subdomain is the ideal option, and should be implemented as soon as possible.
Once in place, you should begin to consider how best to make the transition to responsive design, as it is quickly becoming an industry standard that would benefit your business tremendously both from an SEO standpoint and to improve user experience.
What has your experience been with mobile optimized (or non-optimized sites) both personally and professionally? Let us know in the comment section below.
Resources
- “Separate URLS” (Google Developers)
- “The definitive guide to technical mobile SEO” (Search Engine Land)
- “When responsive design is not an option: a checklist for optimizing your mobile site” (Moz Blog)
- “Google’s changing recommendations on SEO for mobile” (Smart Insights)
