Мобилопригность продолжает оставаться на пике популярность. А поисковые системы подогревают к ней интерес новыми публикациями. На этот раз Платон Щукин (Яндекс) рекомендации для начинающих и продолжающих постигать мобилопригодность.
Для мобильных устройств сайты представляют одним из трех способов - мобильная версия, адаптивная или динамическая верстка. Поисковые роботы одинаково воспринимают все варианты, однако стоит обратить внимание на несколько нюансов. Например, при перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы был редирект только на соответствующую страницу мобильной версии, а не на весь сайт.
Платон рекомендует проверить ресурс на мобилопригодность. Это можно сделать с помощью инструмента «Проверка мобильных страниц» в Вебмастере или технического аудита Rookee, который включает в себя Google-анализ сайта на мобилопригодность.
Подробно Платон остановился на ошибках, которые могут быть обнаружены:
1. Горизонтальная прокрутка
Если при проверке выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
2. Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.
3. Отсутствие мета-тега «viewport»
Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на вашем сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере , что соответствует стандарту HTML. Кроме того, мы советуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:
Тогда вам не нужно будет устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
4. Наличие Flash-элементов
Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.
В дальнейшем Яндекс обещает рассказать об индексировании мобильной версии сайта на поддомене. А пока ждем новых рекомендаций, самое время проверить сайт на мобилопригодность.
