With the recent changes in Google’s search ranking algorithm and the emphasis on mobile-friendly websites, it’s become extremely important to start taking your mobile usability and SEO seriously. Many retailers assume that since most purchases happen on the desktop the mobile store is secondary. That may have been true a few years ago, but the times are fast changing and if you don’t have a mobile-friendly store your competition will eat you up.
In this post, Joshua Uebergang, a search marketing expert, talks about how you can assess and improve your store’s mobile usability, SEO, and sales using Google’s free tools. I recommend you do the exercises he suggests while reading along. Take it away, Joshua!
2009 saw the number of mobile users at one-tenth of the population and one-half of desktop users. In 2014, a milestone was hit. The number of mobile users for the first time exceeded desktop users:
Google knew they had to make the web a better place for mobile users so in 2014 they started to release tools to help you develop a good mobile experience for your online store. Now, Google ranks your store higher if it is mobile-friendly.
Don’t get too caught up on what mobile SEO can you do to your store. A lot of principles for general SEO are the same. There are extra technicalities to get right that you’ll learn in this guide, but all these are user-driven. Mobile SEO for your store is about satisfying users and letting Google satisfy theirs. It’s a simple model to guide you and drive more sales.
The Easiest Mobile SEO Tool
One foundation of mobile SEO is passing Google’s mobile-friendly test. The tool analyzes a page to see if it has a mobile-friendly design. Enter your home page to try the test. We can see OpenRoadCycles.com.au passes the test:
Did you get any of the below errors?
- content wider than screen
- mobile viewport not set
- text too small to read
Your store is likely designed for desktop and you need a new design or a responsive design edit. Here’s one such store:
Before you freak out over the investment, we need to eliminate blocked resources. Sometimes the “text too small to read” or the “mobile viewport not set” errors can occur from GoogleBot being blocked. The robots.txt file on your server should allow GoogleBot to crawl images, css, and javascript. Google needs to crawl everything on your site that influences how a page looks so it can judge the user experience.
Check if the test gave any blocked resources. Here’s an example:
There were 39 resources blocked in the directories:
- /modules/cms/resources/javascript/
- /modules/cms/resources/css/
- /resources/javascript/
Blocked resources are a common SEO mistake solvable with an accurate robots.txt file. Create your robots.txt in the home directory on your server if you don’t already have one then add allow rules so Google can access the blocked directories:
User-agent: *
Allow: /modules/cms/resources/
Allow: /resources/javascript/
Disallow: /control/
Disallow: /var/
Disallow: /errors/
Disallow: /app/
Disallow: /robots/
With this correction, the site passed the mobile-friendly test! The store in the following month received 10% more mobile visitors from Google organic search.
If you’re unsure of what you’re doing, read the SEO rules of a robots file. Still unsure? It’s best you avoid it because an incorrect configuration can block Google from your entire store. Get a good SEO expert to help out.
A More Comprehensive Look at Mobile Usability for SEO and Sales
If you got the green “Awesome! This page is mobile-friendly.” the page is just mobile-friendly – not your store. Google judges mobile compatibility on a per-page basis. The painful way to test this is entering every link of your store in the tool. Do this only for quick tests like now or when you want to test changes.
The best way to check mobile-usability issues is in Google Webmaster Tools. Once logged in, go to Search Traffic > Mobile Usability. Here’s what I saw for a new client:
This data is collected from GoogleBot crawling your website so it is comprehensive covering your whole store. If you make changes to your store to fix mobile usability issues, expect this report to update in one week. It depends when Google crawls each page on your store.
Consistent large number of errors like the 3 usability errors on 444 pages show an issue with the site design. See what pages have these usability errors by clicking the “>>” icon. You can learn more about how to fix the issues by clicking the ellipses:
In the case of font size being too small, here are the suggestions:
As mentioned earlier, the mobile usability errors of touch elements being too close, viewport not configured, content not sized to viewport, and small font size often indicate the need for a new store design.
How to Find Slow Mobile Pages
Speed contributes greatly to the mobile user experience, SEO, and ecommerce conversion rate so pay attention. Find what pages to speed up for mobile users with these six steps:
- Log into your Google Analytics
- Add a “Mobile Traffic” segment then apply:
- Remove the “All sessions” segment
- In the left navigation, go to Behavior > Site Speed > Page Timings
- Filter by “Avg. Page Load Time (sec)”
- Optional but recommend, expand the date selection at the top to get more data points
You will see your slowest loading pages for mobile users:
I suggest you visit these pages and enter the URLs in Google’s PageSpeed Insights and Pingdom’s Website Speed Test to discover what slows these pages.
Even if you pass all mobile usability tests, you should still test your home page and slowest pages on each of these tools. Below we see Open Road Cycles store, which passed the mobile-friendly test, produce severe speed warnings for mobile and desktop:
The store is slowed by unoptimised images. From the Pingdom Tool, we see the size of these images and their impact visualized in the waterfall chart:
What to do about it?
How to Reduce Image Load Times
Most stores fail their mobile users by delivering the same image on mobile phones as the images desktop users receive.
Web standards for image load times on mobile devices is an unsolved challenge in today’s web design. There are interesting technologies out like Adaptive Images and media queries that leads to dynamically serving content based on the user’s device, but a simple, widely-used standard is not yet achieved.
Most stores should not worry about a special system to optimize images. Simple image optimization is enough for most stores to reduce image load times.
- If you have FTP access and your images are in one directory, quickly review image sizes. Product images should rarely be above 200kb in size.
- Use software like GIMP or Photoshop to work with your photos.
- Test a .png, .gif, and .jpg file formats to see what produces a balance of good quality and low file-size.
- Get a resolution size that works well for your site and makes the user happy. I’m sick of seeing 400px width product images when I want to look close at a product.
- The golden rule of ecommerce product images is to retain quality at the lowest file size. Never compromise quality. I like to compress images too far to see what I can go down to before I up the quality. Good quality images are said to convert 300% more users. Bonus tip: this also means you should invest in good product photography!
Think You’re All Good? A Free Way to Check Your Site on Every Phone
You’ve done a lot of mobile testing to help usability, SEO, and sales. Let’s tighten it all up.
The last step I recommend you take is to test your store on major phones to spot navigation issues, drop-downs, readability, and overall functionality of the store. I don’t expect you to buy every phone on the market to test your store. That’s crazy. You have a free option.
Get on Google Chrome. I like to use this method as a final confirmation that the store is fine or to investigate complaints from customers.
- Visit your store in Chrome
- Go to “More Tools” then “Developer Tools”
- At the top you’ll see a device option. Select an iPhone device like below:
- Refresh the page so the user-agent can update
Now you will see your store as if you were on an iPhone!
Use shift on your keyboard and mouse movements to simulate pinch movements. For more guidance on this feature in Chrome, see the device mode documentation.
Google wants you to make the mobile experience better to make visitors happy. Good search results encourage people to use Google who will reward your store with higher rankings in their search results. People will reward you with more sales. It’s a love triangle!
How does your store perform on mobile usability and SEO? Let us know in the comments.
