Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters, то возможно у него появилась пометка «Сайт не оптимизирован для мобильных устройств». Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.
Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights.
Указываем адрес сайта и жмем кнопку «Анализировать». Видно, что для этого примера степень удобства для мобильных пользователей оценивается в 69 процентов, и кроме того, есть сообщение «Возможно, страница не пройдет проверку удобства просмотра на мобильных устройствах».
Ниже видна детализация проблем и ссылки на инструкции по их устранению.
Поставим себе цель оптимизировать сайт и улучшить показатель хотя бы до 90%, что в глазах гугла считается хорошим.
В первую очередь обращаем внимание на сообщение «Настройте область просмотра». Начать лучше с этого пункта, потому что исправление этой проблемы автоматически повлияет на оценки гуглом размеров шрифтов и активных элементов.
Нажимаем ссылку «Как исправить» и видим следующий текст о необходимости указания тега viewport.
По ссылке «Настройте область просмотра» приведена статья, разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:
1 |
<meta name=viewport content="width=device-width, initial-scale=1"> |
Добавляем тег на сайт и ради интереса проверяем после этого, как изменился показатель удобства для мобильных пользователей.
Видим рост с 69 до 80%.
Если у вас на сайте включено кэширование, то надо перед проверкой либо отключать кэш или удалять кэшированные файлы, иначе проверка может осуществляться по старым файлам.
Далее смотрим проблему в красной зоне «Адаптируйте размер контента для области просмотра». Проблема заключается в том, что гугл делает проверку для устройства шириной в 375 пикселов, а размер некоторых элементов сайта превышает этот показатель.
Дело в том, что многие шаблоны, сделанные ранее, содержат абсолютные размеры элементов сайта. Например, в файле style.css могут быть инструкции такого вида
1 2 3 |
#wrapper { width: 1000px; } |
wrapper — в данном случае это основной контейнер страницы сайта. Такой элемент, естественно, не помещается на экран шириной 375 пикселов. Также можно обнаружить и другие подобные инструкции для других элементов сайта.
Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:
1 2 3 4 |
#wrapper { max-width: 1000px; width: 100%; } |
Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).
Находим и переписываем таким образом все инструкции в наших стилях, где размер элементов превышает проверяемый google — 375x.
После внесения всех изменений проверяем сайт
и видим, что показать удобства стал 94%. Цель достигнута. Сайт будет восприниматься гуглом, как удобный для мобильных пользователей.
Рекомендую добавить еще 1 инструкцию в файл style.css
1 2 3 |
img, iframe { max-width:100% !important; } |
Это для того, чтобы картинка и фрейм всегда помещались на экране.
Умница! Всё получилось. Ну, почти. А я столько бился.
А куда именно добавлять эти инструкции? В какой файл?
тег meta в файл header.php, а стили в style.css