MAC Affiliate Conference in Armenia 30-31 мая 2024 года Подробнее
Елизавета Чекалина
Вебмастер SEO-отдела

Сейчас большая часть трафика на сайты приходит с мобильных устройств. Что делать, если вы, проверяя конверсии на своем сайте, видите неутешительную картину — трафик с мобильных устройств минимальный, а большинство пользователей не пробыли на нем и минуты?

В статье разберем, какие ошибки могут возникнуть в мобильной версии сайта и как их избежать.

Технические ошибки в мобильной версии сайта

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

Контент шире экрана

Так происходит, если не все блоки или изображения помещаются в экран смартфон. На сайте появляется горизонтальная прокрутка при просмотре страниц. Чтобы увидеть весь контент на странице, придется прокрутить ее вбок.

Такая ошибка возникает, когда стили на сайте настроены под абсолютные значения или изображения на странице предназначены для конкретных размеров экрана.

Как избежать

Следить за тем, чтобы значения CSS были относительными, а изображения и блоки на страницах масштабировались в соответствии с экраном устройства. Для этого необходимо задать правильное значение метатега viewport.

Viewport дает понять браузерам, как должен изменяться размер изображения в соответствии с параметрами экрана. В метатеге viewport указывается значение device-width для его корректного срабатывания и правильного отображения содержимого страницы.

Мелкий шрифт

Из-за этой ошибки для просмотра содержимого страницы пользователю приходится масштабировать изображение на экране вручную.

Как избежать

Настроить размер шрифта в заданной области просмотра. Оптимальный размер шрифтов для мобильных версий должен быть не меньше 12 px.

Интерактивные элементы расположены слишком близко

Это актуально для страниц, на которых элементы взаимодействия располагаются так, что пользователю неудобно прикасаться к одному, не задевая другие.

Как избежать

Задать оптимальные параметры для ссылок, кнопок и т.д. и расстояние между ними. Минимальный рекомендуемый размер элемента для взаимодействия должен составлять 48 px при правильной настройке области просмотра. Размер 48х48 px соответствует 9 мм в реальных параметрах. А 9 мм соответствует размерам подушечки пальца человека. Важно, чтобы все элементы касания были расположены на расстоянии 8 мм друг от друга. Так при нажатии на один из них, пользователь не будет касаться других.

Использование неподдерживаемых плагинов

К неподдерживаемым относятся устаревшие или несовместимые с мобильными браузерами плагины, такие как Flash.

Как избежать

Использовать более современные технологии, например, HTML-5.

Елизавета Чекалина
Елизавета Чекалина
Вебмастер SEO-отдела

Прибегать к анимации элементов в мобильной версии стоит только в тех случаях, когда это не сказывается на производительности сайта. Анимированные элементы могут вызвать на сайте подтормаживание и зависание. Это негативно скажется на реакции пользователей.

У Яндекса и Google есть специальные сервисы, которые помогут быстро понять, какие страницы не адаптированы к мобильным устройствам.

Google Search Console

GSC — неотъемлемая часть инструментария SEO-специалиста. Сервис отслеживает множество показателей качества в оптимизации сайта, в том числе и оптимизацию для мобильных устройств.

Для проверки сайта на мобильную оптимизацию в GSC нужно зарегистрировать свой сайт.

После этого сайт появится в панели ресурсов. Теперь можно начать работу.

В блоке “Качество” находится пункт “Удобство для мобильных устройств”.

Здесь показываются все страницы, несоответствующие требованиям мобильной оптимизации.

Проверка оптимизации мобильных (Google)

Сервис предназначен для постраничной проверки страниц сайта. Здесь можно проверить свой сайт без регистрации, просто вставив URL в строку ввода.

Сервис удобен для проверки небольших сайтов и в целом выдает результат, идентичный результату из сервиса GSC. Если сайт большой, лучше используйте другие сервисы.

Яндекс.Вебмастер

Аналогичный GSC сервис, позволяющий после регистрации постранично проверить оптимизацию сайта на мобильных устройствах.

В панели “Инструменты” в разделе “Проверка мобильных страниц” можно проверить страницу сайта на оптимизацию для мобильных устройств.

Низкая скорость загрузки

Одним из важнейших факторов ранжирования является скорость загрузки. Оптимальная и общепринятая всеми поисковыми системами скорость загрузки — 3 секунды!

Статистика показывает, что задержка загрузки на 1 секунду снижает конверсии на 3-7%, а загрузка более 10 секунд — на 20-40%.

Из-за низкой скорости можно потерять потенциальных клиентов. Скорость загрузки необходимо оптимизировать еще на этапе разработки сайта и его мобильной версии.

Для проверки своего сайта на скорость можно воспользоваться следующими инструментами.

Технический SEO аудит сайта - что это такое и как его сделать самостоятельно
Технический SEO аудит сайта - что это такое и как его сделать самостоятельно
Если веб-ресурс не приносит должных результатов, а деньги в него вкладываются, то возникает резонный вопрос — почему это происходит? Здесь требуется тщательная проверка, которую предлагают многие студии и фрилансеры. Что это такое Это комплексная оценка характеристик ресурса и всех составляющих, которая анализирует, почему позиции в Яндексе и Гугле низкие, как проходит индексация страниц, что есть в структуре. Таким способом, специалисты понимают, готов ли сайт к продвижению и активному использованию или требуется что-либо доработать. Больше видео на нашем канале - изучайте…

Google PageSpeed Insights

Сервис на русском языке и достаточно прост в использовании. Скорость загрузки отображается в секундах и баллах.

Также сервис дает рекомендации, на какие моменты стоит обратить внимание, что стоит оптимизировать.

K6

На скорость загрузки влияет количество посетителей сайт в единый момент времени. K6 поможет провести мониторинг нагрузки на сайт и выяснить, насколько сильно замедляется его работа при большом количестве посетителей.

Чтобы использовать сервис, нужно зарегистрироваться. K6 платный, но при регистрации вы получите 50 бесплатных тестов.

После регистрации можно приступать к работе.

Pingdom

Полезный сервис, показывающий вес страниц и скорость их загрузки.

Чтобы начать использовать Pingdom, нужно зарегистрироваться. Сервис платный, но для ознакомления есть 30 дней бесплатной подписки и демоверсия.

Which Loads Faster?

Этот сервис не является полноценным инструментом проверки — он не дает рекомендаций по улучшению. Зато с его помощью можно сравнить ваш сайт с сайтом конкурента или сайтом с оптимизированной скоростью.

Which Loads Faster не дает самостоятельных рекомендаций по улучшению скорости, но после проверки он предложит воспользоваться сервисом GTmetrix для детального анализа.

GTmetrix

А в GTmetrix можно узнать, над чем стоит поработать. Сервис бесплатный.

Ошибки при оформлении коммерческих факторов

Коммерческие факторы ранжирования сайта: что это такое и как можно их улучшить
Коммерческие факторы ранжирования сайта: что это такое и как можно их улучшить
Что такое коммерческие факторы ранжирования и почему они так важны Страницы с информацией о продавце, оплате, доставке, различные кнопки на карточках товаров и т.д. — такой контент положительно влияет на ранжирование сайта поисковиками. Чем дольше потенциальный покупатель взаимодействует с сайтом и чем больше полезной информации он получает, тем вероятнее он совершит покупку.  Давайте разберемся, какие коммерческие факторы существуют и для чего они нужны. Контактная информация Номера телефонов, карты проезда, реквизиты, адреса — подобная информация повышает доверие пользователей, потому что подтверждает,…

Неправильное добавление контактного номера

Контактный номер телефона должен быть со ссылкой, которая открывается в приложении для звонков. Это нужно для удобства пользователей и повышения конверсий. Так пользователь, уходя с сайта, может совершить звонок.

Лучше не добавлять номер телефона картинкой, так как его невозможно будет скопировать, чтобы позвонить.

Отсутствие удобного ввода

Если на вашем сайте есть поля для ввода номера телефона или форма обратной связи, нужно сделать их удобными.

Для небольшого экрана смартфона главным плюсом на вашем сайте будут крупные цифры в формах связи и полях ввода.

Отсутствие автоматического заполнения полей

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

Если на сайте настроено автозаполнение, пользователю будет достаточно просто подтвердить автоматический ввод данных и вся необходимая информация (e-mail, адрес, телефон и т.д.) подтянется.

Совет

Для настройки данной функции на сайте вы можете воспользоваться следующим HTML-кодом:

Телефон — input type=«tel»
E-mail — input type=«emaill»
Индекс, номер карты — input type=«textl» pattern=»\d*l»
Адрес — input type=«textl»

Неоптимизированные виджеты и формы

Позаботьтесь о том, чтобы вне зависимости от размера экрана устройства, с которого просматривается сайт, все элементы взаимодействия отображались корректно.

Если экран устройства составляет 4-6 дюймов, использовать формы на нем будет неудобно.

Чтобы облегчить посетителю взаимодействие с формой, сократите объем данных, которые необходимо ввести на первом этапе.

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

Получите профессиональный взгляд со стороны на свой проект

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить