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 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.
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.
In addition, you can run a competitor analysis and find out how they solved this problem.
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.
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.
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.
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:
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/)
And this in the head of the mobile page (https://m.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.
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.
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.
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.
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
You ideally want to be in the green 90-100 spot. Anything lower and you have work to do!
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.
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.
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.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.
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.
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.
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.
