Google service for checking the mobile version. If Google says “This page is not optimized for mobile devices. Mobile device emulators: Android Studio and Apple Xcode

Good afternoon friends. Today I will step aside from advertising tools a little and start a new column on the blog. It is called "Webmastering" and will include useful materials on improving the performance and quality of the site, landing pages. I'll start with an overview of a cool tool for checking a website for mobility.

Checking site speed with Google

Google offers 2 tools for this.

# 1 PageSpeed Insights

I think you know him well. Insert a link to your site, press the "Analyze" button and get the result in the form of two tabs.

The tab "For mobile" includes a report on the speed of loading the site for mobile devices and - important! - convenience rating site for smartphones. The tab "For computers", respectively, the same analysis for the desktop.

The best part is that the service allows you to download optimized images, css and scripts to use on your site. Here is such free help from google.

As you can see from the screenshot, I am having serious problems with the mobile version. How are you doing?

# 2 Testmysite.Withgoogle

In fact, this is the same tool, it just has a beautiful wrapper. I discovered this service the other day and was bribed by the reporting form.

When you insert a link to the site and click "Check", the service will offer the result in the form of a full-fledged dynamic landing page, on which it will succinctly and convincingly tell you how things are with the site and offer to download the full report.

Of course, I asked for a full report and received it by mail in a couple of minutes. It looks sensible, several screens of useful instructions with links to specific materials:

It is noteworthy that if you analyze the same site, then the figures for these tools will differ slightly. However, they work on the same technology.

This is how in just a few seconds you can not only check the site for mobility and check the loading speed - but also download a full-fledged report with optimized content. Is free. From google

Well, how are you doing with mobility?

Site versions are not only a possible whim of developers, an additional item of expenses (or earnings, if we talk about contractors) and a manifestation of concern for the visitors of the resource. According to the latest statements from representatives of the Google corporation, sites that do not meet the requirements of responsive design will be pessimized in the search carried out from mobile devices. Domestic search engine Yandex also issued recommendations "How important it is to be mobile" and assured that, acting for the convenience of users of mobile devices, it will mark mobile versions in search results and give preference to adaptive pages.

So, developers must necessarily adapt sites for smartphones and check the serviceability of the resource display. Otherwise, in the near future you can expect the loss of a significant part of traffic, and therefore potential customers, because the new algorithms of work from Google and Yandex are already in effect. You can check the mobile version of the site different ways: by changing the browser when switching to developer mode, using mobile device emulators or web services.

Website friendliness for mobile devices

Adaptability to mobile devices is assessed according to various parameters. It is important to check the mobile version of the site not only in terms of correct display, it is worth considering other factors:

lack of animation, "heavy" design and pictures;
resource loading speed (should be minimal);
no need for horizontal scrolling;
lack of Silverlight plugins and Java applets;
simple site navigation;
the code contains the viewport meta tag.

If the listed conditions are met, the algorithms of the most common search engines recognize the web page as suitable for mobile devices and increase the site's position in the search results in relation to resources that are not adapted.

Real testing on mobile devices

The most convenient way is to test the mobile version of the site on real smartphones. This method will allow testing under real conditions. Ideally, it is better to check a web resource on several devices, but if the project budget does not include the costs of purchasing several smartphones of the most popular models, an Android or Apple-based device will suffice.

Resizing the browser window

The simplest, but not optimal in terms of validation, is to resize the browser window. If the page is made using technology, you can check the mobile version of the site in this way. But in cases where a separate design is applied, the resource needs a clear indication that the user came from a smartphone, tablet or other mobile device. So, this way allows you to check the availability of a mobile version of the site. But the correctness of the display (in technical terms) is unlikely to be assessed.

Switching to developer mode in the browser

The best way to check the mobile version of a site (Google or Yandex, as well as other search engines highlight adaptability in the list of the most important factors affecting ranking) is to switch to developer mode in the browser. The method works in a similar way with multiple browsers:

Mozilla: You can switch to developer mode by selecting the "Responsive Design" option in the "Develop" menu; pressing the combination Ctrl+ Shift + M; by clicking on the "Responsive Design Mode" button on the web developer's toolbar;
Chrome: switch to mobile mode by pressing F12, then select the mobile version icon (smartphone in the upper left corner of the window that appears).

In Opera, you can switch to developer mode to check the mobile version by pressing Ctrl + Shift + i, but there is another way. A special version of the browser - Opera Mobile Classic Emulator - allows you to evaluate mobile design in many ways. Versions of the program exist for major operating systems.

Mobile device emulators: Android Studio and Apple Xcode

You can check the mobile version of the site (Yandex and Google) using mobile device emulators, which for Android and Apple are Android Studio or Apple Xcode, respectively.

Such tools quite accurately reproduce the site as it will look on mobile devices: the programs are preinstalled with the most common versions of browsers for mobile devices. However, emulators do not take into account the download speed and some other nuances that can be observed in real conditions.

To check it, just install one of the above programs on your computer and open the site from the emulator.

Mobile design validation web services

There are more simple ways check the mobile version of the site. For example, the online service Responsinator allows you to evaluate the correctness of the display of the resource on mobile devices and the ease of use of the site by the user. The resource displays the site as it would appear in six different devices based on Android or Apple and in multiple orientations.

Checking the optimization of web pages for mobile devices

Other resources that allow you to check the mobile version of the site additionally assess the adaptability, and not only show how the site would look on different devices. The most reputable services are Google Mobile Friendly and Yandex WebMaster (checking web pages). Bing's checker or, for example, the W3C's Mobile Checker are also evaluating site optimization for mobile devices.

All that is required from the webmaster when evaluating the version of the site for mobile devices using online services is to enter the resource address and wait for the analysis to finish. Most of the above services check optimizations for the mobile-friendliness parameters listed above.

So, you can evaluate the adaptability of a web resource in several ways: from testing on real smartphones, tablets or other mobile devices or changing the size of the web browser window, checking in emulators or in the web browser developer mode, and ending with using services from Yandex and Google. It is very easy to check the mobile version of the site comprehensively, and this will allow you to make the necessary edits and improve the site's position in the search results.

There is such a thing, Google will soon (according to rumors - from April 21, 2015) begin to rank very poorly sites that have not passed the check in Google Webmasters for ease of viewing on mobile devices.

It is not clear exactly, the site will have problems only if it is shown to mobile users, or even to those who logged in from a PC, that is, there will be a separate issue?

In essence, this almost does not change for sites that have half, or a significant part, of mobile traffic. Therefore, it is better to pass the test as quickly as possible.

I'll tell you how to do this:

Before	After

The first piece, which helped to resolve the issue without additional gestures.

In robots.txt add the line:
Allow: /wp-content/themes/ Template_Name/style.css

(If the file with styles is located at a different address, then write it. If there are several files with styles, then insert the lines for each file.)

Second moment, if we see the message “ Interactive elements are too close to each other. " Shown at google.com/webmasters/tools/mobile-friendly.
It just assigns more indents for links and buttons in the styles to the required class. Grabs margin or padding from 5px.
Sometimes the Adsense block can create such a problem. Perhaps you need to insert a larger block, or with a larger font.

P.S. Initially, I expect that the primary was done by you.

Eh, again Google "pleases" us with its rules and algorithms, coming up with new "migraines" for webmasters. This time we are offered to try a new mobile-friendly-algorithm, which will bring up adapted sites in mobile search and lower “non-mobile” resources.

How will all of this work?

Very simple: all sites that are not mobile-friendly (according to Google) will simply be ignored search engine and displayed in mobile search in the last places, and mobile resources will rise higher. For example, if there are several sites with a similar theme, then on the tablet the user will find those that have an adapted design for viewing on mobile devices.

My impressions of this innovation are twofold: on the one hand, everything is correct, if I use search on a tablet or smartphone, then I want to see in the SERP those sites that behave correctly on the screen. On the other hand, the algorithm for determining "mobility" is so strange that it makes one think about the advisability of such "know-how". Of course, I checked my sites for recommendations and found strange, to say the least, Google behavior towards resource parsing.

It is worth saying that I always, when creating sites, checked appearance on various devices manually and through services, so I was calm about the "mobility", but it turned out to be not so simple. So, Google recommends testing your resources through a mobile-friendly test:

Just enter the address of the site or page and click "Analyze". While checking the main page of the site of my Crimean friend krimeo.ru through the test, I saw that the page was optimized for mobile devices.

Not surprisingly, the template is responsive and the site looks great on different devices... Then I decided to check my site and what was my surprise when this resource did not pass the test.

Interesting ... the template of this blog is also responsive, I have accessed both from a tablet and from a smartphone several times ... why then did Google not like it?

I began to analyze what exactly on the site could provoke such a result. The solution was found where I least expected this: on my site, thumbnails for articles were displayed in a 720x350px rectangle, and this (according to Google) does not make the site considered mobile. Surprisingly, the larger the picture (buttons), the easier it is for users from mobile devices to hit with a finger ... but Google thinks differently.

It is also surprising that when browsing the site on a smartphone, all images are perfectly adapted to the screen size and no "jambs" are observed. Well, I decided to conduct an experiment and made the size of the pictures adaptive, i.e. the smaller the screen size of the device, the smaller the image on the site. Try grabbing the corner of the browser with the mouse and making it smaller ..
Now some webmasters may have a different problem: if Google behaved this way with thumbnails big size, which means that with the illustrations to the articles, the situation will be the same, and this is much more important than home page... To do this, you need to make the images adaptive for the entire site, using the means of launching the js-script, but that's not all, the cache folder and the rule for saving images must be duplicated in .htaccess

Indeed, articles that contain large-sized images do not pass Google's test, and those with smaller illustrations are considered fully mobile-optimized. I will not give screenshots - just take the URL of a separate publication and check it for "mobility".

Why else does Googlebot see the blog is not mobile optimized

Because there are a lot of unnecessary restrictions in robots.txt.

There is only one restriction in the automatically generated WordPress virtual robots.txt file:

Disallow: / wp-admin

And here's what Google writes about why the WordPress creators made robots.txt like this by default:

To ensure correct indexing and rendering of pages, you need to give Googlebot access to JavaScript, CSS and graphic files on the site. Googlebot should see your site as a regular user. If the robots.txt file does not allow access to these resources, then Google will not be able to properly analyze and index the content. This can degrade your site's search rankings.

User-agent: * Disallow: / wp-admin Disallow: / wp-includes Disallow: / wp-content / plugins Host: Your_site Sitemap: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) User -agent: Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /

I hope that Google will improve its verification algorithm and give real results, because "in real life" on tablets and smartphones, many sites look great.

We can see such a surprise in the form of a mobile-friendly algorithm since April 21, 2015. Google "spoils" us)). Do you live in peace? Here's a Panda for you! Few? Here's a Penguin too! Send away? Get mobile-friendly!

Output

It is up to you to decide what to do with this information, whether to switch to responsive designs or not is a personal matter for every webmaster, but these new rules have already come into effect.

By the way, “optimized for mobile devices” is not only a responsive site design, a separate mobile version and a plugin for WordPress are also suitable here, the main thing is that the site looks correct on any device. Take this into account.

For your projects, you probably noticed a long time ago that the number mobile users is constantly growing. For some, the trend is less noticeable, and on some projects this figure doubles or more every year. According to LiveInternet data, more than 50% of the traffic on the Runet is accounted for by mobile devices. By the way, many readers of this blog have been complaining for a long time that there is no mobile version here 🙂 which will, of course, be fixed in the near future.

This fact of mobilization cannot be ignored by search platforms either. Gradually, they give advantages in mobile search to those sites that are adapted to users' devices.

At first, Google marked sites in snippets that they would display correctly on mobile phones.

Also, Google has created a tool to help webmasters to check the correctness of the website display on mobile devices:
https://www.google.com/webmasters/tools/mobile-friendly/

On April 21, Google launched a new algorithm called Mobilegeddon in the West. Now successfully passing the Mobile Friendly test is one of the SEO factors taken into account by Google. So far, there have been no major changes in the SERP, but you can prepare now.

How do you make your site responsive for Google? The secret is simple - you need to set a task for your programmers / layout designers. Well, if there is no time to wait, then ... you can use MobileCheat 🙂

In fact, this is an untested technology, it is not known what it will lead to in the future, so use it only at your own peril and risk. At least a series of tests can be done here.

How to bypass Google test with MobileCheat

There are only two things to do:

1. Add the viewport meta tag to the code.

2. Close the robot access to CSS-files or the folder where they are located through robots.txt

For example, this is how my blog passes the default test:

When the CSS is closed, the picture changes:

It seems that nothing has changed on the site, but the test results are completely different. By the way, on some sites I myself like to disable CSS, so that it is more convenient to view and use them 🙂 therefore, it is a completely justified scheme. But it is presented for informational purposes only.

What do you think about this? Will Google count this as a counter move with a knight or has it thought out everything in advance and will immediately put the site in check and checkmate? 🙂