Оптимизация сайта под мобильные устройства – обязательный этап SEO-продвижения. Согласно статистике, собранной «Яндекс.Радаром», с каждым годом объем мобильного трафика увеличивается на 50–60%. Из-за этого степень mobile friendly оптимизации стала важным фактором ранжирования в Яндекс и Google. Приоритет при индексации отдается именно версиям сайта, отображаемым на мобильных устройствах.
Методы оптимизации сайта для мобильных устройств
Среди методов мобильной оптимизации сайтов ярко выделяется создание адаптивного дизайна, а также разработка копии веб-ресурса на отдельном шаблоне или поддомене. Разберем особенности каждого случая более подробно.
Создание адаптивной верстки
Главное преимущество адаптивной верстки – не надо оптимизировать 2 версии сайта: десктопную и мобильную. При заходе через смартфон или ПК запросы идут на один и тот же сервер, который отправляет пользователю одинаковый HTML-код — содержимое на сайте подстраивается под разрешение экрана при помощи свойств CSS.
Подобное решение достигается за счет использования технологии CSS3 Media Queries или CSS-фреймворков — готового набора правил CSS, позволяющих управлять стилями элементов на сайте в зависимости от устройства входа. Это позволяет сделать дизайн и функциональность сайта идентичными при заходе с любого устройства — меняться будет только расположение, размер, внешний вид элементов на странице по вертикали.
Среди плюсов адаптивной верстки также выделяются:
- Единый URL для всех версий сайта.
- Отсутствие лишних элементов на странице.
- Корректное отображение страниц на всех устройствах.
- Длительная загрузка страниц при наличии тяжелых элементов: видео, широкоформатных изображений, анимации и т. д.
- Необходимость в сокращении информации при отображении страниц на смартфонах.
Разработка сайта с mobile-friendly дизайном наиболее правильное решение.
Способы оптимизации адаптивной верстки
Разработка интернет-магазинов или многостраничных веб-сайтов с адаптивной версткой — отраслевой стандарт. Адаптивный сайт предполагает не только наличие дизайна, подстраивающегося под любой браузер или диагональ экрана смартфона, но и работу с интерфейсом.
Важно чтобы все элементы на странице были взаимосвязаны с интерфейсом сайта и выполняли полезное действие, в противном случае нефункциональный элемент требуется удалить для упрощения дизайна. Так, например, при нажатии на номер телефона должен производиться звонок с мобильного, а клик по карте — учитывать местоположение пользователя к ближайшей точке магазина или склада.
Для улучшения адаптивного дизайна можно сделать следующее:
- Масштабировать видео и изображения через свойства CSS под размер экрана. В качестве изображения на сайте рекомендуем использовать картинки в формате SVG — векторная графика не теряет качество при изменении масштаба.
- Упростить функциональность сайта — снизить количество используемых скриптов и объемных изображений, убрать калькуляторы и расчет доставки со страниц в корзину, и т. д. Дополнительную информацию можно перенести в отдельные элементы страницы: например, скрыть комментарии под отдельной кнопкой или добавить к товарам на сайте скрываемое описание.
- Переработать меню — для многостраничных веб-сайтов есть смысл частично скрыть пункты меню или реализовать Hamburger-меню. Важно чтобы на гаджетах с небольшой диагональю экрана не появлялась горизонтальная полоса прокрутки — это затрудняет использование сайта.
Кроме того, важно оптимизировать шрифты и рекламные блоки для правильного отображения элементов на всех устройствах. Для этого может потребоваться добавление скрипта на изменение числа отображаемых блоков на странице в зависимости от диагонали экрана используемого пользователем устройства.
Мобильная версия
Альтернативным вариантом оптимизации считается создание мобильной версии — например, запуск копии сайта на поддомене или разработка отдельного шаблона. Одна из сложностей реализации такого варианта – настройка правильной связи между аналогичными страницами обеих версий, чтобы десктопная и мобильная версии не конкурировали между собой. Для этого версии связываются в вебмастерах Google и Yandex, либо пропишите атрибуты rel="alternate" и rel=”canonical”. Это не позволит роботам индексировать страницы обеих версий как дубли и как следствие - предотвратит снижение позиций в выдаче.
Вариант с отдельным поддоменом
Данный вариант наиболее трудозатратный в реализации. При входе с мобильного устройства, сервер переадресует пользователя на другой поддомен с мобильной версией сайта. Таким образом на десктоп и мобильные устройства будет передаваться разный HTML-код и формироваться отдельные URL-адреса под каждую страницу сайта.
Преимущество мобильной оптимизации сайта через создание версии на поддомене – это высокая скорость загрузки. Основной минус — изменение URL-адресов и необходимость в дальнейшей настройки взаимосвязи версий.
Версия на отдельном шаблоне
Еще один способ оптимизации дизайна страниц под мобильные устройства — создание копии сайта на отдельном шаблоне. В данном случае URL-адрес остается идентичным при заходе с любого устройства, меняется только HTML-код. При заходе пользователя на сайт сервер определяет тип используемого устройства и отправляет соответствующую версию страницы.
Основным преимуществом данного метода оптимизации является статичность URL, что избавляет от необходимости работ по оптимизации версий для SEO. Из минусов стоит выделить необходимость в разработке скрипта по определению типа устройства, с которого пользователь заходит на сайт. А также незначительные отличия дизайна мобильной версии от десктопной для упрощения интерфейса и ускорения загрузки страниц при заходе со смартфонов.
Способы оптимизации мобильных версий
Мобильные версии сайтов необходимо оптимизировать отдельно от десктопных. Основные требования поисковых систем к мобильным страницам следующие:
- Отсутствие тяжеловесных элементов — Silverlight-плагины, Flash-элементы или Java-апплеты серьезно замедляют загрузку страницы и могут некорректно отображаться на некоторых смартфонах. Кроме того, следует отключить неиспользуемые плагины CMS и скрипты. Критически важно, чтобы веб-страницы открывались на мобильных гаджетах менее 5 секунд.
- Адаптация под небольшие экраны — шрифты и изображения должны подстраиваться под диагональ смартфонов, также обязательно наличие полосы прокрутки. В мобильной версии сайта ссылки должны оставаться кликабельными, а формы связи и заказа — функциональны.
- Редактирование рекламных блоков — реклама не должна закрывать контент на странице. Для этого изменяется количество рекламных блоков, а также убираются все всплывающие окна, баннеры и Pop-Up.
При создании сайтов с оптимизацией под мобильные устройства часто приходится урезать функциональность для повышения юзабилити — например, упрощать интерфейс или дизайн страниц. В таком случае необходимо предоставить пользователям возможность использования полноразмерного сайта, независимо от используемого устройства.
Как проверить сайт на оптимизацию для мобильных?
Проверять качество оптимизации мобильной версии можно через инструментарий Google и Yandex, либо сторонние сервисы. Определить скорость загрузки можно через GooglePageSpeed Insights, получить детализированную статистику — через вебмастеры.
Также оптимизаторы используют сервисы:
- Ilove Adaptive.
- Внутренний инструмент Google Search Console - Mobile Friendly
- ThinkWithGoogle.
Определить качество оптимизации сайта с мобильного также можно через инструменты разработчика любого браузера. Для этого требуется открыть консоль (Ctrl+Shift+I) и выбрать отображение нужной версии сайта.
Обратите внимание! После каждого редактирования исходного кода или изменения оформления сайта рекомендуется провести проверку всех затронутых страниц.
Итог. Какой вариант лучше?
Согласно исследованию Яндекс.Радара, с начала 2020 года количество мобильного трафика в РФ выросло на 57%, подобная тенденция также прослеживается и в статистике за прошлые годы. В 2020 каждый сайт обязан быть оптимизирован под смартфоны и планшеты — в противном случае есть риск потери более половины потенциальных клиентов.
Кратко подытоживая, можно определить следующее:
- Адаптивный дизайн — лучшее решение на сегодня, предотвращающее необходимость настроек переадресации клиентов между десктоп и мобильной версиями, а также не требующее изменения исходного кода. При разработке сайта с нуля лучше выбрать вариант с адаптивным дизайном.
- Мобильная оптимизация сайта на отдельном поддомене — запуск оптимизированной версии на отдельном поддомене целесообразен для крупных проектов с большой аудиторией. Например, для социальных сетей, интернет-магазинов или сайтов-агрегаторов. Отдельная версия позволит сохранить традиционный дизайн сайта или сохранить его функциональность в десктоп-версии.
- Разработка на отдельном шаблоне — подобное решение позволяет избежать изменения URL-адресов сайта. Данный вариант оптимально подходит для крупных многостраничных сайтов, которым разработка нового адаптивного дизайна может быть нецелесообразна.
Если вам требуется разработка дизайна сайта, можете обратиться к нам, в Первый Бит. Поможем разработать уникальный адаптивный сайт для интернет-магазина, корпоративного сайта лендинга. А также доработать или продвинуть в поисковой выдаче уже запущенные сайты.
Укажите Ваши контактные данные и мы обязательно Вам позвоним
