Mobile Friendliness

This article describes the Mobile Friendliness Test Tool, which you can find under Tools & Diagnostics in Webmaster Tools as well at this direct link.

Using the Tool

You can check whether or not your page is considered mobile friendly by Bingbot by entering the URL of the page in the URL input box and clicking or tapping Analyze. Once you click Analyze, a Bingbot mobile crawler with fetch the page from your website and send it to the mobile friendliness classifier for a real-time verdict. Note that it takes some time to fetch and analyze the page and show the verdict.

. Mobile Friendliness: A Page that is Mobile Friendly
noteNote
When showing results on mobile devices Bing regularly adds a "mobile friendly" label to pages that are considered mobile friendly. However, passing the Mobile Friendliness Test doesn't automatically guarantee that this label will show for your page, but the tool provides a great way to ensure your page is meeting the prerequisites to be labeled as such.

Factors that Determine Mobile Friendliness

When it comes to mobile friendliness, there are several goals to pursue in improving your site's user experience: presentation, content, and performance. Presentation is predominantly around what a page look like on a given device. Content is about adjusting what you are showing on a mobile device with regard how users expect to interact with. For example, an airline's website on a PC may be focusing more on allowing users to book trips, whereas the mobile site may be more focused on check-in, showing the boarding pass, and flight status. Performance really focuses on providing a smooth experience to users, especially in absence of the gobs of bandwidth we've come to expect in our homes.

When Bing shows search results to users on mobile devices - be it through Bing apps or Bing on the mobile browser, we prefer results that take these goals into account. So, we classify pages as being "mobile friendly" based on a set of characteristics that are derived from these goals. The most evident characteristics are those that pertain to presentation: how the site renders (that is, is shown to a user) on a mobile device. They are also the key features tested by Mobile Friendliness Test Tool. In the below, we will discuss the following factors in more detail:

  • Viewport configuration
  • Zoom configuration
  • Content Width
  • Readability of text
  • Spacing of links and other content

Viewport Configuration

Mobile browsers render web pages in what can be described as a "virtual window" (the viewport). The web developer has control over the size and scale of the viewport using the viewport meta tag. A mobile-optimized page usually uses the following viewport <meta> tag which should be placed in the <head> section of the page:

<meta name="viewport" content="width=device-width, initial-scale=1">

The meaning of this is as follows:

  • The width property controls the width of the viewport and here is set to device width.
  • The initial-scale property controls the zoom level when the page is first loaded.

You should always set the viewport in your mobile pages. If not set, our Mobile Friendliness Test will tell you about the error and mark the factor Viewport Configured Correctly with a red X (failed).

Mobile Friendliness Tool: Viewport not configured correctly

Zoom Configuration

The Zoom configuration check determines if the viewport settings are setup to unintentionally prevent zoom in and zoom out of the page on mobile surfaces. If an issue is identified with the setting, an error is returned (Zoom control is restricted), along with extra information about how to prevent the issue.

Mobile Friendliness Tool: Zoom control

In certain cases where it is determined that zoom might have been intentionally disabled on the page, no warning or error is returned.

Content Width

On mobile devices users are used to scroll vertically. However, when the content of your page is wider than the viewport you set it does not fit horizontally. The user would in that case need to pan or scroll horizontally to see the content, which is not considered mobile-friendly. If that is the case, the tool will fail the check Page content fits device width.

Readability of Text

Ideally, the text shown on the mobile device should be legible without the user needing to zoom or pinch the screen. If your page fails this test, you will see the error Text on page is too small.

Link Spacing

Links should be easy to tap, so if links or other tap targets are very close to each other, it becomes harder for the user to accurately tap the link. Should your page fail this test, you will see the error Links and tap targets are too close together.

Compatibility Checks for Non-Mobile Friendly Technologies

It is important to understand that most, if not all, mobile devices, do not support technologies such as Flash or Silverlight. Therefore, having Flash or Silverlight elements on your pages for mobile devices is considered detrimental to the experience and should be avoided. If your page requires these technologies and is showing a message to the user on mobile devices, we will show you this message along with a warning that your page contains a compatibility message. This message may also be shown if you are on a page which contains content that has not been made available to mobile users as shown in the example below:.

Compatibility Messages

Important Resources Blocked from Bingbot

To determine mobile-friendliness, Bingbot needs to be able to view the page as if it were loaded in a mobile browser. To understand the presentation of the page, all resources needed to do this should be accessible to the mobile crawler. Therefore, it is imperative to not block resources needed to render the page (such as script, CSS, or images) from Bingbot using robots.txt disallow: rules or otherwise. When we find that certain resources cannot be fetched by Bingbot, we will show you in the Mobile Friendliness Test Tool which elements those are, so that you know which disallow: rules should be removed.