Starting on April 21st, Google will be updating its search algorithms to include mobile friendliness as a ranking factor.
What this means is that search results on Google.com will take into account how well the site renders on mobile devices. Sites that are optimized for mobile devices (phones and tablets) will rise to the top of the search results while those that are not optimized for mobile devices will fall below in search ranking. This can, and will, have a huge impact on a lot of sites.
The Google announcement can be found at the following link:
Here’s a quote from that link:
“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.”
Apparently, this is not expected to affect a site’s desktop search rankings. So if you are ranked #1 for a keyword now, that will likely not change after April 21st for desktop searches but you might see that ranking change if you do the same search from a mobile phone.
As more and more people are doing their searching on mobile devices, this change will have a profound affect on the search landscape.
How to Prepare
The number one thing you will need to do is to determine if your site is mobile friendly. There are lots of resources online for doing this, but it is recommended that you start with the Google tool designed specifically for this which can be found here:
This test will help you verify that your site is mobile friendly. If it is not mobile friendly, then you will be given the reasons and some steps to take to improve your results. Let’s take a look at some of the main reasons your site may not be mobile friendly and what you can do about it.
What to Fix
Some of the most common complaints you will see from the Google tool are:
- Text too small
- Buttons too close together
- Viewport not set
Text too Small
The text is too small complaint is pretty self-explanatory. Websites that do not have mobile features display the whole page on the size of a small screen. You most likely have come across sites like this and it requires you to zoom in to read the text. If you have to zoom in to read the text on your website, you have this problem and need to fix it
This one can be complicated to fix. Basically, you will need to have set your viewport (more on this in a moment) and set your max width for certain screen sizes. The easiest way to accomplish this is by using a grid design and having your columns stacked over each other. Responsive design does exactly this so changing to a responsive design is an effective way to make sure your text appears readable without users having to zoom.
Buttons too Close
This is also a common problem on websites that are not mobile friendly. Since mobile screens are small, it is important to be able to click on a button, or link, without accidently clicking on the button or link next to it. Zooming in can help with this, but again, Google does not want a site that requires users to zoom.
Again, this can be tricky to fix and is mostly handled in the same way as the small text problem. Responsive design can help ensure that your elements are large enought o be easily clicked. But you may still have a problem with buttons being too close together even with a responsive website or a dedicated mobile site. Fixing this requires using CSS code to increase the margin and/or padding between elements. This is an easy task for a webmaster, but can be complicated for the novice.
Viewport not Set
The viewport is a fancy way of saying “what the screen shows”. This is set by the device and what happens when it is not explicit in the website code is that the phone dictates the view. In most cases, this means that the phone will try to fit the width of the page into the width of the device. This creates some of the other problems described previously where the text is small and buttons and other clickable elements are too close together. Setting the viewport in the header of the webpage tells the device to not do this. It sets a default width either based on the device’s width or an arbitrary setting coded by the designer. This allows elements of the website to be fitted into the viewport for easy viewing.
The linked article above has a lot of details on how to do this, but the main peice of code that you need to implement in the head section of your webpages is the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you do nothing else to fix your site, at least set the viewport. It is the easiest change to implement and will make the biggest difference for the end user.
If you have not already optimized your site for mobile devices, now is the time to do it! Google is pretty much forcing your hand at this point if you want to continue to have good rankings. You have about 3 weeks as of today to get things fixed!
Of course, we are available to help out with this and any other SEO need. Feel free to contact us and we can get started right away.