Fixing Mobile Usability Issues in WordPress

If your WordPress site has received a Google Webmaster Tools notification that your site has mobile usability issues there are a couple of possible culprits. The first and most obvious is that your site isn’t responsive. If that’s the case, you can switch to a responsive wordpress theme OR hire a developer to make your current site responsive. For many websites, or if you’d rather not set up a new website yourself, this can be a less disruptive method. We do lots of this kind of work, so contact us if you’re interested.

Fixing Robots.txt in WordPress for Mobile Usability

In the past, Google would spider your site and then simply fetch your site in HTML. This is no longer the case. With Google rolling out algorithm updates favoring mobile sites, the algorithm now looks at the appearance of your website, as it looks to mobile users.

For WordPress sites it was best practice to block the following in robots.txt:

/wp-includes
/wp-content/plugins
/wp-content/themes

Doing so now will prohibit Google from accessing css and javascript files that it needs to visually render your site, and mobile usability issues are the result. You can test your current site with Google’s Mobile-Friendly Test Tool. Here’s an example of a site with mobile issues as a result of a robots.txt issue.

If we look at this site’s robots.txt file, it looks pretty good, except for the new Google guidelines.

There may be additional lines of code that need to be removed from your robots.txt file, but typically these are problem areas.

/wp-includes
/wp-content/plugins
/wp-content/themes

You can use trial and error and run Google’s Mobile-Friendly Test Tool as you make changes. You can also look at the individual files that are causing errors and check the directories in which they are located. Blocking relative URLs such as the following will also likely cause mobile rendering errors.

/*?*
/*?

Note: There may be files served from other websites that are blocked by those websites’ robots.txt files. Google blocks its own maps api for example, and it still shows up when using their testing tool. This is fine.

Using Google Webmaster Tools and “Fetch as Google” to Fix Mobile Usability Issues

Even if the Mobile-Friendly Test Tool is working fine for you (it’s fairly overloaded and glitches out on occasion) you’ll still want to log into your Google Webmaster Tools account and use the “Fetch as Google” tool under “Crawl” in the left sidebar. This tool with help you troubleshoot, and also allow you to submit your updated, fixed mobile site to the Google index.

Select “Mobile: Smartphone” from the dropdown menu, and then click the “Fetch and Render Button.” Once the render is complete, you’ll see a “partial” checkbox in green and then click the chevron arrows on the right side.

Two renderings will be shown, based on how Google sees the site, and how users see the site. If the images are different, there’s still work to be done. Scrolling down, you’ll see all the files that are still blocked by the robots.txt file. Makes changes, repeat the fetch and render process, and once the rendering looks good, click the button to “Submit to Index” so that Google gets an update of the improved version of your mobile site. Select the option to have Google “crawl this URL and its direct links.”

When all said and done, your final test with Google’s Mobile-Friendly Test Tool should look like this:

Updating the WordPress SEO Plugin

There are some similar issues that come from running an old version of the WordPress SEO Plugin from Yoast. You should update anyway, as there was a major security vulnerability in older versions, but as it pertains to this post, there were some directives set in the old version that will also inhibit Google from properly reading your site for mobile devices.