In this chapter Iβll help you get the basics down.
So if youβre not sure if your site is mobile optimized, this chapter will get you on the right track.
Then, in later chapters, Iβll show you a bunch of advanced strategies and techniques.
What Is Mobile SEO?
Mobile SEO is the practice of optimizing a website to rank higher in search engine results pages (SERPs) on mobile devices, like smartphones and tablets. It’s essential in today’s digital world, as more and more people are using their mobile devices to search for information and access the internet.
Googleβs Mobile-first Index ranks the search results based only on the mobile-version of the page. And yes, this occurs even if youβre searching from a desktop.
Before this update, Google’s index would use a mix of desktop and mobile results.
So if someone searched from an iPhone, Google would show them mobile results. And if someone searched for something on a desktop, theyβd get βdesktop resultsβ.
Today, no matter what device you use, Google shows you results from their mobile index.
Iβll have A LOT more on making sure your site is optimized for mobile SEO in chapters 3, 4 and 5.
Is Googleβs Mobile-First Index a Big Deal?
It depends.
If your site is already perfectly optimized for mobile, you should be good.
So if your site…
Loads resources across all devices
Doesnβt hide content on mobile versions of your site
Loads quickly like mobile users expect
Has working internal links and redirects
Boasts a UX thatβs optimized for any device that your visitors use
Then yeah, youβre good.
If not, you may notice a rankings drop as Google rolls this out.
Thatβs why the rest of this guide is dedicated to helping you optimize your site for mobile.
But first…
What Does Google Consider βMobileβ?
To most people, a βMobile deviceβ means a smartphone or tablet.
However, Google puts tablets βin their own classβ and states: βwhen we speak of mobile devices, we generally do not include tablets in the definitionβ.
In other words, according to Google: mobile=smartphones.
Honestly, this shouldnβt impact your mobile SEO all that much.
The main idea here is to optimize your site for ANY device.
This includes phones, tablet… or anything else that Elon Musk invents in the future.
Chapter 2:How to Implement a Mobile Website That Ranks in Google
To succeed with mobile SEO today, your site needs to at least work on mobile devices.
So if mobile visitors get hit with a mini version of your desktop site, youβre in trouble.
Fortunately, implementing a mobile website isnβt hard or complicated.
And in this chapter Iβm going to lay out a few different ways that you can implement a mobile version of your website (with a focus on SEO for mobile).
When It Comes to Mobile, Youβve Got 3 Options
There are 3 different ways to configure your site for mobile.
1
First, youβve got Separate URLs (this is also known as an βM.β configuration).
With this setup, you have the βmainβ desktop version of your site. You also have a mobile version (βM.β) version of your site.
In other words, your site figures out what device your visitor is using… and then directs them to a URL optimized for that device.
Separate URLs were popular back in the day. Today? Not so much.
Why? First, theyβre a huge pain to manage.
Also, βM.β sites have a host of SEO issues (like the fact that you need multiple URLs for every piece of content on your site AND that it requires complicated βrel=canonicalβ and βrel=alternateβ tags).
In short, I DONβT recommend a separate URLs/βM.β configuration. Itβs by far the worst way to configure your site for mobile SEO.
2
Next up, we have Dynamic Serving.
When you serve content dynamically, all of your content is on the same URL. But you show each user different HTML/CSS depending on the device theyβre using.
For example, if you visit https://backlinko.com/seo-tools on a desktop, youβd get served a pre-made desktop version of the site:
But if you visit the page from your iPhone 8, youβd still be on https://backlinko.com/seo-tools, but would get shown the βiPhone 8β version of the page:
Dynamic serving is definitely better for SEO than having an βM.β version of your site. But it has issues.
For example, dynamic serving sites are notorious for showing desktop versions to mobile users.
You also need to constantly create different versions of your content for new devices that come out. If you donβt, your site may not recognize a new device… and show them a version that looks terrible on that device.
In short, I DONβT recommend serving dynamic versions of your pages to mobile visitors. Instead, I recommend…
3
Finally, we have Responsive Design.
I saved the best for last.
With Responsive Design, your pageβs layout and content responds to each individual user.
The best part? Responsive design pulls this off without separate URLs or different HTML for each device.
In terms of being SEO-friendly, Responsive Design blows all other options out of the water.
Why? In short:
All of your content is on a single URL (good for sharing and getting links)
As you can see, I passed. But the tool let me know that mobile Googlebot had trouble loading all of the resources on my page:
Desktop Googlebot had no issue crawling these resources. But the mobile version couldnβt do it.
And with Googleβs Mobile-first index now live, this is a potentially serious issue. And itβs something I wouldnβt have known about without this tool.
Super duper helpful.
Let Google Crawl Everything
Do you block Googlebot from accessing Javascript, CSS or other important parts of your siteβs code?
This used to be no big deal. But today, this is a VERY bad idea.
Unless Google can fully crawl your page, they canβt tell itβs mobile-friendly or not.
And if theyβre not sure itβs mobile-friendly, good luck ranking in the Mobile-first index.
How do you know if this is an issue?
First, check out your robots.txt file. This tells Googlebot to not crawl or index certain parts of your site. This file is usually found at site.com/robots.txt. You can also see it inside of the Google Search Console.
While youβre there, click on βGoogle Indexβ —> βBlocked Resourcesβ. This will let you know if youβre blocking Googlebot from crawling certain parts of your site.
If youβre not blocking anything important, youβre set.
Put the Kibosh on Interstitial Popups
I know: everyone HATES popups.
Iβm not going to get into that debate here. But I WILL tell you that Google also hates popupsβ¦ especially for mobile users.
Remember: Googleβs #1 job is to show their users amazing content. And if that content is hidden behind a giant popup? Itβs not all that amazing anymore.
So if you use a giant popup on your site, this could seriously impact your rankings.
How do you know which popups are OK?
Google gives a few examples of acceptable popups…
…and popups that can get your site penalized.
How Does Your Responsive Site Actually Look? Check Out This Cool Tool
Itβs one thing to see how Google views your mobile site.
But nothing beats actually seeing your site on different devices.
So if you use responsive design on your site, I recommend checking out this free tool.
Itβll show you how your site looks on iPhones, tablets and more:
As it turns out, I look just as handsome on a phone as I do on a tablet. I love this tool!
Use The Mobile Version of βFetch as Googleβ
Like most people, Iβm a visual learner.
Sure, itβs nice to see a laundry list of potential Mobile optimization issues.
But personally, itβs much more helpful to actually SEE how Google sees my page.
Thatβs why I recommend spot testing a few pages on your site using the Google Search Consoleβs βFetch as Googleβ feature.
Just enter a URL of a popular page from your site into it:
(Make sure to choose βMobileβ from the dropdown box)
And theyβll show you exactly what the Googlebot saw. You can even scroll down to see if Google missed anything (like images, videos, menus etc.).
Very helpful.
Let Mobile Users See It All
Back in the day, people would block certain resources from mobile users.
(For example, they might hide some content…or block javascript from loading)
These people werenβt doing anything shady. Blocking these resources helped their page load faster on mobile devices. And it sometimes improved the mobile experience.
Hereβs an example of what I mean:
See how you need to hit βRead Moreβ to see all of the content? This might be a problem with Googleβs Mobile-first index.
Why?
With Mobile-first, Google considers your pageβs mobile version the βmainβ version.
And if your content is hidden to mobile users, they may not index or crawl that content. Or they may weigh it differently.
In the past, when it came to hiding content for desktop users, Google has said that:
“If something is relevant to the page, then it’s probably relevant to the user too, so I’d recommend showing it to the user.”
“On the mobile version of the page it can be that you have these kind of tabs and folders and things like that, which we will still treat as normal content on the page. Even if it is hidden on the initial view.”
He also said that, when it comes to Mobile-first:
“If itβs critical content, it should be visible.”
Huh?
Iβm going to wait for an official announcement on the Google blog before making a final say on this.
In the meantime, hereβs my take:
If you block or hide content from mobile users, Google will ignore that content or put less weight on it.
Bottom line? Use your site on a few different phones. If desktop users see something mobile users donβt, I recommend getting that fixed ASAP.
Chapter 4:How to Optimize Your Mobile Site for UX Signals
As you know, SEO today is less about messing around with meta tags and more about having an awesome site.
This tool lets you know how quickly your site loads on Mobile…
…and gives you some recommendations that you can implement to speed things up.
I also recommend checking out WebPageTest.org. By default, the tool will load your site on a desktop browser. So make sure to choose a mobile browser from the menu:
And youβll get a list of suggestions specifically adapted for mobile browsers:
This guide will help you tweak the nuts and bolts of your site so it loads lightning-fast.
Make Your Content Insanely Easy to Read on Phones
Do users have to pinch, scroll or squint to read your mobile content?
Then theyβre going to hit their βbackβ button like thereβs no tomorrow.
For example, you donβt want your content to look like this:
Yes, this page is technically optimized for mobile. But itβs hard as heck to read.
Instead, you want your font to be big, bold and legible, like this:
So:
How can you make your mobile content more readable?
Use at least 14px font (I prefer 15 or 16)
Use short paragraphs (1-2 lines per paragraph)
Go with a line length between 50-60 characters
Make sure thereβs tons of contrast between text and background (people use phones outside, which can make low-contrast text harder to read)
It also helps if your content is actually good. But thatβs another story π
Use HTML5 For Video and Animated Content
Do you embed videos in your content? Or does your page perform all sorts of fancy animations when people visit?
Well, if that content is coded in Flash, itβs not gonna work on mobile devices.
Instead, you want to code that up in HTML5.
Donβt Forget the βViewport Contentβ Tag
Do you use responsive design? If so, donβt forget the viewport meta tag.
This tag changes the size of your page based on the userβs device.
And Google recommends that you setup your viewport meta tag like this:
If you forget this tag, or if itβs not configured correctly, your site could look funky to mobile users.
So yeah, a friendly reminder to double check that you have this set up.
Implement These 3 Quick Mobile UX Hacks
These are three quick tips designed specifically to boost your siteβs usability for mobile Google searchers.
1
Make Header Images Really Small
Mobile Google users want their answer NOW.
Which means you donβt want to use giant header images, like this:
Instead, either delete them or make them smaller for mobile visitors, like this:
2
Use Lots of βNegativeβ Space
Negative space is the space between text, buttons and design elements. And negative space is REALLY important for mobile sites.
On a desktop, you can get away with a cluttered page.
But on a phone, a cluttered page is IMPOSSIBLE to use.
This is especially important for content that you want to rank in Google. If a Google searcher has trouble reading your content or finding what they need, theyβll bounce back to the search results.
And using lots of negative space, like this, is one simple way to improve your siteβs dwell time and bounce rate:
3
Put Social Share Buttons as a Tab Bar
The fact is: social sharing buttons can SIGNIFICANTLY increase the amount of shares your content receives.
That said, social share buttons work best when theyβre in the sidebar, like this:
That way, theyβre not distracting. But if someone wants to share — boom! — the buttons are right there.
Problem is: this setup isn’t possible on mobile.
Thatβs why I recommend using a tool like Sumo, which displays social icons as a tab bar at the bottom of the page.
Simple.
Chapter 5:Advanced Mobile SEO Tips and Best Practices
Now that your site is mobile optimized, itβs time to take things to the next level.
In the last chapter of this guide weβre going to blast through a handful of advanced mobile SEO tips, strategies and best practices.
And if Google sees that mobile users donβt click on your result, theyβre going to downrank you.
But how do you know if your CTR is up to snuff? Hereβs the exact process:
First, head over to the Google Search Consoleβs Performance Report.
Next, click β+ Newβ.
Click βDeviceβ
And hit βCompareβ to compare desktop vs. mobile:
Finally, take a look at how your desktop and mobile CTR size up.
If you notice that your desktop CTR crushes your mobile CTR for a certain keyword, search for that keyword in Google (on your phone).
It could be that your title tag is getting cut off (more on that later). Or it could be that the mobile SERPs have features (like more ads) that are crowding out the organic results.
Either way, youβll usually come away with an insight that you can use to bump up your mobile CTR.
Turn Mobile Donkeys Into Unicorns
Googleβs Mobile-first index means that Google will start to put more weight on mobile UX signals.
In other words, if mobile searchers bounce from your site like crazy, thatβs going to put a damper on your rankings.
Thatβs why I recommend comparing your Desktop vs. Mobile bounce rate and dwell time in Google Analytics.
Itβs actually super easy and well worth the effort.
To do it, login to your Google Analytics account. And hit βSite Contentβ–>βLanding Pagesβ.
This will show you the most popular pages on your site. Click on a page that you want to get more traffic to.
Then click βSecondary Dimensionβ–> βDevice Categoryβ.
Thisβll show you how your UX signals compare on desktop vs. mobile.
For example, for this page, my bounce rate and dwell time are almost identical. So this page is probably optimized well for mobile users.
But if GA tells you that thereβs a big difference between desktop and mobile visitors, visit that page on your phone.
Youβll probably notice something funky thatβs causing mobile users to spend less time on your page.
Then, when youβre done, move onto our next tip.
Boost Your Mobile Page Speed With These 3 Tips
Like anything with Googleβs Mobile-first update, Google will now look at your siteβs mobile page speed. Will your desktop site speed still matter? Maybe.
But itβs definitely not going to be as important as how your site loads on mobile devices.
Hereβs how to add some rocket fuel to your siteβs mobile loading speed.
This test is similar to any other site speed testing tool, except that it zeroes-in on mobile loading speed. It even loads your site in 3G to simulate a mobile environment.
And you get a helpful report that tells you how long it takes for your site to load on a mobile device…
…and shows you how to remove load speed roadblocks:
Here are some other quick tips to try out:
Squish your images: If you use WordPress, I recommend installing an image optimizer, like Smush Image Compression. These SIGNIFICANTLY reduce the file size of your images, which can speed up load times dramatically.
Implement Browser Cache: Google themselves recommend caching your site to make your site load faster.
Fire Up a CDN: CDNs can make page elements (especially images) load 2-3x faster.
Optimize Title and Description Tags for Mobile SERPs
Do you get the vast majority of your organic traffic from mobile?
Then you may want to optimize your title and description tags specifically for the mobile search results.
Here’s how:
Believe it or not, but Google actually gives you MORE title tag characters to work with on mobile.
Hereβs the exact breakdown:
Desktop
Title: Approximately 70 Characters
Description: Approximately 155 Characters
Mobile
Title: Approximately 78 Characters
Description: Approximately 155 Characters
In other words, if your title tag is 69 or fewer characters, your title wonβt get cut off on desktop or on mobile.
But letβs say you get lots of mobile traffic. Well, you may want to expand your title tag and take advantage of that extra room… even if it pushes you over the desktop character limit.
For example, letβs say your title tag looks like this:
Thatβs 66 characters. So this title will display in-full on desktop and mobile.
But letβs say you wanted to use a word or phrase thatβll bump up your CTR. Your title tag would now look like this:
Thatβs 78 characters.
Yes, 78 characters means that Google will truncate your title tag on desktop searches. But itβll show up just fine on mobile.
But if desktop only makes up a small chunk of your traffic? It may be worth it for the CTR bump youβll receive with a longer title tag on mobile.
Should You Implement AMP?
Accelerated Mobile Pages are stripped-down versions of webpages designed to load quickly on mobile devices. In fact, AMP pages load about 4x faster than their non-AMP counterparts.
As you may know, Google has led the charge on AMP.
And because AMP is a Google project, lots of SEOs rushed to implement AMP for their clients’ sites.
(The assumption is that Google will reward AMP-friendly sites with higher rankings).
Higher rankings aside⦠Google also shows a little icon next to your result in the search results that may boost your CTR:
With all that, the question is:
Does it make sense to use AMP?
The choice is yours, of course. But my take is: probably not.
Hereβs why:
First, AMP puts SERIOUS limits on your pageβs functionality.
Want full control of your ads? Not happening.
How about a lightbox or popup? Nope.
Well, you can at least brand your site however you want, right? Not so fast. AMP puts significant restrictions on CSS. This helps your site load faster⦠but makes your content look generic.
Second, AMP can hurt your link building efforts.
When someone links to your content, those links point directly to your site. Obvious, I know.
But hereβs the deal:
When someone links to your AMP pages, that link points to the Google.com domain.
In other words, AMP can cost you in the link department.
So at least for now, links to AMP pages boost Googleβs domain authorityβ¦ not yours.
So the idea of jumping through a thousand hoops for a tiny increase in mobile loading speed makes little sense today⦠and will make even less sense moving forward.
Bottom line? Unless you have a compelling reason to do so, I donβt recommend AMP for most publishers.
Use Schema Structured Data To Stand Out in Mobile SERPs
As you probably know, mobile SERPs display the search results as cards:
Well, structured data can hook you up with review stars, recipe images and event dates in the SERPs… all of which can significantly increase your organic CTR.
For example, look at how much the Downshiftology mobile result stands out from ToddyCafe.com. This contrast isnβt nearly as powerful on desktop:
Bottom line? If you want more clicks from mobile Google searchers, consider implementing structured data.
Now It's Your Turn
So thatβs it for my guide to mobile optimization.
I hope you enjoyed it.
Now Iβd like to hear your take:
What are you doing to get your site ready for mobile SEO?
Or maybe you have a question about something from todayβs guide.
Either way, let me know by leaving a quick comment below.