Mobile SEO and Usability
By Matthew Edgar · Last Updated: November 25, 2019
What It Is
Visitors using mobile devices account for the largest share of traffic to most websites. The latest numbers indicate the share of mobile visitors now stands around 39%, though some industries have upwards of 70% of visitors using a mobile device. Of course, other industries see that only 20% of their visitors use a mobile device. If you want to find out how much of your traffic uses a mobile device, check out our video about accessing mobile device stats in Google Analytics.
Types of Mobile Support
Responsive Websites
The most common way of creating a mobile website is with a response design. With a responsive design, your website’s design code (CSS and JavaScript) determines how to transform the page’s layout to fit on larger or smaller screens. With a responsive design, you only have one website, but that one website is smart enough to adapt (or respond) to different size screens.
The advantage to a responsive design is you do not risk duplicated content or altered URLs between the desktop and mobile websites. No additional tags are needed to point Google’s robots from one alternate page to another. The other advantage of responsive design is that there is only one website to manage internally.
The hardest part of responsive design is determining how your design should scale from large to small screens. As an example, a desktop design might include a left sidebar and then a larger right column containing the main content. Instead of being hidden from view, the mobile version swaps the columns for a single column with the left sidebar stacked on top of the main content. This becomes frustrating for visitors as the content they came looking for on the page—in this case, the main content—is beneath the sidebar content on mobile devices and it requires excessive scrolling to reach. To avoid these problems, be sure to review each page of the mobile version of your website’s design and check that key content is nearest the top of the page and generally easy to access. If the responsive design accidentally placed something on top of that key content, work with your designer and developer to fix it.
Mobile-Dedicated Websites
While less commonly used, another option is to create a mobile-dedicated website. There are two types of mobile-dedicated websites:
- Dynamic Serving. With dynamic serving, the same URLs are used for mobile and desktop websites, but the HTML is different across devices. When a visitor requests a page, the web server detects what device a visitor is using and returns the appropriate HTML.
- Separate Domain. With a separate domain, both the URLs and HTML code are different between mobile and desktop devices. When a visitor requests a page, the web server detects what device is being used and routes the visitor the appropriate URL. Note that you’ll sometimes see this type of dedicated site referred to as an “m-dot website” as many companies place this at an “m” subdomain (as in, m.elementive.com).
Unlike responsive websites, when people attempt to reach a mobile-dedicated website, they are shown the specific mobile website instead of a variation of the website shown on desktop devices. This leads to one of the biggest questions to address with dedicated websites: how similar is the mobile website to the desktop website?
Depending on the exact configuration, the code, content, images, and design can be somewhat different or completely different from that shown on the desktop website. For example, some pages might not be available on the mobile website but are on the desktop website. If each website is substantially different, there can be internal challenges with developing, managing and maintaining different websites. As well, the differences can potentially confuse visitors who access your website on multiple devices.
For mobile dedicated websites using separate URLs, there is also a duplicate content concern. Let’s say, as an example, that your desktop website’s about page is domain.com/about and the mobile website’s about page is m.domain.com/about. If the content is nearly (or completely) identical between the two pages, it will seem like you have created two duplicate pages. To avoid the risks of duplicate content, you want to use an “alternate” element. In the about page example, that alternate element would look like this on the desktop website:
<link rel="alternate" href="http://m.domain.com/about">
On the mobile page, you would place a canonical element referencing the desktop version of the page. This tells robots, like Google’s search robot, that the desktop version is the official version of the page.
<link rel="canonical" href="http://www.domain.com/about">
Mobile Usability Factors
In April of 2015, Google announced that mobile usability would be a ranking factor. That means, without correctly supporting mobile users you risk losing traffic from Google. Of course, without these factors in place, your website would likely be difficult for people to use too. So, generally, these factors are good for the humans visiting your website along with benefiting your SEO performance too.
Those factors are:
- Ensuring that your website’s text that is readable without zooming.
- Sizing content to the screen so users don’t have to scroll horizontally or zoom in order to view what is contained on the page.
- Placing links far enough apart so that the correct one can be easily tapped.
Google offers a free mobile-friendly test to evaluate if your website meets these standards.
This information can also be accessed in Google Search Console with the “Mobile Usability” report.
Truly delivering a good mobile experience goes beyond these guidelines Google has provided. So, we recommend treating these guidelines and Google’s tests as only the beginning for creating a friendly and usable mobile website.
As you consider mobile usability one of the most important things to remember is that not all mobile-device experiences are the same. A 320-pixel wide browser size doesn’t offer the same experience as a device with 410-pixel wide browser size. The same goes for height; 620 pixels of height is a very different experience than 450 pixels of height. A vertical orientation is different than a horizontal orientation. Simply having a responsive design that works on mobile devices doesn’t mean you are delivering a good experience for all the different kinds of mobile devices that are available.
Often, you will find that people on different mobile browser sizes interact in different ways. One client we worked with had substantially different conversion rates on small and mid-size mobile screens—the mobile experience at these screen sizes simply wasn’t good enough so people weren’t converting. But people were converting on somewhat larger mobile screens. It turned out, the steps to convert weren’t obvious enough on smaller screens. However, by altering the design on the smaller screen size, the client was able to improve their conversion rate on these smaller screens to more closely match the conversion on larger mobile screen sizes.
Does this broader approach to mobile usability directly impact Google’s evaluation of the website? No. But it can indirectly influence Google’s evaluation as websites that are friendlier on mobile devices will tend to get shared more, get linked to more, and, overall, have a stronger reputation from visitors. All of that will then help the website rank higher.
Along with testing out your website in Google’s testing tool and reviewing errors in Google Search Console, review your mobile browser sizes and compare the ways users interact on the different devices. What differences do you see on smaller or larger mobile screens? Are those differences positive (more conversions on certain sizes) or negative (accidental behavior)? How can you alter your responsive design to work across different size screens? As well, visit your website on these different size screens and see what kind of experience you have (or, have a sample group of users visit on these sizes and see where they struggle). What is harder or easier to use as the screen size changes and how could that affect conversions or engagement?
Mobile First
Starting in 2018, Google introduced mobile-first indexing and as of March 2021, Google has said it is going 100% into mobile-first indexing. As the name suggests, this means that Google crawls and evaluates the mobile website first and uses what is found on the mobile website to decide where to rank the website in search results. Google will still crawl the desktop website as well but often not as often as they crawl the mobile website and what their bots find on the desktop website may not influence what is ranked in search results as much. You can tell which site Google is crawling by viewing which bot they are using in the Crawl Stats report in Google Search Console.
The most important consideration as you think about mobile-first indexing is the equivalency between the desktop and mobile websites: do your mobile and desktop websites share the same content and serve the same general purpose?
For some websites, that isn’t the case. It is common practice to remove some content from the mobile website that is present on the desktop website. This is fine so long as what gets hidden is only unessential content. For example, hiding a sidebar menu from the mobile website makes sense as there isn’t room for a sidebar on a mobile display. As another example, hiding superfluous images that were only included for a design aesthetic on the desktop website might be helpful to improve the mobile website.
However, hiding any main content—text, images, videos, features—from view is where you run into problems. Google needs to see this content on mobile to determine where to rank your website. If they can’t see this content on mobile devices, they might miss key content and not include your website in relevant search results, leading to a loss of traffic. Human visitors typically want to see the same content too—most people will visit a website from both their phone and desktop devices expecting to find the same information regardless of the device used. Instead of hiding this key content, decide how to position these elements so robots and humans, regardless of the device used, can find them.
To determine if you have a problem, attempt to find the same content on your desktop and mobile websites. Can you? And is it just as easy? Is that same information located in basically the same areas, and can you navigate to that information in basically the same ways? Along with your own experiences, check your analytics account to see what differences exist in the pages people visit by device—if certain pages aren’t visited by users on a desktop or mobile device, is that because those visitors aren’t interested in that information or because visitors can’t locate that information?
Resources
- Evaluating Mobile Usability Video Series (From Elementive)
- Mobile SEO Overview
- Responsive Design
- Mobile First Indexing
Technical SEO Services
Want help improving your website’s technical SEO factors? Contact me today to discuss how I can help review and improve your current technical structure.
Prefer a more DIY approach? Order my book, Tech SEO Guide, a reference guide to help you address the technical SEO issues on your website. Order now at Amazon.
