Request Media Kit

How To Make Your Site Mobile-Friendly, According To Google

As you’re probably aware, Google is preparing to launch an algorithm change that includes a signal telling Google sites that are mobile-friendly should get a rankings boost. This will remain jus...
How To Make Your Site Mobile-Friendly, According To Google
Written by Chris Crum
  • As you’re probably aware, Google is preparing to launch an algorithm change that includes a signal telling Google sites that are mobile-friendly should get a rankings boost. This will remain just one of many signals Google takes into account when ranking content, but it’s going to be an important one.

    Is your site already mobile-friendly or do you have some work to do? Let us know in the comments.

    For one, if it were not important, Google probably wouldn’t have taken the time to pre-announce it on multiple occasions. It probably also wouldn’t be sending webmasters messages about their sites when they’re not mobile friendly. Even forgetting Google’s own messaging, it’s just common sense that this is an important signal. Many, many people spend the majority of their Internet time on their mobile devices, and many others still spend some of it that way. Mobile is not going away. If your site isn’t mobile-friendly, you’re doing yourself and your potential customers a disservice, regardless of how Google is ranking your content.

    “When it comes to search on mobile devices, users should get the most relevant and timely results, no matter if the information lives on mobile-friendly web pages or apps. As more people use mobile devices to access the internet, our algorithms have to adapt to these usage patterns,” Google says.

    The mobile-friendliness ranking signal will take effect starting April 21. Yes, Google has even given a date. That’s how serious they are about this one. They say it will affect mobile searches in all languages worldwide, and have “a significant impact” in search results.

    So you have less than two months to make sure your site is ready to go before the update starts to roll out. How should you go about doing that? Well, you might want to start by utilizing Google’s Mobile-Friendly test tool. Use this to test individual URLs. If you have a basic template that’s used for the majority of your site’s content, that will probably help a great deal, but use it to test as much of your site as is realistic.

    First, go here. You may want to bookmark it if you have some work to do.

    Enter your URL, and hit “analyze”. Hopefully you’ll get something that looks like this, telling you your page is mobile-friendly:

    If the page is deemed mobile-friendly, Google tell you how Googlebot sees the page. It might say something like, “This page uses 9 resources which are blocked by robots.txt. The results and screenshot may be incorrect.”

    It will give you a link to expand such resources and get a look at what they actually are. It also gives you a link to learn how to unblock them for Googlebot.

    If your URL is not deemed mobile-friendly, Google will tell you specific reasons, as well as info about how Googlebot sees it, and resources to help you fix issues. Reasons a page isn’t mobile friendly might include things like: “content wider than screen,” “uses incompatible plugins,” “links too close together,” “text too small to read,” “mobile viewport not set,” etc.

    Google recommends the following platforms for creating new sites, and chances are you’re already using one of them: WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix, and Google Sites. Google provides a dedicated guide for each one of these platforms for making your site mobile-friendly. You can find each of these here.

    Google also gives the general guidelines of backing up your site before making any changes, updating your CMS to the latest version, making sure any custom themes you’re using are mobile-friendly, and reviewing support forums for the CMS to see what issues people might be having with the mobile versions of their sites

    To make sure a custom theme is mobile-friendly, view the theme from the admin panel of your CMS and look for words like “mobile” or “responsive” in the documentation, and if there’s a demo template available, put the URL into Google’s mobile-friendly test tool. Google also suggests making sure the template is fast by checking the Speed section of PageSpeed Insights and making sure the Speed section has no issues marked as “should fix”.

    To get into the technical details of making a site mobile-friendly, you’re going to want to take a look at the documentation on Google’s Web Fundamentals site. Here, you’ll find options for your first multi-device site and starting your site with the Web Starter kit.

    The former delves into creating your content and structure and making it responsive. The TL;DR of content creation as Google breaks it down, is: Identify the content you need first; Sketch out information architecture for narrow and wide viewports; and Create a skeleton view of the page with content but without styling. The TL;DR for making it responsive is as follows: Always use a viewport; Always start with a narrow viewport first and scale out; Base your breakpoints off when you need to adapt the content; and Create a high-level vision of your layout across major breakpoints.

    The Web Starter Kit section is broken into three parts: Set Up Web Starter Kit, Development Phases, and How to Use the Style Guide.

    Of course even though these documents are long, you’re probably still going to want to read them.

    Then there’s the Mobile SEO guide. This is separated into four parts: Choose your mobile configuration; Signal your configuration to search engines; Avoid common mistakes; and Configure for other devices.

    The “Choose your mobile configuration” section deals with understanding different devices and key points in going mobile, selecting mobile configuration, and answers frequently asked questions. The “Signal your configuration to search engine” section talks about responsive web design, dynamic serving, and separate URLs.

    The “common mistakes” part talks about blocking JavaScript, CSS and image files, unplayable content, faulty redirects, mobile-only 404s, app download interstitials, irrelevant cross-links, and slow mobile pages. That last part talks about configuring for tablets and feature phones (when Google says mobile, it’s referring to smartphones).

    This whole mobile SEO guide is far too extensive to get into here, but you do need to know about it, and you’re going to want to go through it and make sure you’re not overlooking anything.

    “Design your site to help make it easier for your customer to complete their most common tasks: from task conception, to visiting your site, to task completion,” Google says. “Outline the potential steps in your customers’ journey to make sure the steps are easy to complete on a mobile device. Try to streamline the experience and reduce the number of user interactions.”

    “Making a mobile site requires prioritization,” it says. “Start by working out what the most important and common tasks are for your customers on mobile. Being able to support these tasks is critical and this is why the measure of your mobile site is how well customers can complete their objectives. There are ways to make the design of your site support ease of use too. Focus on consistency in your interface and providing an unified experience across platforms.”

    Many site owners are simply going to have to get outside help. Google knows this, and also offers advice for working with developers. While Google elaborates here, it recommends asking to see your developer’s references and portfolio of mobile sites, making sure they understand your mobile customer, asking them to make a commitment to speed, having them install web analytics, making sure they’re aware of Google’s Webmaster Guidelines, and making sure the contract includes improving the mobile site after the initial launch.

    It’s entirely possible to make a site mobile-friendly for no extra money. This is the case if you have skills required to implement the steps from Google’s guides discussed above or if you are able to use a responsive theme. Things can get more expensive if you have to hire the developer, so some sites are going to have to make a big choice.

    Google says the top three mistakes beginners will want to avoid when it comes to creating a mobile-friendly site, are: forgetting their mobile customer; implementing the mobile site on a different domain, subdomain, or subdirectory from the desktop site; and working in isolation rather than looking around for inspiration. In other words, keep an eye on what others are doing.

    Google has additional resources available with its Mobile Playbook, Think with Google for the Mobile Platform, and its Multi-Screen Success Stories.

    Having a mobile-friendly site is good for more than just Google rankings. It’s good for your site visitors, and could mean the difference in getting a conversion or not. The search visibility will also help in that area, and it’s also likely that it will end up helping you in other search engines besides Google. None of them are going to want to point their users to inefficient pages.

    Do you plan on making changes to your website due to Google’s coming change? Let us know in the comments.

    Images via Google

    Get the WebProNews newsletter
    delivered to your inbox

    Get the free daily newsletter read by decision makers

    Subscribe
    Advertise with Us

    Ready to get started?

    Get our media kit