>

SEO Strategy

Mobile SEO

Sam Underwood

12

min read

As we’ve all become more addicted to our smartphones, it's no wonder it has had a significant part to play in the world of SEO.

With more searches on mobile than on desktop, websites must adapt to ensure they're designed for both platforms - with a bit more emphasis on mobile search.

In this guide, we'll look at the ins and outs of mobile SEO, starting with how SEO has changed with the influx of mobile searches, then detail the elements of a mobile-focused SEO strategy.

What is mobile SEO?

Mobile SEO is:

  • Creating a website that provides a great UX on mobile devices

  • Considering technical factors when implementing a mobile website

  • Ensuring parity between both mobile and desktop versions

It’s important to take a mobile-first approach to SEO because search engines focus on mobile search. A mobile-first approach to SEO optimizes for both mobile and desktop; a desktop-first approach doesn’t.

While desktop was the focal point for optimization and mobile came secondary, it’s now the other way around.

According to StatCounter, 52.96% of users use a mobile device (phone and tablet), while 47.04% use a desktop device.

Mobile SEO versus desktop usage

For mobile SEO, it's SEO as you know it, with ensuring you optimize your site using the standard recommendations for mobile sites from the search engines.

More on that later!

Andrew Charlton

Freelance SEO Consultant, Andrew Charlton

The web is mobile, so use mobile-first principles. Design, develop, and review for mobile > desktop.

You can use Google Search Console to understand your top mobile queries and begin to learn the intent behind them. How do they differ from desktop, and how can you create different but complimentary experiences?

The history of mobile SEO

Google ran the first mobile-friendly update back in 2015; you can read more about it here.

Screenshot of the first mobile-friendly update notification from Google

This update was as simple as Google boosting the rankings of mobile-friendly pages, causing sites that weren't so mobile friendly to drop.

Mobile search has steadily increased, and Google has continuously made efforts to make the web more mobile, including:

  1. Boosting the mobile-friendly ranking signal

  2. Adding mobile-friendly labels to SERP results

  3. Demoting sites with intrusive interstitials

  4. Using page speed as a ranking factor in mobile results

  5. And of course, implementing mobile-first indexing

PRO TIP

A common misconception is that the mobile-first index is a new index and there are separate mobile and desktop indexes. This is not the case.

Previously, Google would add desktop pages to its index, which would be evaluated with the various ranking factors they have. Now, they add mobile pages to the index and evaluate based upon that.

Screenshot of note about mobile-first index

What is the mobile-first index?

The mobile-first index was Google shifting to ranking pages based on the mobile version of the page, with the desktop version secondary — even if the search was from a desktop.

The mobile-first index has been rolling out since March 2018.

Screenshot of the mobile-first index update

Google has had a couple of updates since then; the main ones were in May 2019, where mobile-first was the default for all new domains, and more recently, the entire web will be mobile-first in spring 2021.

Am I on the mobile-first index?

To determine, head to your settings on Google Search Console. You'll see an "Indexing crawler" label saying which version of Googlebot is being used and since when.

Google Search Console showing the indexing crawler

As shown in the above screenshot, the device is "Googlebot Smartphone," so Google uses mobile-first indexing for this site.

If it is yet to move over, it'll be crawled by "Googlebot Desktop."

If you’re still being crawled by the desktop crawler, you’ve probably got some mobile issues that have delayed Google moving you over.

In addition, you can run a competitor analysis and find out how they solved this problem.

Abby Reimer

Senior SEO Analyst, Uproer

To succeed with mobile-first, search marketers need to think mobile-first. One way to do this is by analyzing and reporting on mobile rankings since mobile SERPs can look quite different from desktop. Our team uses a rank tracking tool that can track mobile rankings separately - this helps us understand the whole story behind a keyword's performance, so we can strategize accordingly.

I also like to visualize live mobile search results using MobileMoxie's free mobile SERP test. This can be a great way to show clients how SERPs differ across devices.

How to avoid mobile-first index issues

First, make sure your desktop and mobile site show the same content; this only applies if you're not using responsive design and you're dynamically serving content to your mobile site or you have a separate mobile URL, such as a mobile subdomain.

If you aren’t using responsive design, the best resource to read to ensure you don’t run into issues is Google’s mobile-first indexing best practices guide.

Here are the common issues you'll face as you transition to mobile-first indexing.

Content

Your site's desktop version may have more content in comparison to mobile; this is common, as UX teams tend to try to simplify a mobile site.

For a site to rank with mobile-first indexing, the crawler needs to see your content mobile site content. If the content is only on the desktop site, it won't help you rank.

Content for the mobile site includes any imagery, videos, or any other useful information you’re providing on desktop.

Internal linking

Linking is a fundamental part of any SEO strategy, so it's important your links are there on all devices.

Missing internal links on your mobile mean link equity won’t flow throughout your site, diminishing your ability to rank.

In a world of huge mega menus on desktop, this isn’t always the easiest to translate to a significantly smaller screen.

Screenshot of the mega menu on a desktop device for ao.com

One tip is to evaluate your internal linking and only include important internal links. Internal linking is incredibly important, especially with Ecommerce SEO, so I’d definitely focus here when evaluating your mobile site.

If you want some UX advice on implementing mobile menus and sub-navigation, I’ll defer to this brilliant piece by the Nielsen Norman Group as well as another piece they’ve written on accordion navigation on mobile.

Structured data

If structured data is active on your site, then make sure it's live and matches across both desktop and mobile versions.

An easy way to compare is by using this free structured data comparison tool by Dave Smart that automatically checks for you.

If you haven't already added structured data, I recommend you look into it because it allows search engines to understand your website better and allows you to capture rich snippets.

If you’re interested, Yoast has a great guide on implementing structured data that I recommend reading.

Suganthan Mohanadasan

Co-founder and Technical SEO lead, Snippet Digital

One good way to get ahead of the mobile SEO game is to use Web Stories. It's the precursor to AMP Stories.

The benefit of using Web Stories is the ability to create a unique indexable URL for your story, which is more visually appealing on mobile. The story mode is optimized for mobile and encourages users to navigate through the narrative. You can then push the users to a large piece of content. It's often used as a teaser for a main piece of content and by visually pleasing and "hooking" the user.

Another thing to note is that Google seems to be pushing Web Stories to Google discover feed, so that's a fantastic opportunity to get additional traffic.

How to build a mobile site

If I haven't already emphasized it enough, ensuring your site is mobile-friendly is essential to rank well for both mobile and desktop search.

Fortunately, implementing mobile SEO practices can be easy, especially if you follow the advice in the section.

Here are three ways to make your site mobile friendly; let's explore each one.

Responsive Design

Responsive design makes mobile SEO best practices easy.

If you’ve ever seen a site change as you adjust your browser window size, that is responsive design.

Graphic representation of responsive design

The great thing about this model is no matter which device the visitor uses, the URL, HTML, CSS, and JS are all the same. You only have one codebase to manage, rather than separate codebases for mobile and desktop devices. This makes development quicker and easier to manage.

The site changes what it looks like thanks to a CSS feature called media queries.

Keeping URLs consistent is handy because you don’t have to think of canonicalization, which means consistency between any links pointing to the mobile or desktop version.

Once you’ve implemented media queries to make your site responsive, your only additional task is to include the meta viewport tag below.

<meta name="viewport" content="width=device-width">

All this does it instructs the browser on how to manage the scaling of the page.

If you want to check your site in a few different device widths you can use this tool.

Dynamic serving

A second option is dynamic serving. With this option, content is all under one URL but different HTML/CSS is shown depending on the device used.

Graphic representation of Dynamic serving

This is done by implementing server-side code that checks the devices user agent and then sends the appropriate code.

The list of user agents requires constant maintenance to make sure you’re always sending the correct code, making this a higher effort option.

With this option, you also need to add the Vary HTTP header.

It’s important to add this, as it signifies content delivered does change depending on the device/user agent.

This helps with signaling to caching servers that there is a difference by device, preventing mobile content being cached for the desktop version and vice versa. It also signals to Googlebot that the content delivered will change to this URL depending on the user agent used.

Including the HTTP header is as simple as adding the below:

Vary: User-Agent

Separate URLs

The third option is to have separate URLs.

This is where you have the main version of your site under your usual URL, and a mobile version of your site on a separate subdomain.

You usually see this with sites implementing an m. subdomain.

Graphic representation of separate URLs

The user will be automatically directed to the version site version that fits their device with server-side code checking the device user agent.

The negatives to separate URLs is the requirement for canonical and alternate meta tag setup, which isn't always the easiest to configure.

In practice, you add a rel=”alternate” tag to the desktop version of the site that points to the mobile version. This helps Google establish these are two versions of the same page.

Likewise, you need to also add a rel=”canonical” tag on the mobile site, pointing to the desktop version of the site.

As an example, you would add the following in the of the desktop page (https://www.example.com/shoes/)

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/shoes/">

And this in the head of the mobile page (https://m.example.com/shoes/)

<link rel="canonical" href="https://www.example.com/shoes/">

Out of the three, it's time-consuming, complicated, and harder to maintain. Google specifically advises you to not set up this way for those reasons.

I would think long and hard before implementing mobile user-agent detection instead of a “pure” responsive solution. It introduces an additional point of failure, essentially creating more than one site to build, monitor, and maintain.

If the user-agents change or your user-agent detection fails, suddenly you're serving crawlers a different site, which can impact on performance.

Similarly, when implementing mobile-specific URLs, AMP content, or a PWA, each of these can increase effort and risk. However, PWAs can deliver great experiences, completely bespoke mobile and desktop experiences may work best, and Google has made AMP all-but mandatory for publishers.

So there are cases where it does make sense to use them, but I would carefully consider the associated trade-offs.

Mobile UX considerations

Outside of mobile-indexing and your mobile site setup, several other important UX considerations can impact SEO performance.

Addressing these will ensure you’re working toward providing the best UX you can. I examine each below.

Interstitials

Otherwise known as pop-ups, interstitials frustrate the user because they show in front of the content they're trying to access.

Below are some interstitials that aren't so user friendly and are a hindrance when viewing content.

Sites are now impacted negatively when Google sees content isn't easily accessible to the user.

In some cases, interstitials are required. You'll commonly see them for cookies or age verification, which are legal requirements.

In these cases, interstitials are OK and won’t have a negative impact.

To ensure your site is not penalized for using interstitials, make sure to use them only when necessary. When you do use them, make them non-intrusive like below.

Non-intrusive interstitial
Nick LeRoy

Owner, Lead SEO, Nick LeRoy Consulting

Real-life experience shows that going from a full interstitial to a compliant interstitial will have a negative impact on conversions.

However, with nobody knowing when/if Google will turn up the knob on their promise that it will have a negative impact on organic search, its a good idea to be compliant.

Hidden content

In the old desktop-first world, content hidden in expandable menus or tabs was viewed negatively, as content not visible was devalued.

Now, across mobile-first, hidden content will rank just as well as content that is visible to the user. Hidden content also includes content within hidden tabs. The only criteria are that the content is still visible on the HTML of the page on load, and it isn’t injected with JavaScript.

Google understands the reduced screen size can ultimately constrict the UI, so hidden content is acceptable. However, I advise that you ensure critical content is always visible.

Graphic showing a read more button on a mobile site

Be aware, some tests in the SEO community have shown otherwise, such as this one and this one. So do proceed with caution.

We have had some further clarification by John Mueller that hidden content gets the same weight as visible content, but it won’t be shown in snippets.

Orit Mutznik

Head of SEO, SilkFred

Google’s key best practice for mobile-first indexing is to make sure that upon the shift your content remains “the same on desktop and mobile”. Since the layout is inherently different on mobile devices, Google has also confirmed that content hidden in tabs with mobile-first Index is okay, as long as the desktop content remains within the code.

However, have you ever tested the impact of hiding vs revealing tabbed content on organic growth? The guys at SearchPilot conducted a test, bringing content out of tabs for the big UK supermarket chain Iceland, and the results were that the content that was left on display for mobile has resulted in a “12% uplift on organic sessions”.

Maybe hiding the content is “okay”, but it might be the case that displaying it is even better. Initiate collaboration with your Product/UX department to come up with the best version of this for your site and test this for yourself in your industry.

Optimize for speed

Slower processors and 3G connections have made site speed optimization increasingly important for providing a good UX. In addition, it's a ranking factor, although a minor one.

If Core Web Vitals such as your First Contentful Paint are high, you're at risk of losing valuable traffic or not converting a user into a sale or lead.

There are several things you can do to improve site speed. Start by first measuring how fast your site is with Page Speed Insights then learn how to improve your speed on Google’s web.dev site.

After that, measure your site speed regularly with a tool like Wattspeed (a handy free-to-use tool from Advanced Web Ranking, so make sure to make it part of your process!).

When measuring via PageSpeed Insights, it provides Core Web Vitals metrics that will soon be a ranking factor such as:

  • First Contentful Paint

  • Speed Index

  • Largest Contentful Paint

  • Time to Interactive

  • Total Blocking Time

  • Cumulative Layout Shift

PageSpeed Insights result

You ideally want to be in the green 90-100 spot. Anything lower and you have work to do!

Brodie Clark

Australian SEO Consultant, Brodie Clark

In terms of UX, Core Web Vitals has certainly been a hot topic more recently. Cumulative Layout Shift, in particular, a metric which measures where shifts happen while a page is downloading.

Google recently launched the ability to see layout shifts happen within the Stable version of Chrome DevTools. Knowing the process to identify and pinpoint where shifts are happening on pages is an important one to be aware of for SEOs.

All you need to do is run a Lighthouse audit and then select the 'avoid large layout shifts' option.

You can learn more in my CLS Web Story I created when it first moved from Canary and became available to all Chrome users.

Further tips on creating lightweight mobile sites

Creating lightweight sites is especially crucial for mobile.

When sites can often lag when too much code is added; this is known as "code bloat." Know that horrible lethargic feeling? Well, that's how your site acts with excess code.

To avoid this, the best guideline is to keep pages minimal. Some tips to do this are:

  • Don’t output code sitewide; output the JS and CSS required for that page.

  • Use minimal JS. JavaScript is heavier on the processor, which is weaker on mobile than desktop.

  • If you’re doing a WordPress build, keep the theme lightweight. I’d recommend either using GeneratePress as a base or custom building with a lightweight theme builder like Oxygen.

Pay particular attention to image optimization. Images are usually the largest files on a website, so sizing, compressing, and lazy-loading is essential.

Other top mobile SEO tips

Once you’ve considered the above, don’t forget the smaller elements that will enhance user experience.

I’ve compiled a list of what can be easily overlooked, but shouldn’t be!

  • As mobile is a much smaller screen, consider a larger font size to reduce the need for zooming in. Google recommends 18-22px.

  • Keep page headers a reasonable size. The bigger they are, the more screen space they use, requiring more score scrolling.

  • Make clickable elements spaced out and large enough to tap easily.

  • Ensure forms are easy to use and don't require the user to spend a ton of time completing them.

Lily Ray

SEO Director, Path Interactive

When you “inspect element” on Chrome to see whether your content is available in the DOM, make sure to switch your browser to a mobile user-agent. If you are only viewing the DOM as a desktop user-agent, you might not be getting the full picture of what the page looks like on mobile.

It’s possible for content to be omitted from the DOM on page load on mobile but not on desktop; and this could impact your rankings for the page, given that Google uses mobile-first indexing.

Meta titles / descriptions

Google search results on mobile allow more characters than desktop. Latest insights from SEOpressor shows you have a maximum of 71 for desktop and then 78 for mobile (although be aware actual size is based on pixels rather than characters).

Mobile SEO Graphic showing mobile SERP listing vs desktop

While you have more characters to play with, it’s still important to keep meta titles and descriptions informative yet concise.

A couple of tips I recommend are:

1. For titles:

  • Keep titles brief, accurate, and informative

  • Include your main keywords

2. For descriptions:

  • Include your main keywords

  • Keep descriptions accurate and informative

  • Limit characters to 160 maximum

Helpful mobile SEO tools

Here's a list of tools to help you perfect a mobile SEO strategy!

AMP

Consider Accelerated mobile pages (AMP) if your site is slow.

So, what exactly is AMP?

AMP is a Google-created web framework to make fast static webpages. It does this partly by using AMP HTML, which enforces best practices that establish a strong base for faster page loads. You can learn more about AMP and how it works here.

Because of its simplicity, not all code will work. Custom JavaScript code and more complicated HTML won't work. It does, however, allow custom CSS code, which you should also try to simplify.

You have likely seen AMP in practice in SERPs denoted by the lighting bolt icon.

AMP highlight in SERP

amp.dev is a great resource to explore further the benefits of AMP and how to get it implemented.

PWA

Are PWA (progressive web apps) the future?

Like AMP, PWA aren’t a requirement for a mobile SEO strategy, but they should be something you consider when building your mobile site.

PWA act like apps on your phone. But they’re actually websites with app-like features.

PWA intro

They come with a whole host of benefits such as:

  • Push notifications

  • Offline mode and they function better on slow networks

  • Self-updating

  • HTTPs-only

  • Easy installation without and app store

  • Discoverability through search engines

They replicate app features by implementing something called a service worker alongside using something called an app shell model. There is a great overview of them here.

Outside of features, they also offer a huge time-saving as if a company wants to create both a website and an app, they've previously had to do so separately.

That again means multiple codebases consolidated into one, just like when we considered the benefits of responsive design vs. dynamic serving/separate URLs.

On top of that, they’re incredibly easy to install; it’s as simple as adding them to your home screen from the site.

PWA install tutorial

Some popular examples of PWAs include:

I’d recommend installing one of the above to give them a go, as it’s amazing how closely they replicate app-like experiences.

Pinterest screenshot

Aside from time-saving, there are some other great benefits of creating a PWA.

As they're technically websites, they're visible to search engines meaning they can be crawled and therefore appear on the SERP.

They're also linkable. Again, as the app is through a website, other websites can link to it.

PWA are a great option for those looking to save time and provide a better UX through more app-like experiences on the web.

Conclusion

So there you have it, an in-depth guide to what Mobile SEO is, and more importantly, how you can adapt your SEO strategy to make sure it's mobile-first.