Step 17: Mobile SEO and UX Optimization
The long-predicted statistic finally happened in 2014 — mobile internet usage exceeded desktop internet usage in the U.S. (cited by CNN). People using smartphones and tablets accounted for 55 percent of internet traffic. Then in May 2015, Google revealed that more Google searches were taking place on smartphones than on computers. Today it’s clear that people use many different screen sizes, sometimes even simultaneously, to search for and access web content — so your website had better be optimized to be found in mobile search and work well across all devices.
Mobile SEO is crucial not just because smartphone users are the majority, but also because Google uses mobile-friendliness as a ranking signal in mobile search. In fact, Google continues to increase the weight of this factor in its ranking algorithm. So don't miss this step in the SEO tutorial, which focuses on mobile SEO to help you:
- Identify the size of your mobile audience.
- Optimize your website to be found in mobile search.
- Decide how best to set up your mobile site.
- Check your site to see if it's mobile-friendly.
- Improve your mobile user experience (UX).
Optimizing Your Site for Mobile SEO
What does the rise of mobile mean for your website and its search engine optimization?
Local searchers are where it's at.
Most organic searches yield a different set of search results on smartphones than on desktops (62 percent according to research). One reason is that mobile results factor in location quite heavily. Search engines want to show results located near the mobile searcher, especially if they have high ratings and reviews — particularly for queries with local intent such as "coffee shop" or "dry cleaner."
And according to Google, search is the starting point 48% of the time when people are doing research on a phone. So if you operate a local business, setting up your business correctly for local search is crucial for mobile SEO. (SEO tip: See Google My Business and Bing Places for Business for instructions.)
Whether you're a local business or not, though, every website must prepare to welcome mobile visitors and be found in mobile search.
How many mobile users access your site?
Let's begin by seeing how much of your website traffic comes from mobile devices now. A glance at your Google Analytics (free software we highly recommend you install) will reveal how people access your website. As the image below shows, if you select Mobile > Overview from the Audience menu, you'll see the exact percentage of site visitors coming to your website on a desktop vs. smartphone vs. tablet.
You might be surprised to see that a large number of people already find you using a mobile device.
Mobile SEO Part 1: Choosing the Right Mobile Configuration
The key to a good mobile user experience lies in choosing the best way to set up your mobile website. Many websites are misconfigured for mobile search or not configured at all, resulting in a huge loss in smartphone traffic. A website's mobile SEO rankings won't vary much based on which mobile configuration has been implemented, as long as they offer a similar good experience. The biggest impact will be on user experience and site maintenance. You have three setup options:
- Responsive design serves up the same content and URLs across all devices, but alters the layout and formatting to fit the user's window size (accomplished with CSS). This is Google's preferred mobile configuration, and it also makes website maintenance easier since you have only one version of the content to update. One possible downside for UX and SEO — page load speed may be slower with a responsive design than with the other mobile configurations. Care must be taken to preserve fast-loading pages (see Part 2 for more on safeguarding speed).
To implement a responsive design, you need to have HTML templates that can resize automatically based on the user’s device using CSS rules. If your website is on WordPress, this can be as simple as buying and installing a mobile-ready, responsive theme.
- Dynamic serving uses the same page URLs but different content depending on what device is being used to access your website. This dynamic solution works well if mobile users and desktop users have different motives, or if you want to serve content like videos, ads, and other large files to desktop users but don’t want to bog down your mobile experience. Dynamic serving requires the use of an HTTP "vary response" header so search engines don't think you're trying to hide content (see the technical SEO tips in Step 16 for more on avoiding cloaking and other red flags).
- A separate mobile site requires maintaining two separate websites with different URLs and different HTML content on each. This configuration can be best if mobile users have very different needs than desktop users, but site maintenance involves twice the work. You also run the risk of creating duplicate content for search engines if you aren't careful (see Part 2 for more on this).
The chart below sums up the three possible mobile site configurations:
Read more: A Cheat Sheet for Mobile Design explains pros and cons of each of these mobile configurations, while 8 Common Mobile Website Pitfalls to Avoid for SEO helps ensure proper implementation from the get-go if you choose the separate-mobile-site option. Google also has excellent content on implementing the three different options for supporting mobile content, which can be found on their Mobile SEO Overview page.
Mobile SEO Part 2: Must-Dos
The prerequisite for earning the “mobile-friendly” SEO boost is passing Google's Mobile-Friendly Test. Since that’s determined on a page-by-page basis, check each of your important pages. The results will list issues you might need to fix, or give you the “mobile-friendly” green light:
In this section, we’ll get more technical and outline some setup requirements for mobile SEO. Search engines prefer responsive design, but they support all three mobile site configurations. Regardless of which way you choose to set up your site, here are a few technical items to put on your mobile SEO checklist:
Tell search engines which page is formatted for mobile. Search engines look for cues in your HTML code that are different for each type of mobile configuration.
- Responsive sites should put the following meta tag in the head of each web document to signal that the page will adapt to all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Dynamically served sites need to use the Vary HTTP header in their response to each request. (For more information, see Google’s Help on setting up dynamic serving.)
- Separate mobile and desktop sites need to include <link> tags with rel="canonical" and rel="alternate" elements to show the corresponding URL for each page. (For more, see Google’s Help on annotating desktop and mobile URLs.)
Design for a good user experience on small devices. Mobile visitors are limited by their devices’ small screen size and reduced bandwidth. Keep reading for common mistakes to avoid and best practices for satisfying their needs so they’ll have a good experience on your site.
Part 3: Mobile UX Optimization – Making Mobile Users Happy
When it comes to your mobile SEO strategy, user experience (UX) is the single most important factor for success. A good mobile design welcomes visitors and helps them engage with your site. It can also impact your site's rankings in mobile search, since search engines prefer to serve mobile-friendly web pages.
Follow these tips for optimizing your mobile user experience to welcome potentially high-converting mobile visitors to your website.
Keep your mobile site simple and easy to navigate.
Have you ever visited a website from your smartphone that made you zoom and reposition the screen just so you could see it? A poor user experience like this causes most people to leave the site and find another with a more optimal mobile user experience. When it comes to mobile search, less is more. Make every word count with valuable content that is:
- Written with the mobile perspective in mind.
- Easy to access with clear and functional navigation options.
- Large enough to read in a font that is legible on a small screen.
- All in all, mobile-friendly. (Tip: Remember to check your important pages in Google's free Mobile-Friendly Test tool to see if they pass.)
Tailor your content to fit the needs of your audience.
Keep in mind that a mobile user's search intentions probably vary from that of a desktop user conducting a similar search. A mobile user searching for Chinese food may be looking for a phone number to order takeout, while a desktop user searching for the same thing may be looking for an online ordering option for delivery. Design your content to give users what they need.
For instance, in our responsive design for BruceClay.com (pictured), our navigation menu stays tucked neatly out of the way for mobile users, but can be accessed with an easy-to-press show/hide button. We also added a prominent "Call Us" and toll-free number, since we figured if someone is using a mobile phone to check out our various internet marketing services, they'll probably want to talk to us about their needs.
Optimize mobile site content for faster page-loading times.
As you may remember from Step 16 of this SEO tutorial, slow page-load speed can have a negative impact on your rankings. On a mobile device, a slow site feels even slower! This kind of poor user experience can kill your chances for mobile traffic and conversions. Google knows this, which is why they offer a mobile and a desktop version of their PageSpeed tool.
What's the biggest culprit of a slow mobile site?
Images. Optimizing those fat images for mobile SEO is the No. 1 thing you can do to improve mobile UX. The larger your image file sizes, the longer it will take your web pages to load, especially on a phone or other mobile device. Ways to keep your image files small include compressing your images, resizing images to make them smaller, and specifying the width and height dimensions in your HTML image tags.
Videos can also cause your web pages to take too long to load. Consider embedding smaller or lower quality videos to reduce the amount of data required, as long as it doesn’t impact the viewing experience too much on faster devices. Another option for downloads of videos and other large files is to offer several download sizes. Then users can choose which one best fits their current bandwidth and device. Always look for ways to satisfy your various users’ needs and give each visitor a good experience on your site.
SEO TUTORIAL BONUS
This video answers common webmaster questions about mobile-SEO best practices.
Googler Matt Cutts gives specific, technical advice here as he recommends how to tell Google what the mobile version of a page is (if you have a separate mobile site), or how to communicate to the search engine that there is no alternate mobile URL (for sites with responsive design or dynamic serving).
Finally, be sure to monitor how well your mobile SEO is performing. Many sites look at data for the whole website only, without realizing the story may be completely different for mobile vs. tablet vs. desktop users. Don't miss out on opportunities to "tweak" your mobile SEO for a more mobile-friendly user experience and a better conversion rate.
Speaking of monitoring — it's time to teach you the ongoing tasks every SEO needs to know. Next in the tutorial, you'll learn how to monitor your website rankings and other key performance indicators (KPIs) to track your SEO progress over time.
Related blog posts and articles:
Mobile Friendly SEO Ranking Boost Gets Boosted
The All-in-One Mobile SEO and Design Checklist
Unprecedented Google Announcement of a Mobile-Friendly Algorithm Change
The Good, the Bad, and the Mobile: SEO Tips for Your Mobile Site
8 Common Mobile Website Pitfalls to Avoid for SEO
The #1 Thing You Can Do to Improve Mobile UX: Image Optimization