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.
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!
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.
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:
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.
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.
The mobile-first index has been rolling out since March 2018.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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:
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.
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 theof 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.
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.
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.
In the old desktop-first world, content hidden in expandable menus or tabs was viewed negatively, as content not visible was devalued.
no, in the mobile-first world content hidden for ux should have full weight— Gary 鯨理／경리 Illyes (@methode) November 5, 2016
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.
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.
Via @johnmu: For content hidden in tabs on mobile pages (m-first indexing), Google will use that for indexing & ranking, but WILL NOT show that in the snippets in the search results. If G shows it in the snippet, the user should be able to see it on-load: https://t.co/4HwV5iGrYi pic.twitter.com/mOZytwI2JT— Glenn Gabe (@glenngabe) May 16, 2019
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.
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
You ideally want to be in the green 90-100 spot. Anything lower and you have work to do!
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.
- 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.
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).
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!
- Mobile Usability report: Details usability issues and steps to fix these issues.
- Is your page mobile friendly?: Determine if a URL is mobile friendly and see how the page displays on a mobile device.
- Rich results for seeing how your mobile result will display: Identifies the rich results that can be created from the structured data a site currently uses.
- Lighthouse in Chrome for testing: Audits a page for performance, accessibility, progressive web apps, SEO. The report lists issues and how to fix them.
When optimizing for mobile SEO, it is important to make sure you take a mobile-first approach to auditing as well. That means crawling the website using a mobile crawler (easily done with Screaming Frog, Site Bulb & Deep Crawl), compare the mobile crawl against a desktop crawl, and see what irregularities that you might find.
Real estate on mobile SERPs are also much smaller, make sure the length of your title tag and meta descriptions are shorter and punchier.
Lastly, make sure the rank tracker that you are using supports mobile rankings, and if you are focussing on local ensure that you are tracking rankings at a local level too. Checkout the toolset from Mobile Moxie.
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.
You have likely seen AMP in practice in SERPs denoted by the lighting bolt icon.
amp.dev is a great resource to explore further the benefits of AMP and how to get it implemented.
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.
They come with a whole host of benefits such as:
- Push notifications
- Offline mode and they function better on slow networks
- Easy installation without and app store
- Discoverability through search engines
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.
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.
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.
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.
Sam Underwood, a digital marketing expert with proficiencies in SEO, data analysis, site speed, CRO/UX and content strategy.
Sam has experience working on enterprise search strategies for some of the UK's largest brands such as AO, Reiss & Compare The Market.