Mobile SEO & Usability

What It Is

Visitors using mobile devices account for the largest share of traffic to most websites. If you do not support this mobile traffic well, you risk losing visitors and customers. You also risk losing traffic from search engines.

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.

In this guide, we’ll discuss the main factors you need to consider so that you can create the best mobile website—for human and robot visitors.

Types of Mobile Support

Generally speaking, there are two technical methods you can use to support mobile visitors: dedicated website or responsive design.

Dedicated Websites

A dedicated website can mean several different things. In general, this means an entirely separate website has been built to support mobile visitors. When people attempt to reach your website from a smartphone, they are shown the specific mobile website instead of your main website.

One of the biggest variations among dedicated websites is how similar the mobile website is to the desktop website. Depending on exact configuration, the code, content, images, and design can be different from that shown on the desktop website. For example, some pages might not be accessible on the mobile website but are available on the desktop website. If each website is substantially different, there can be internal challenges developing, managing, and maintaining different websites. As well, the differences can potentially confuse visitors who access your website on multiple devices.

The biggest concern with dedicated websites is that often the mobile website has entirely different URLs. For example, your desktop website’s about page might be domain.com/about, but the mobile website’s about page is m.domain.com/about. This risks duplicate content, especially if the content is nearly (or completely) identical between the two 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. 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">

Responsive Websites

Another option, and the more commonly used option, is to create a responsive design. With a responsive design, your website’s design code (CSS typically, though sometimes with JavaScript code too) determines how to transform the page’s layout to fit on larger or smaller screens. Unlike a dedicated website, 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 downside to responsive design is deciding how to scale a small website up to a larger size or scale a larger website down to a smartphone size. It is tempting as you scale from large to small screen sizes to hide some content from view in order to simplify the design. However, this can make your website appear like it is attempting to hide something from view, potentially risking a spam action from Google. As well, hiding content on one device can annoy human visitors since they generally expect your website to contain the same information whether visiting from a smartphone, laptop, desktop, or tablet.

To avoid these complications, it is best to only hide things that aren’t essential. 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, etc.—from view is where you risk problems. Instead of hiding, decide how to position these key elements so robots and humans, regardless of the device used, can find them.

Finally, with responsive design, it is a common mistake for items to scale down incorrectly. For instance, 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 buried and 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. If the responsive design code accidentally placed something on top of that key content, work with your designer and developer to fix it.

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:

  • Avoiding software that is not common on mobile devices, like Flash.
  • 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.

Google Mobile Friendly Test Results

This information can also be accessed in Google Search Console. Under Search Traffic, click “Mobile Usability”. 

Google Search Console Mobile Usability

This page will then list all the issues found. Clicking on an issue will list all the pages with that problem.

Google Search Console “Mobile Usability Details

Mobile First

For some time, Google has also been discussing a shift toward “mobile-first” indexing. As the name suggests, this will mean that Google looks at the mobile website first to evaluate the website, instead of looking to the desktop website first. Provided your website’s content is similar between mobile and desktop, there doesn’t appear to be much to worry about with this change. We’ll update this resource as Google rolls this change out.

AMP

AMP stands for "Accelerated Mobile Pages." It was a project designed by Google to create faster-loading mobile web content. Utilizing AMP capabilities can make your website friendlier for visitors using smartphones and has some potential boosts for your SEO performance too.

AMP works by stripping your website’s pages down to the essentials. It removes unnecessary JavaScript and CSS code, especially the code that can block your website from loading. AMP also relies heavily on making content static and caching it, instead of continually loading content from a database. Through all of these changes, AMP significantly boosts speed.

While you gain in speed, though, you do lose a lot of flexibility over the ultimate design of an AMP page. You want to be careful not to sacrifice your past website investments and ad revenue that will likely be stripped down by implementing AMP on every single page.

The best pages to use for AMP are the ones with the most content. Remember, the first websites to adopt this concept were news publishers and similar content-heavy websites. You should consider using AMP for pages like blog posts or product descriptions as AMP can increase speed and because it removes many design elements from the website too, it can help boost readability.

One of the hardest parts of AMP is that AMP projects use a different kind of web analytics script than the typical Google Analytics install. This requires a different type of code to track how your website performs. You can't see for yourself exactly how your AMP pages are performing without reliable tracking. So, making sure your analytics work correctly on AMP pages is highly recommended.

Resources

Technical SEO Services

Want help improving your website’s technical SEO factors? Contact us today to discuss how we can help review and improve your current technical structure.

CONTACT ELEMENTIVE