Платон Щукин: как сделать сайт удобным для мобильных устройств
Некоторое время назад Яндекс начал отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.
Платон Щукин
1. Какие бывают мобильные сайты
Поисковые роботы с одинаковым приоритетом воспринимают:
- сайты с мобильной версией на поддомене;
- сайты с адаптивной версткой;
- сайты с динамической версткой.
Платон советует обратить внимание на три нюанса:
· Не рекомендуется создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно ее воспринять.
· Если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт.
· При перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы стоял редирект только на соответствующую страницу мобильной версии, а не на весь сайт.
2. Несколько слов о создании сайта
При создании мобильного сайта важно думать не только о технологической стороне вопроса, но и о контенте. Стоит размещать ту информацию, которая будет полезна именно для пользователей мобильного интернета.
После создания мобильной версии следует просмотреть ее с нескольких мобильных устройств и проверить, удобно ли с ней работать.
3. Как проверить сайт на мобилопригодность
Для проверки сайта можно воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».
4. Что делать, если обнаружены ошибки
Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.
Горизонтальная прокрутка
Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего.
Как правило, большинство пользователей использует смартфоны c разрешением 320 px, поэтому можно ориентироваться на эту величину. Также следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.
Отсутствие мета-тега «viewport»
Мета-тег «viewport» позволяет браузеру мобильного устройства понять, что на сайте есть адаптивная верстка. Если выявлено, что на сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере head, что соответствует стандарту HTML.
Кроме того, желательно установить динамическую область просмотра в зависимости от ширины экрана устройства:
meta name="viewport" content="width=device-width, initial-scale=1"
Тогда не придется устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
Наличие Flash-элементов
Если на сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. Большинство мобильных браузеров не воспринимает форматы Flash, Silverlight и Applet, поэтому лучше их не использовать.
Случилось что-то важное? Поделитесь новостью с редакцией.
-
В чем отличие адаптивной версии от динамической?
-
Имеется в виду резиновая верстка. Подробнее о различиях написали в блоге divone.ru/blog/what_is_smart_site/
-
Отнюдь, вот ответ Платона с разъяснениями: yandex.ru/blog/platon/kak-sdelat-sayt-deystvitelno-udobnym-dlya-mobilnykh-ustroystv/5757d14a0187f01600594590
Цитирую: "Под динамической версткой мы подразумеваем, что в зависимости от мобильного устройства сервер отправляет различные варианты кода HTML и CSS, не изменяя при этом URL страницы. "
Резиновая вёрстка - это совсем другое.
-
-