Chapter 2

The Mobile-Friendly Label

For mobile searches, the Mobile Friendly update means SERPs will start to favor webpages that have the mobile-friendly label, and even any apps the search engine deems relevant to the user's query. What this basically means is that pages with the mobile-friendly label are much more likely to rank higher up in SERPs, and even on a human level, users will be inclined to look for answers or content on a page that renders well on their mobile device.

Mobile friendly label

Bing has added their own mobile-friendly label, and have already announced that they will roll out their own mobile ranking algorithm. So if you're tracking Bing rankings, it might be a sign this search engine is upping the mobile ante on their end as well.

The do's and don'ts of the mobile-friendly label

Add the meta viewport tag to signal bots that your website is mobile friendly

One of your main concerns with optimizing for mobile is sizing content to viewport. These Google recommendations help you set up the meta viewport tag so that no matter what browser or device visitors use to access your site, they only have to scroll vertically, not horizontally.

The meta viewport tag helps structure your HTML so that when users access your site from various devices, the site's features are scaled to fit the size of the screen. By adding the meta viewport tag at the beginning of your HTML code, you improve user experience and make sure they don't have to zoom in and out to read content or view an image completely.

Things to do:
  • Get detailed steps on configuring the meta viewport tag from this article on the Google Developers website.
  • Check out the chapters at the left of the page to learn about various other optimization aspects, such as optimizing CSS delivery, minifying resources, and more.

Watch out for faulty redirects and internal linking

When you opt for a separate mobile site (separate URLs), you need to be very careful about setting up redirects, so Google knows which pages of the mobile site are the equivalent of pages on the desktop site.

So if a user would like to access your products page from a mobile phone, a faulty mobile redirect might send them to the index page, instead of the mobile version of the products page. Google has more advice on that here, and the article shows you how to make sure the redirects you apply run the right way.

Things to do:

With separate mobile sites, make sure you redirect users to the appropriate page when they access the site from a mobile device: desktop homepage to mobile homepage, desktop products page to mobile products page, and so on.

Separate mobile sites
Source: developers.google.com

If a user is visiting a desktop page from a mobile device, and there is an equivalent mobile page at a different URL, redirect the user to that page instead of serving them a 404. Mobile-only 404s should be avoided because denying users content that actually exists makes for poor UX.

Redirect mobile
Source: developers.google.com

Internal linking has to stay within the same platform, and applying it the wrong way is a pretty serious mistake. An example would be having a page on your desktop site link to a page on the mobile site, or vice-versa. This kind of error could not only lead to bad UX, but might affect your rankings as well, and confuse bots when crawling your sites.

Don't block page resources

For mobile sites, it is important to allow Googlebot to crawl page resources like JavaScript, CSS and images too, so it performs a better assessment of the pages and their contents. As such, make sure you don't block these resources in your robots.txt file.

Avoid using Flash

Most mobile devices can't play Flash animations, and Google recommends using HTML5 instead. Unplayable content is one of the most common mistakes Google sees and you should avoid it if you want a mobile friendly website that offers a full experience and allows users to enjoy and value all the content you provide.

Page speed is even more important for mobile ranking

While there has been talk that page speed may no longer be a ranking factor for desktop sites, or at least not one with a lot of weight, it is very much a fact that it's essential for good UX. Google may not rank you higher for fast page speed, but it may demote you for high bounce rate.

More importantly, page speed is a ranking factor for mobile sites, and has been for a long time. It is also more relevant for mobile users, who have less patience with load time, and will bounce back to the link list even quicker.

Things to do:
  • Check out the Page Speed Insights Rules from Google and apply the advice given there. These practices are advisable for both desktop and mobile sites, so if there's anything you missed so far, try going through them now.
  • After you're done with the implementation, check each page with the Page Speed Insights Tool. This website speed test tool works on a page-by-page basis, so you should go through all pages on your website, or at least those that bring in more traffic if there are a lot of them.
  • If you want everything to be pitch-perfect and don't mind the extra work, consider this actionable article on keeping your site fast for mobile-friendly by Billy Hoffman, which goes into depth about various practices that will optimize page load times and provide good user experience.
  • In order to double-check load time on your website, you could try another page speed test as well, though Google's is pretty accurate. It's important to test website speed for both desktop and mobile in order to ensure this detail won't affect your rankings.

Optimize images to increase page speed and improve UX

One of the major culprits of slow page load time, besides slow connectivity, is a poorly optimized image. For an eCommerce site looking to attract users to their products pages, this can have disastrous effects.

Image mobile optimization can be a bit difficult, especially if you've opted for responsive design, and the single code per page will need to contain different-sized images for each type of device.

Things to do:
  • There are several methods of compressing and optimizing images, as shown by this article on image optimization from the Google Developers website. Familiarize yourself with them so you can be aware of all the available options.
  • Work closely with your developers and choose the image optimization technique that best suits the type of mobile site you adopt, the type of transactions you're looking to perform through the site, and the sort of images you need on your website.
  • Use the HTML picture element that ensures images on your website adapt in size according to the device the site is being accessed on. You can start by reading this article from Google Developers which explains best practices for optimizing images for all devices.

Verify your site

Having implemented all the factors Google recommend for attaining the mobile-friendly label, you can check if everything was set up properly using their Mobile-Friendly Test.

Google mobile friendly test

How fast does it apply?

There has been talk about the time it takes for Google to apply the mobile-friendly label from the moment a site meets all the requirements. Tests conducted by Barry Schwartz and others have shown that it can take somewhere between a couple of hours to about about 72 hours. In her great article about the mobile-friendly update, Cindy Krum noted:

There may be no intentional time-delay before a page is awarded the Mobile-Friendly notation, but it will only change after a crawl of the site indicates that the page is now Mobile-Friendly, so it is close to instantaneous if the pages are getting crawled on a very regular basis.