Mobile

hallam-mobile-seoSince originally writing this guide to Mobile SEO, Google have announced that they will be expanding their use of mobile-friendliness as a ranking signal, starting April 21st. This change is set to affect mobile searches in all languages worldwide and will have a significant impact on Google’s mobile search results.

Google have been advising webmasters to ensure that their website’s are mobile-friendly for years now, so this update should come as no surprise. Indeed, when I originally created this guide, I highlighted the fact that a few experts were already reporting evidence that pointed towards a mobile-specific Google algorithm update (with associated ranking drops for sites with usability issues).

We also highlighted the fact that Google have been publishing “mobile-friendly” labels in their mobile search results as early as November 2014, another hint that mobile optimisation would eventually have an impact on a website’s search performance:

mobile friendly

Despite these warning signs, Google’s announcement confirming their Mobile-friendly algorithm update has seen webmasters across the globe desperately scrambling to ensure their website’s are mobile-friendly, in time for what’s now being dubbed ‘Mobilegeddon’. This update, if I’m being honest, is a much needed kick up the backside to those webmasters who’ve so far been ignoring mobile usability issues on the website’s they maintain.

Algorithm updates aside, the shift toward mobile search is only going to grow over the next few years. Internet usage on mobile devices exceeded desktop for the first time in July last year, the biggest shift since the internet began. Today, one in every four searches happens on mobile, with 50 percent of mobile searchers using their device to begin the search process and 88% using smartphones to conduct local searches. It’s therefore essential that marketers gain an understanding of how to optimise their website for mobile devices, so that they can attain optimal rankings in mobile search results.

Optimising Your Website For Mobile Users

The first stage in ensuring your website has a chance of ranking on mobile devices is to make sure it is accessible and usable on mobile devices. There are currently 3 options for structuring your website that are deemed acceptable by Google:

  1. Responsive design
  2. Serving dynamic content dependent on device
  3. Mobile specific URLs (a separate mobile website)

Google has stated publicly that they would prefer all sites be responsive websites.  However, Google has also made clear that their algorithm doesn’t favour any of the 3 approaches to serving mobile content – meaning you won’t receive a rankings boost from utilising responsive design at this time. What really matters to Google is that you have a mobile-friendly site that provides a good user experience. Although Google recommend using responsive design, their search results don’t actively favour responsive, dedicated mobile or dynamic serving, as long as a site is set up correctly to serve mobile users.

1. Responsive Web Design

By utilising responsive web design, your website will use the same HTML code on the same URL regardless of device. Responsive sites can render differently (respond) based on the screen size. It is worth noting that responsive design is Google’s recommended design option, and we here at Hallam have utilised responsive design on our own site:

respoonsive-design-hallam

Responsive Design on www.hallaminternet.com

Google’s algorithms will automatically detect this setup if they are allowed to crawl the page and its assets (CSS, JavaScript, and images).

To recap, responsive design serves all devices with the same code that adjusts depending on the screen size.

google-responsive

Image credit: Google Developers

The Meta Viewport Tag

If you want to serve the same content to all devices, you’ll need to signal to browsers that your page will adapt to all devices. You do this by adding a meta tag to the head section of your content:

Hallam Viewport Tag

Hallam Internet Meta Viewport Tag

The meta viewport tag provides the web browser with instructions on how to adjust the dimensions and scaling of the page to fit the width of the device requesting the content.

Benefits Of Responsive Design

A few of the reasons Google specifically recommend using responsive web design are as follows:

  • Responsive design (using one URL for all devices) makes it easier for users to share and link to your content. From an SEO perspective, this ensures all link equity goes to a single URL no matter what the device.
  • Using responsive design means less work for your web developer, who would alternatively need to maintain multiple pages for the same content.
  • Using responsive design eradicates the need to redirect users to a device-specific URL, which would reduce load time.
  • Google claim responsive design ‘saves resources when Googlebot crawls your site’. Essentially, this means that only a single Googlebot needs to crawl your page, rather than multiple times with device specific Googlebot agents to retrieve multiple versions of your content. This can indirectly help Google index more of your site’s content!

 

2. Dynamic Serving

Another option for serving mobile specific content is to utilise dynamic serving. Dynamic serving uses the same URL regardless of device; however it generates different HTML for different device types based on the user’s browser. Essentially, your website will ‘serve’ different HTML (and CSS) on the same URL depending on the user/device requesting the page.

google-dynamic

Image credit: Google Developers

 

If you’re going to be serving different HTML depending on device, Google recommend that the server provides guidance to request that Googlebot’s mobile agent also crawls the page, and thus discovers the mobile content. You can specify the different versions of your pages using the ‘Vary HTTP header’.

The Vary HTTP Header

The Vary HTTP header is part of the server’s response to a request, like this:

vary-agent

By implementing the vary header, you’re telling the browser that your content will vary depending on the user agent that requests the page.

It is much more difficult to maintain a site that utilises dynamic serving compared to creating a responsive site, as your web developer would need to constantly update the list of user agent strings and substrings to match each new browser that could potentially be used to access your content.

 

3. Separate Mobile URLs

If you have a separate mobile site, your website will utilise different code for each device, and display content on separate URLs.  Essentially, each desktop URL should have a mobile equivalent URL serving mobile-specific content.

An example of this would be pages on www.hallaminternet.com for desktop users, and corresponding pages on m.hallaminternet.com for mobile users.

google-separate

Image credit: Google Developers

 

Mobile specific sites work in tandem with the desktop site. If set up correctly, your site will detect the device being used to access your content, and redirect the user to the appropriate page using HTTP redirects.

Signalling your mobile URL’s to Google

Unsurprisingly, maintaining a separate mobile site is more complex than using a responsive template. You need to ensure that you link to your mobile specific URLs to ensure Google and other search engines are aware of which URLs you’d like to use for your mobile specific content.

where's-your-mobile-site

To help Google understand separate mobile and desktop URLs, Google recommend using a number of annotations within the HTML of your content.

Firstly, on the desktop page, you’ll need to add the rel=”alternate” tag, pointing to the corresponding mobile URL. This tag is used to signpost Google to your mobile specific pages.

Secondly, on the mobile page, you’ll need to add a rel=”canonical” tag pointing to the corresponding desktop URL.

By using different URLs to serve the same content in different formats, the annotations outlined above tell Google’s algorithms that the 2 URLs have the same content and should be treated as one entity instead of 2 separate pages. If the the desktop and mobile version of a page aren’t annotated correctly, they will be seen as separate entities by Google, thus both desktop and mobile URLs would be eligible to be shown in the desktop search results. No surprise then that rankings may also be lower than if Google understood their relationship.

When utilising rel=”alternate” and rel=”canonical” markup, you absolutely must map appropriate linkages between the mobile page and the corresponding desktop page. Meaning you should avoid annotating a tonne of mobile pages referring to a single desktop page (such as the homepage).

You should also double check your HTTP redirects between mobile/desktop URLs. Specifically, make sure that desktop pages don’t all redirect to a single, unrelated mobile page (and vice versa).

 

Avoiding Common Mobile SEO Mistakes

No matter which option you choose to serve content to mobile devices, there are numerous mistakes which you need to be aware of, and do your best to avoid.

Ensure Your Mobile Content Is Crawlable

Back in October 2014, Google confirmed that webmasters should allow access to Javascript, CSS and image files used to create your pages. This means that you should not use robots.txt to block search engines from accessing critical files on your site that help render your pages.  If you don’t allow Google to access resources such as CSS, JavaScript, or images, they may not detect that your site content has been created to display and work well on mobile devices. Essentially, if you block these assets in your sites robots.txt file, Google may not detect that the page is mobile-friendly and it may not be displayed to mobile searchers.

Avoid Resources That Could Frustrate Mobile Users

In another tip of the hat to usability, there are various mistakes that can frustrate mobile visitors, such as featuring unplayable videos in mobile content (for example, using  Flash video).

FRUSTRATED MEME

Mobile pages that provide a poor user experience can be demoted in rankings and will display a non-mobile friendly icon in the search results (if they’re indexed):

non-mobile-friendly

Image credit: Search Engine Land

 

Check For Faulty Redirects

If you have separate mobile URLs (m.example.com), you must redirect mobile users on each desktop URL to the page’s corresponding mobile URL.

Google have started sending messages in webmaster tools whenever they detect any of your site’s pages are redirecting smartphone users to the homepage (instead of the corresponding desktop URL). You can view any faulty redirects in the Smartphone Crawl Errors section of Google Webmaster Tools:

url-errors

Slow Mobile URLs

It is hugely important that you make sure your mobile site loads quickly, perhaps even more important than ensuring your desktop load speeds are optimised. Mobile users can become very frustrated if they have to wait a long time to see your content, and thus site speed is used as a ranking factor by Google.

To assess your site speed on mobile devices, use Google’s PageSpeed Insights tool to pinpoint any issues. I’d recommend that you look to address the issues marked as ‘should fix’, as these are most important to improving the speed of your website.

mobile-speed

If you’re still keen on getting that speed score up, you’ll find a barrel load of information on optimising your site speed for mobile on Google’s developer site, here.

TL;DR

  • Starting April 21st, Google will be expanding their use of mobile-friendliness as a ranking signal
  • Google suggest that you can serve mobile and desktop users with either responsive design, dynamic serving or separate mobile URL’s, however they recommend the use of responsive design
  • You should use the Vary HTTP header for pages that serve dynamic content based on the device used to access the content
  • When using separate URLs (a separate mobile specific site) you should redirect users to the appropriate page based on the device they’re using to access your content
  • If you’re using separate mobile URLs you need to set a canonical value referring to the desktop URL, and use the rel=alternate tag on your desktop URLs to specify the corresponding mobile URLs
  • Whatever method you use, look to boost page load speed and improve the general usability of your site by following advice on Google’s Page Speed Insights tool, and the resources listed below

 

Useful Resources

Google Mobile-Friendly Test

Mobile Site Speed Test (Page Speed Insights)

Google Developers Mobile SEO Guide

Google Webmaster Tools > Mobile Search Visibility

Google Analytics > Mobile Device Behaviour

Mobile Phone Emulator

Matt Kersley Responsive Design Tester

Fetch Mobile Googlebot in Webmaster Tools

Leave a Reply