Как быстро избавиться от сообщения Google «Сайт не оптимизирован для мобильных устройств»

Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters, то возможно у него появилась пометка «Сайт не оптимизирован для мобильных устройств». Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.

Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights.

Указываем адрес сайта и жмем кнопку «Анализировать». Видно, что для этого примера степень удобства для мобильных пользователей оценивается в 69 процентов, и кроме того, есть сообщение «Возможно, страница не пройдет проверку удобства просмотра на мобильных устройствах».
как адаптировать сайт под мобильные устройства

Ниже видна детализация проблем и ссылки на инструкции по их устранению.

Поставим себе цель оптимизировать сайт и улучшить показатель хотя бы до 90%, что в глазах гугла считается хорошим.

В первую очередь обращаем внимание на сообщение «Настройте область просмотра». Начать лучше с этого пункта, потому что исправление этой проблемы автоматически повлияет на оценки гуглом размеров шрифтов и активных элементов.

Нажимаем ссылку «Как исправить» и видим следующий текст о необходимости указания тега viewport.
google - оптимизация для мобильныхПо ссылке «Настройте область просмотра» приведена статья, разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:

Добавляем тег на сайт и ради интереса проверяем после этого, как изменился показатель удобства для мобильных пользователей.
google3Видим рост с 69 до 80%.

Если у вас на сайте включено кэширование, то надо перед проверкой либо отключать кэш или удалять кэшированные файлы, иначе проверка может осуществляться по старым файлам.

Далее смотрим проблему в красной зоне «Адаптируйте размер контента для области просмотра». Проблема заключается в том, что гугл делает проверку для устройства шириной в 375 пикселов, а размер некоторых элементов сайта превышает этот показатель.

Дело в том, что многие шаблоны, сделанные ранее, содержат абсолютные размеры элементов сайта. Например, в файле style.css могут быть инструкции такого вида

wrapper — в данном случае это основной контейнер страницы сайта. Такой элемент, естественно, не помещается на экран шириной 375 пикселов. Также можно обнаружить и другие подобные инструкции для других элементов сайта.

Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:

Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).

Находим и переписываем таким образом все инструкции в наших стилях, где размер элементов превышает проверяемый google — 375x.

После внесения всех изменений проверяем сайт
google4
и видим, что показать удобства стал 94%. Цель достигнута. Сайт будет восприниматься гуглом, как удобный для мобильных пользователей.

Рекомендую добавить еще 1 инструкцию в файл style.css

Это для того, чтобы картинка и фрейм всегда помещались на экране.

Оцените статью
Делаем сайт своими руками
Комментарии: 3
  1. Виктор

    Умница! Всё получилось. Ну, почти. А я столько бился.

    Ответить
  2. Rusfet

    А куда именно добавлять эти инструкции? В какой файл?

    Ответить
    1. Ложников Андрей (автор)

      тег meta в файл header.php, а стили в style.css

      Ответить
Добавить комментарии