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.
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:
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.
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.
In addition, you can run a competitor analysis and find out how they solved this problem.
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.
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.
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 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.
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.
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.
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.
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.
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/)
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.
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.
on desktop content in page elements like accordions is devalued or not indexed. Is this the same when crawling mobile content?
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.
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.
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/4HwV5iGrYipic.twitter.com/mOZytwI2JT
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.
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!).
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.
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.
Mobile SEO has evolved over the years, moving from separate Google indexes to one, singular mobile-first index. This change brought about some worry for a lot of businesses and marketers, but it can be a lot easier than you think!
A large majority of SEO techniques you use and implement in a desktop site will also hold weight from a mobile SEO perspective. Personally, I think the most important aspects to focus on for mobile SEO could actually be classed as standard UX practices.
Ensure your site speed is as quick as it possibly can be for mobile devices, make sure your CLS score is good and that your website elements are stable upon loading, check your customer journey is efficient and easy for mobile users and rigorously test how accessible and enjoyable your website is on mobile devices.
That isn’t an exhaustive list by any means, but all of these points can be monitored within search console reports and through testing the website yourself, making them easy and cost-efficient. If you’re wanting to improve your mobile SEO, focus on making your website a mobile user's dream.
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!
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.
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.
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.
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.
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.
