Blog eCommerce

Mobile usability issues with your Magento RWD site?

Mobile usability issues with your Magento RWD site?

Categories
eCommerce Magento

You’re not alone and there is a way to remedy those issues that are primarily caused by the way Google sees your site’s pages. We’ll go over three main types of issues Google considers to be harmful for your mobile visitors and how to fix them. You will need access to your “Google Webmaster Tools” and access […]

You’re not alone and there is a way to remedy those issues that are primarily caused by the way Google sees your site’s pages.

We’ll go over three main types of issues Google considers to be harmful for your mobile visitors and how to fix them.

You will need access to your “Google Webmaster Tools” and access to your “robots.txt”. There’s a boilerplate file at the end of this article. We suggest you read through the entire post before applying it and when you do, do it responsibly!

Some background first. Google announced to webmasters that this year on April 21st they will be expanding on their mobile friendliness as a ranking factor.

Here’s the quote from the announcement:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.- Takaki Makino, Chaesang Jung, and Doantam Phan

If you still haven’t checked your site, please login to your Webmaster Tools or check out Google’s mobile friendly guide. Once logged in to Webmaster tools, look for “Search Traffic” -> “Mobile usability” to take a look at the report.

1. Update your robots.txt

Now, if you’re sure your Magento site has a mobile version or uses a responsive theme, chances are that you’ll get a lot of issues anyway. This is because your “robots.txt” is blocking access to files needed for mobile usability testing.

Those are primarily your CSSJS and image files residing in your Magento “skin folder” and “media folder” respectively.

Basically, all you need to do is to exclude/delete directives that prohibit bot accees to the “skin” and “media” folder. Also if you have prohibited access to all css and js files with  a wildcard, remove those also:

Disallow: /*.js$
Disallow: /*.css$

Here’s a redacted example we used on one of the sites we manage for our clients:

# Google Image Crawler Setup
User-agent: Googlebot-Image
Disallow:

# Crawlers Setup
User-agent: *

# Website Sitemap
Sitemap: http://client-site.com/sitemap.xml

# Crawlers Setup

# Directories
User-agent: *
Disallow: /404/
Disallow: /app/
Disallow: /cgi-bin/
Disallow: /includes/
Disallow: /lib/
Disallow: /pkginfo/
Disallow: /report/
Disallow: /stats/
Disallow: /var/
Disallow: /downloader/
Disallow: /errors/
Disallow: /lib/
Disallow: /pkginfo/
Disallow: /report/
Disallow: /scripts/
Disallow: /shell/
Disallow: /stats/
Disallow: /var/

# Paths (clean URLs)
Disallow: /index.php/
Disallow: /catalog/product_compare/
Disallow: /catalog/category/view/
Disallow: /catalog/product/view/
Disallow: /catalogsearch/
Disallow: /checkout/
Disallow: /control/
Disallow: /contacts/
Disallow: /customer/
Disallow: /customize/
Disallow: /newsletter/
Disallow: /poll/
Disallow: /review/
Disallow: /sendfriend/
Disallow: /tag/
Disallow: /wishlist/
Disallow: /catalog/product/gallery/

# Files
Disallow: /cron.php
Disallow: /cron.sh
Disallow: /error_log
Disallow: /install.php
Disallow: /LICENSE.html
Disallow: /LICENSE.txt
Disallow: /LICENSE_AFL.txt
Disallow: /STATUS.txt

# Paths (no clean URLs)
Disallow: /*.php$
Disallow: /*?SID=

After you have updated your “robots.txt” file, head over to Google Webmaster Tools and locate “robots.txt Tester” where you will need to paste the contents of your “robots.txt” file and submit it to google. After a minute or so of patience, visit Google’s “Mobile Friendly Test” page to perform a check for of home page for example.

2.  Flash Content

It is no surpprise that Flash content is on the list of Mobile usability issues and Google is now counting all of your Flash content you have on the site. Since Flash is a big “no-no” on iOS since day one and you need a hack for Android to use it, HTML 5 is the way to go. Google is just making sure you apply that on your website. The irony, however, is that the tool used to test “Mobile Friendly” sites doesn’t recognize YouTube player as a HTML5 player, but as a Flash player.

So if you see those errors piling up in your “robots.txt test” tool, just look for anything else than YouTube players and try to address those issues.

Surely, they will be updating that soon, at least by April 21st. Fingers crossed.

[update] Since we started dealing with Mobile issues on our client’s sites, looks like Google updated their tool to address the issue. We had over 200 pages signaling errors and are now down to 100 reported in the listing. Further more when you test the page directly from the listing (“Test Live version”) there are no Flash warnings present. Great job Google!

3. Touch elements too close

Google reports if your “touch” elements on page are too close, impacting ease of use of any links or actionable content on your site. Resolving this issue involves editing the layout and we reccomend you check out their guideliness for the best approach.

NOTE: Even though the actual situation is probably OK on your site, Google tool might still list the issue. The reason is that at the time your site has been crawled your robots.txt has been blocking CSS and JS corrupting the way Google bot sees your page.

There you have it. Armed with some patience and time, you can be sure your site is well reported in Google’s records as a Mobile friendly site and receive benefits when the April 21st comes.

If you have any suggestions to make concerning this article, be sure to make them using the comment section below. We’ll be glad to hear from you.