Are you ready for Google’s new algorithm ‘mobile first’?

What does that even say!?

Mobile has been around for a while now but only a couple of years ago, you would go to a site via mobile and be faced with some tiny text that you couldn’t read. You would have to zoom in, or you could copy it and paste it somewhere else in a readable size. But realistically, you would just give up and go elsewhere.

It actually reads “Are you ready for Google’s new algorithm ‘mobile first’?”

Most sites have been mobile friendly since Google released the update back in 2015, or at least they should be.

Thankfully, we don’t have the tiny text issue so much anymore, but it amazes us that some sites still don’t have a responsive web design and even fewer are optimised for mobile first.

Imagine that you’re on a lunch break and you’re on your phone looking for a friend’s birthday present. You just want to check online whether it is in stock at your local store before you head into town after your shift.

You land on the website and it’s the same as a desktop version. You have no choice but to awkwardly swipe around from left to right, up and down all whilst zooming in and out to try and find what you need to know.

Finally, you find what you’re looking for, but whilst trying to zoom in your fingertips accidentally touch a button and it’s gone – along with your lunch break.

You may decide to risk it and head into town anyway or visit another online store. You could always get new friends. Either way, I’m sure we can all agree that this is a bad experience and you’ll probably never attempt it again.

On the upside, I’m sure you will have noticed that most of the websites you use work perfectly on your mobile device; all the text is easy to read, the navigation is simple, the individual buttons are easy to click and huge chunks of the page don’t disappear off-screen. These are probably responsive websites and make browsing on a smartphone a much better experience. Hallelujah.

What is responsive web design?

Responsive website design automatically adjusts to a user’s screen size, platform and orientation. This is achieved using flexible grids and layouts with intelligent CSS queries to move, enlarge and hide elements of the site.

Previously, some businesses set up mobile versions of their sites to run alongside the desktop, but this requires separate management and can be time-consuming. However, it did allow the SEO to rank for different keywords and have specifically targeted content on each site. With Google now taking preference of mobile sites, the best practice is to combine them but ensure it remains responsive to mobile.

Already, mobile traffic has already surpassed desktop traffic and it is estimated that almost 80% of global internet traffic will be mobile by the end of 2018. Supporting this view is Google’s new initiative of a mobile first index, which means Google will create and rank its search listings based on the mobile version of content, even for listings that are shown to desktop users.

You may ask yourself, why has Google taken this new initiative on-board? The simple answer is that Google has always preferred content that puts the user first and they’ve tried to tailor their algorithms to best represent this. Now the method of searching has swiftly shifted towards mobile, Google has evolved their approach to indexing to mobile first too.

Prepare for the Google Update: Mobile First

The first thing you need to do is check if your website is mobile-friendly and Google has made this very easy for you. All you have to do is enter the URL of your webpage here: www.google.com/webmasters/tools/mobile-friendly/.

In around 60 seconds the page behind the URL you inserted will be analysed and your website will either pass or fail the mobile-friendly test. If you pass, you can just go about your day as normal, if you fail however there are some things which you will have to change. This tool will show you a brief list of issues which need to be fixed to properly implement a mobile-friendly design.

This initiative has been planned for years and is starting to be rolled out to sites which Google deemed “ready” for this change. So, there is no need to panic as we are still in the infancy of this update and we expect this to continue this way for the foreseeable future.

According to Google themselves, they have provided some guidance on the responsive design type by stating that; If your site is responsive on desktop (example: “<meta name="viewport" content="width=device-width, initial-scale=1.0">”). You won’t have anything to do, as these versions are essentially the same.

You still want to ensure that mobile page speeds are not hindered and consider them a priority in this progressively changing search landscape space. Some of the more glaringly obvious mentions here are Images and dynamic content. Secondly, as we know from the desktop version of websites, in the past, Google has had difficulties crawling content hidden in accordians and hidden tabs. But on mobile first, this is considered best practice as real estate space is limited on page.

If you have a separate mobile site (m.version), you’ll want to consider some of the following elements;

• Content: make sure that the “m.version” has all the high-quality valuable content that exists on your desktop site. This can include a range of on-page elements such as text, images and videos. Make sure the formats used on the mobile version are crawlable and indexable (including alt-attributes for images).
• Structured data: you should include the same structured data mark-up on both the mobile and desktop versions of the site. URLs shown within structured data on mobile pages should be the mobile version of the URL.
• Metadata: ensure that titles and meta descriptions are similar on both versions of all pages. Bear in mind, that the viewport for mobile is smaller, therefore considering this as a factor is key for optimising metadata for mobile.
• Hreflang: if you use rel=hreflang for internationalization, your mobile URLs' hreflang annotations should point to the mobile version of your country or language variants, and desktop URLs should point to the desktop versions.
• XML and media sitemaps: ensure that any links to sitemaps are accessible from the mobile version of the site. This also applies to robots meta directives (robots.txt)
• Search Console verification: if you have only verified your desktop site in Google Search Console, make sure you also add and verify the mobile version.
• Analytics: This is following on from the point above. if you set up a unique property for the “m.version”, this will also need to be considered for Analytics too. For example, in Google Analytics you will need to create a unique property to track the “m.version” of the site.

Help Siri, Alexa & Cortana out

It is estimated that 50% of all mobile searches will be voice search by 2020. The big impact this has on SEO is that it allows search engines to recognise a user’s intent straight away, meaning more long-tail keywords that you can use to provide a better user experience.

But let’s not go down that rabbit hole, for now, let’s focus on what we can do to optimise mobile web design.

How to optimise for mobile web design

The most pressing issue of a website that isn’t mobile-friendly is poor user experience. This covers display and navigation issues such as small text, content not fitting on the screen and the inability to easily press buttons. Here’s some advice:

• Can you read the text? It is recommended that you make it at least 16 pixels and use appropriate vertical spacing between each row of text.
• Can you click the buttons? It is recommended that you make them at least 48 pixels in height/width and space them at least 32 pixels apart (vertically and horizontally).
• If your website ‘fixed width’? This should be changed and responsive design implemented to allow all of the content to fit on screen for various mobile devices.

As well as improving the usability of a website for mobile visitors, don’t forget about the technical features which also need to be optimised. The list below only scratches the surface, but should be enough to get started on your quest for mobile-first status:

• Ensure that the JavaScript and CSS are not blocked so that Google can crawl these on the mobile version of your website.
• If you have pop-ups on the desktop version of your website, remove them from the mobile version as these can be hard to navigate away from on smaller screens.
• If the desktop version of your website uses flash for animation you should change this, if you can. Most mobile devices don’t work with flash and HTML5 is recommended instead.
• Ensure that videos on your website use a video-embedding platform that is available on all devices.
• If you have a mobile version of your site rather than a responsive design, create an XML sitemap designated just for the mobile site. This will make it easier for Google to crawl.

Again, these suggestions are only a small fraction of what is needed to protect your website against Google’s mobile-first algorithm and as every website is different, they may not all apply to you.

If you want help with a responsive design or how to optimise your SEO for mobile first, get in touch with one of the team.