Earlier this year, we shared our approach to mobile-friendly search and ranking and talked about our plans for Webmaster tool additions that will aid site owners in their efforts to create mobile-friendly sites. Today, I am happy to introduce you to Charu Puhazholi from the Webmaster Team and Shyam Jayasankar from the Mobile Ranking Team. In today’s post, Charu and Shyam will be talking about the availability of the Bing Webmaster Mobile Friendliness Test tool which allows you to validate your site’s pages for mobile-device compatibility. Enjoy!
In our earlier post about our approach to mobile-friendly search, we talked about some of the factors that our algorithm takes into account to determine whether a page is considered “mobile friendly” such as readability and navigation. Today, we are happy to announce the general availability of the Bing Mobile Friendliness Test Tool and also would like to dive a little deeper into the more specific factors that determine mobile friendliness and provide more understanding how these factors impact your site. You can find the Bing Mobile Friendliness Test Tool in Bing Webmaster Tools under Tools & Diagnostics or navigate to it directly using this link.
How is a Page Determined to be Mobile Friendly?
When evaluating a webpage for mobile friendliness, the following key factors are considered:
Viewport and Zoom control configuration
Width of page content
Readability of text on the page
Spacing of links and other elements on the page
Use of incompatible plug-ins
The Mobile Friendliness Test tool runs checks on all of these key factors and additionally checks for and reports on resources that are needed to analyze the page fully but that we weren’t able to crawl due to robots.txt constraints. This way rendering issues (as seen in the page preview) can be fixed by webmasters by updating robots.txt in such a way that Bing can accurately determine the mobile-friendliness of the sites.
When you submit the URL of a page to be analyzed to the Mobile Friendliness Test tool, our Bing Mobile crawler fetches and renders the page, extracting important features that are used by the tool to determine how the page performs against each of the above factors. The outcomes are then aggregated into a consolidated mobile-friendliness verdict for the page.
A sample result for a page that meets all mobile-friendliness checks might look like this:
On the other hand, when a page fails to meet one of these criteria, the verdict provides detailed information on the failure (see the example below). A preview snapshot of what the page looks like on a mobile device is also shown, along with pointers which can be used to identify what needs to be fixed.
Let us jump in and see what these checks mean and how you can ensure your page passes all of them.
The Viewport meta tag needs to be set correctly in order for mobile-friendly pages to work well on devices of different sizes and orientations. In general, this means that the viewport is set with the content width equal to “device-width” as show below.
<meta name=viewport content="width=device-width, initial-scale=1">
While it is possible for pages with an alternate viewport configuration to be mobile-friendly on certain devices, they might not work equally well on all devices. In the example below, the Viewport configuration check failed, so even though some checks passed, the page is flagged as not being ready for mobile experiences:
The Zoom Control check verifies if the configuration of the viewport hampers the user’s ability to pinch and zoom the page. In general, not using the scale-related viewport settings should result in your page being zoomable on most mobile browsers, but improper use of these settings (user-scalable, maximum-scale, minimum-scale) could result in hampering access to some content on the page. Some mobile-friendly pages prevent user zoom by design and we do take that into account before flagging it as an error.
One of the more important signals we use in determining the overall mobile-friendliness verdict is the page’s content width and how it relates to the device’s screen width. In general, the content width should not exceed the screen width. We have some tolerance built in, but any page that requires excessive horizontal panning will get flagged for the error “Page content does not fit device width“.
Readability of Text on the Page
Another important factor is the readability of text on the page. The readability factor was determined after analyzing hundreds of thousands of pages (mobile-friendly and otherwise) to determine appropriate features and thresholds. In any case, it is important to understand that readability is not just a function of font size, but also viewport scaling. It is useful to think of readability as the average area occupied by text when the page is fully zoomed out to fit the device width.
Spacing of links and other elements on the page
With regards to touch-friendliness we have a similar approach: we look at all input elements and hyperlinks on the page to see if they occupy an area considered “tap-friendly” at maximum zoom out. If that is not the case, we will call out that “Links and tap targets are too small“.
Another warning you might see is when we detect that your page is using incompatible plugins (e.g. Flash), or the page is otherwise not intended for use on mobile devices. We detect any error messages that are surfaced by the page on a typical mobile device and currently capture those as a warning in the Mobile Friendliness Test Tool. It’s important though to take this as a serious warning and in some cases, we may decide to interpret this as a true error in the future.
Resources Blocked by Robots.Txt
While the factors discussed above impact the mobile-friendliness verdict of the page, the tool also validates a couple of other related factors. For example, the tool checks for page resources blocked due to robots.txt rules and reports instances thereof as warnings. Possible rendering issues could be due to these blocked resources, so armed with this information, you can look into updating your robots.txt so that Bing can accurately determine the mobile-friendliness of your site pages.
The Mobile Friendliness Test tool is yet another important step in our commitment to help site owners create mobile-friendly experiences. We hope it greatly aids you in making your website mobile-friendly. Each time you run the tool against a URL, we crawl the page the same way Bingbot does, download necessary and allowed resources, dynamically render the mobile page, extract features and run it through our mobile classification algorithms to produce the verdict for your page. Since all of this happens in real time, it might take the tool a few seconds to complete processing and show results. For any issues reported that have quick fixes (like robots.txt changes or viewport tag updates), or when you are actively working on making your website mobile-friendly, you could re-run the tool to immediately see the outcome.
As always, we would love to hear your ideas and feedback! So do let us know your thoughts at Bing Listens.
Happy mobile-friendly testing!