The Ultimate Guide to Mobile SEO (2022)

Since Google switched to using a brand’s mobile site as its primary site, mobile SEO has become a primary concern – but with the right tools and enough effort, you can ensure that your mobile site provides the best possible chances of ranking for target keywords.

What is mobile SEO?

Mobile SEO is the collection of specific search engine optimisation techniques and practices necessary to help pages, apps and more to rank in search. While this was distinct from desktop search for many years, but since around 2018/9 Google has used the mobile version of sites as the primary user experience – making mobile SEO essentially the fundamental practice.

While the desktop and mobile user experience (UX) are slowly converging, there are still a number of SEO issues and search features which are peculiar to mobile devices – including the difference in speed between desktop and mobile, perceived differences in security, the use of voice search, location specific results and more – and while many of the techniques necessary to succeed will be familiar to most SEOs, the best practices are worth repeating for newcomers.

Why is mobile SEO important?

Your mobile site is now your main site from Google’s POV, and will be treated as such from a ranking perspective. That makes all SEO mobile SEO – it’s the technical and creative steps you need to take to rank a site in search. However, while there are fewer mobile only considerations than ever, there are specific instances where expectations differ and where proper mobile optimisation can create unique opportunities. For that reason, considering your SEO as mobile first similarly to how Google treats the index as mobile first is hugely important – and becoming more so all the time.

Developing a mobile SEO strategy

There is almost complete overlap between a general SEO and a mobile SEO strategy now, so what we’ve done here is look to emphasise the optimisation requirements which carry special emphasis when it comes to mobile devices.

Speed

There are several methods of reducing load times on mobile all of which are more-or-less common sense, but (perhaps even because of their apparent obviousness) are often overlooked.

Use JavaScript sparingly or strategically

Depending on your brand’s industry or sector, the type of landing page your consumers will arrive at will differ substantially. However, it is almost always possible to reduce the amount of JavaScript – there will be colour shifts, rollover, on-scroll or other animations which, though nice, do little for the user, these can be stripped from mobile landing pages.

Use fewer fonts

As with JavaScript, there will likely be fonts that are there for presentation purposes alone, or from legacy versions of the site, all of which take valuable fractions of seconds to look up, retrieve and render. By restricting the number of fonts used you may not shave seconds off the load time, but every little helps.

Reduce the file size of images

While your code may predefine the size of the image as it appears on your site, it is often the case that people use oversized images – these, of course, take longer to load. Try to ensure you are resizing images using editing tools prior to upload and use lighter-weight file types such as JPEG and PNG.

Consider reordering element load order and async

This is probably the hardest and fiddliest of all the speed improving tips, but potentially one of the biggest gains. Thankfully there is a fantastic blog here which offers a great overview of some tricks you can employ with perceived and window load times to get the most out of your page.

Some helpful tools

The following are some useful tools to help improve the speed of your site:

• Chrome DevTools Lighthouse Report: Evaluates your website performance, simulates network and CPU speeds, can examine network loading details and see how your site’s code affecting performance.
• Google Analytics (GA): Site Speed reports in GA show how quickly users are able to see and interact with content.
• Mobile-Friendly Test: Speed is just one of the factors taken into account on this tool which will give you a yes or no answer as to the mobile friendliness of your site.
• Page Speed Insights: A tool measuring web page performance before giving a ‘Page Speed Score’ indicative of how the page is performing and offering suggestions to improve performance.
• WebPageTest: Tests from multiple world-wide locations and browsers, this tool uses genuine connection speeds to provide resource loading waterfall charts, page speed optimisation and possible improvements.

With mobile user expectations unlikely to become less demanding, brands are really going to have to up their game in order to capitalise on a rapidly growing, increasingly important section of online consumers. Keep an eye out for our upcoming Mobile SEO Cheat Sheet which will give you nine further tips to help you succeed with your mobile marketing.

Security

One of the main concerns for mobile consumers is the security of the site, and there is (whether rightly or not) a perception of mobile devices as somehow less secure than desktops. As such it is vital that brands do whatever they can to put consumer minds at ease as to the secure nature of the site.

One of the best ways to do this (in addition to basic security procedures) is to implement a shift to an HTTPS domain. HTTPS can remove many of the risks which are of primary concern to mobile device users (such as ‘man-in-the-middle’ attacks) by offering bidirectional encryption between a client and a server.

While implementation of HTTPS may not instantly allay all consumer fears, it is a definitive step in the right direction and will assist with building consumer trust as mobile use continues to expand and allows your brand to be well positioned if and when HTTPS’s weighting is boosted as a ranking signal.

While we would expect most sites to have made this move already, there is still a surprisingly large minority of sites which continue on HTTP, so it bears repeating.

Voice search

With Google reporting in 2016 (the last Google confirmed statistic available) that a fifth of all searches are now spoken, there is no excuse to postpone this kind of optimisation any longer. We boil the requirements down to two critical factors, natural language and markup:

1. The advancement of voice search and the tremendous improvements in the vocabulary of search engines can (and should) be incredibly liberating to content producers across all industries. While there may be industry-specific terms which have no useable synonym, for the most part the content produced across all sectors is freer to be itself than ever before.
2. Markup is the key to succeeding not only in voice search, but also in local, Google’s Knowledge Graph and in mobile search as a whole. The main drawback, however, is that if it has not been implemented early on, it can be difficult and time consuming to do at later stages. However, with markup serving as essential sign-posts for search engines, it is more than worth the time it may take.

Location based search

Again, the key to this is ensuring that your site is using the correct schema/JSON-LD markup. With ‘near me’ search queries regularly increasing in three digit percentages year on year, if your brand has a physical location, it needs to be appearing in local listings.
With it getting easier and easier to look up your next purchase on the go and on a whim, your brand could miss out on an awful lot simply by being more difficult to find than the competition.

Focus on UX and reducing pinch points

This is really an exercise in efficiency – and one that physical stores and supermarkets have been concerned with for decades. The stand-out issues with the mobile buyer’s journey are how regularly it is interrupted and how short the sessions can be – people can and do browse while waiting to do other things, or between tasks, just a minute or two here and there. It is therefore important to make buying from your brand, or otherwise converting, as quick and as easy as possible.

Think about how you’re shepherded through a supermarket – there is a fully developed science behind aisle positioning, dimensions, typical navigation patterns and countless other factors besides, in order to make your visit as quick and as profitable (for the store) as possible. While there’s no need to be quite so Machiavellian, ensuring that your mobile consumers are able to convert quickly and efficiently is a key factor in success on mobile devices.

Core Web Vitals

Set to be rolled out soon, the CWV update is likely to be the first update of its kind – like the initial mobile friendly update compared to the eventual mobile first indexing, this will be a ranking signal that will only grow in importance.

CLS

Cumulative Layout Shift is the sum of all individual layout shift scores for all unexpected layout shifts that occur during a page load. If text moves on a page without warning, or you are about to click on an element and the element moves, that is a bad CLS. Sites should strive to have a CLS score of less than 0.1. Layout shift score = impact fraction * distance fraction:

• The impact fraction measures how unstable elements impact the viewport area between two frames.
• The distance fraction measures the distance that unstable elements have moved, relative to the viewport.

Some ways to optimise for CLS

Last minute image sizing is one of the main causes of poor CLS, so always include width and height attributes on your images and video elements. You can also reserve the required space using CSS aspect ratio boxes – this ensures the browser can allocate the correct space in the document while the image is loading.

Anyone who has used the web will be aware of layout shifts that cause unwanted ad clicks, but not only is this poor UX, it will also impact your CLS score. However, if sites load the container prior to the ad insert, you can ensure that the impact on the user is minimised.

Font loading can also cause poor CLS scores. As such, sites should ensure that they are, wherever possible (and it should be in most places) use a combination of <link rel=”preload”> and font display: optional to preload fonts and avoid content shifting.

Use iframes for rich media – just as with ads and images, it’s important to ensure that the space is blocked out in advance to avoid the layout shift that can come as a player resizes.

FID

First Input Delay measures the time from when a user can first interact with a page (when they can click a link, tap a button or use a custom, JavaScript-powered control) to the time when the browser is able to respond to that interaction. Sites should strive to have a First Input Delay of less than 100 milliseconds.

Some ways to optimise for FID

As with LCP, for those pages with JS that is required but not critical to the user interaction with the page, you can again use defer to postpone the loading of these sections until when they’re required. Main thread blocking causes input delay, so web workers make it possible to run JavaScript on a background thread. Moving non-UI operations to a separate worker thread can cut down main thread blocking time and consequently improve FID.

Consider using the following libraries to make it easier to use web workers on your site:

• Comlink: A helper library that abstracts postMessage and makes it easier to use
• Workway: A general purpose web worker exporter
• Workerize: Move a module into a web worker

Often sites will include the JavaScript libraries used throughout the site in a single JS file. That means that these sites will be loading a whole site’s worth of JS instances for every page – even when those pages require little or none of the JS in the file. By separating this into multiple files, you can make only the requests each page needs.

LCP

Largest Contentful Paint measures when the largest elements in the viewport become visible. It is used to determine when the main content of a page has finished rendering. Sites should strive to have Largest Contentful Paint occur within the first 2.5 seconds of the page starting to load. This includes the following:

• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children
• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)

Some ways to optimise for LCP

Your LCP depends largely on the amount of time your user’s client (browser) spends making and receiving requests from your server. You can minimise this time in a number of ways.

One way you can reduce this time is to preconnect or prefetch your third-party requests. These are two similar, but different ways you can do this – and you can use both to offer fallbacks for browsers which don’t support one or the other.

Christmas tree lights were once on a single circuit, which meant that if one bulb blew, the entire string of lights would stop. This is the way many sites deploy their JavaScript and CSS – with each execution waiting for the completion of the last. You can minify both JS and CSS, inline critical CSS requests and load JavaScript asynchronously to avoid slowing down or stopping the loading process.

If your site doesn’t change with every request, caching can prevent it being recreated unnecessarily every time it is accessed. You can store a copy of the generated HTML on a disk, and server-side caching can reduce TTFB and minimise resource use.

Images are often a large drain on the largest contentful paint, so the Google dev site offers the following advice:

• Consider not using the image at all – if it isn’t relevant, remove it.
• Compress images (with imagemin or Squoosh, for example)
• Convert images to next-gen formats (JPEG 2000, JPEG XR, or WebP)
• Use responsive images
• Consider using a CDN

The future of mobile SEO

It won’t come as a surprise to anyone that the mobile phone is important to our everyday lives and more important all the time – for that reason, the future of SEO can be described mainly in the level of its importance. While desktops are unlikely to ever go away – they’re a vital part of the workday for an enormous number of people, and the global pandemic reinforced the importance of a good home computer – but mobile phones are becoming an ever-present part of the buyer’s journey across industries and verticals, they’re increasingly important for communication and navigation, for a huge range of our day-to-day tasks.

As a result of the omnipresence of mobile devices in all aspects of our lives, we need to pay attention to the technological advances that spring from them and also to the changing ways we use them. As such, here are a few predictions for the future of mobile and the requirement for SEO to match them.

• Voice search and voice activation: – we’re a fair way past the often-debunked fake Comcast prediction, but we’re still yet to arrive at the peak of voice search. I’ve always linked this peak to subvocalisation technology – and with the next generation of Apple’s airpods set to be controllable via subvocalisation (in a limited way) using ‘through-body input’, it may not be too long before dictation, text messages and searches will become viable using the technology. This is when voice search and voice activation will hit its stride. Once this arrives – probably in one or two generations of wearable – ensuring your site is findable by voice (see the section of voice search) will be extremely important.
• AR search results: – AR has been present on mobile in a pretty big way since the Pokémon revolution of about 6 or so years ago, but it’s entered both search and navigation in the last couple. I wrote about it following a Google I/O a few years ago, IKEA began appearing in search results with AR products this year, also, while several spectacle and beauty retailers have AR adjacent product testing apps. This is just the beginning – the ability to check out a product in the space you’ll use it is going to grow a lot over the next few years and the increase in the sale of large items online (see the 1228% increase in online UK car sales) will only accelerate this trend. While there are likely to be apps at some point that can help you to render a product as a 3D image, you’ll be looking at a few hundred pound per product (according to a brief search), so it may be worthwhile building those skills in-house. In addition, there are likely to be additional schema requirements (there’s a 3D object project in process at the moment on schema.org) which should be looked into.
• Location specific features and navigation: – Apple added AR navigation this year, Google already has Live View. This opens up a host of search and advertising options – as anyone who has scrabbled to remove location information from the map when on a long journey with Google Maps can testify to. While I’d hope that they’ll be minimally intrusive, our devices will soon be the main personalisation opportunity for advertisers (as 3rd Party cookies end in 2023), and they’ll come to know you extremely well. As such, making sure your site is optimised to send the appropriate local signals and information to search engines will be extremely important.

Mobile SEO checklist

Some of these may seem obvious, but you can find a more general SEO checklist here.