Платон Щукин составил исчерпывающий перечень рекомендаций для тех, кто только адаптирует сайт под мобильные устройства, и для тех, кто уже является гуру в этой области.
Как известно, с декабря 2015 года Яндекс отмечает в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а с февраля 2016 года новый алгоритм Владивосток начал отдавать им предпочтение при ранжировании.
На основе наиболее часто задаваемых вопросов, небезызвестный Платон Щукин составил исчерпывающий перечень рекомендаций для тех, кто только адаптирует сайт под мобильные устройства, и для тех, кто уже является гуру в этой области.
1. Так как поисковые роботы с одинаковым приоритетом воспринимают различные типы адаптации, стоит обратить внимание на несколько нюансов.
Во-первых, не рекомендуется создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно ее воспринять. Во-вторых, если выбран вариант с поддоменом, предпочтение стоит отдать простому и понятному для пользователей доменному имени с явным указанием на мобильный сайт. Например, m.site.com , а в случае наличия регионального поддомена - m.novosib.site.com. Такая прямая зависимость поможет пользователям и поисковым системам связать основную и мобильную версию сайта. В-третьих, при перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы стоял редирект только на соответствующую страницу мобильной версии, а не на весь сайт.2. Для создания мобильной версии существует множество плагинов и сервисов, также многие конструкторы сразу предоставляют возможность сделать мобильный сайт. Но одной технологией мобилопригодный сайт часто не создать – важен и контент. При работе над содержимым мобильной версии сайта стоит размещать ту информацию, которая будет полезна именно для пользователей мобильного интернета. Она может немного отличаться или не полностью дублировать тексты полной версии – это нормально. Главное, чтобы идея и содержание страницы оставались прежними.
Совет. После создания мобильной версии, ее необходимо открыть с нескольких мобильных устройств и проверить, удобно ли с ней работать. При этом важно помнить, что у немалой части пользователей смартфоны с небольшим разрешением экрана, поэтому необходимо учесть и их интересы, чтобы сделать сайт комфортным для просмотра с большинства устройств.3. Для проверки сайта на мобилопригодность нужно воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».
Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.
Горизонтальная прокрутка
Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, можно ориентироваться на эту величину. Важно иметь в виду, что некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому прокрутка сайта при просмотре у вебмастера может и не обнаруживаться, а у посетителя сайта вполне. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя ее к рекомендуемой.
Отсутствие мета-тега «viewport»
Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на сайте отсутствует данный мета-тег, необходимо проверить, что он расположен именно в контейнере <head>, что соответствует стандарту HTML. Кроме того, рекомендуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:
<meta name="viewport" content="width=device-width, initial-scale=1">
Тогда вам не нужно будет устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
Наличие Flash-элементов
Если на сайте размещены видеоролики, необходимо убедиться, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому желательно их не использовать.
