В современном мире смартфоны становятся основным способом доступа к Сети. По данным исследований, более 60,67% пользователей в 2024 году посещают сайты с телефонов, и цифра продолжает расти. Эти данные подчеркивают важность мобильной оптимизации для веб-ресурсов. Неадаптированные сайты теряют большую часть трафика, что в итоге отражается на бизнесе.
В статье расскажем, как сделать свой ресурс mobile-friendly и сохранять посещаемость на нужном уровне.
Немного терминологии
Мобильная оптимизация позволяет интерфейсу веб-ресурса одинаково хорошо отображаться на устройствах с различными размерами экранов. Это значит, что пользователю будет удобно просматривать сайт с компьютера, планшета и смартфона. Существует два вида мобильной оптимизации ресурса: адаптивная верстка и создание отдельной версии площадки. Рассмотрим каждый из них поподробнее.
Адаптивная верстка подразумевает, что сайт будет выглядеть одинаково на всех устройствах, а его интерфейс — подстраиваться под размер экрана.
Отдельная мобильная версия подразумевает создание отдельного сайта, предназначенного для загрузки на смартфонах.
Оба подхода имеют свои плюсы и минусы, но выбор зависит от потребностей бизнеса и аудитории.
*Когда узнал, что сайт сам по себе не адаптируется под устройство
Всем ли нужна мобильная оптимизация
Если вы не уверены в необходимости оптимизации сайта для мобильных устройств, рекомендуем ознакомиться с преимуществами, которые она дает:
- Увеличение трафика и удержание аудитории. Пользователи с большей вероятностью останутся на сайте, который удобно просматривать с телефона. Наличие мобильной версии позволяет снизить число отказов, что, в свою очередь, хорошо влияет на продвижение ресурса.
- Улучшение пользовательского опыта. Мобильная оптимизация обеспечивает посетителям ресурса удобство взаимодействия с контентом независимо от типа устройства, с которого они посещают сайт.
- Корректное отображение интерфейса. Сайты, на которых выполнена мобильная оптимизация, аккуратно выглядят на всех типах устройств. Кнопки и другие элементы площадки имеют нужный размер и не наползают друг на друга.
- Приоритет в поисковой выдаче. Mobile-friendly сайты занимают более высокие позиции в Google и Яндекс.
Таким образом, мобильная оптимизация сайта нужна всем, кто хочет, чтобы их сайтом можно было пользоваться не только с компьютера, но и с других устройств.
Требования поисковых систем к мобильным сайтам
Чтобы ресурсы хорошо ранжировались в Яндекс и Google, они должны соответствовать определенным критериям. Расскажем о них более подробно.
Требования Google
С 2019 года Google акцентирует внимание на индексации страниц с приоритетом mobile-first. Это значит, что поисковая система отдает первые позиции выдачи площадкам, где есть мобильная версия сайта. При этом страницы, которые не соответствуют требованиям, краулеры не будут сканировать.
Также важно, чтобы обе версии сайта содержали одинаковое количество контента. Если на мобильной будет меньше информации, чем на десктопной, это может негативно сказаться на позициях ресурса в поисковой выдаче. Не страшно, если часть контента для удобства будет скрыта кнопками. Некоторые информационные блоки можно сделать меньше, чтобы вместить все необходимое в мобильную версию.
Оптимизация изображений
Что касается изображений, они должны относиться к одному из следующих форматов: BMP, GIF, JPEG, PNG, WebP и SVG.
Чтобы оптимизировать страницы с графическими элементами, стоит использовать файл Sitemap и элементы HTML. Также следует проработать мета-теги для каждой страницы. Это поможет поисковым системам правильно создавать заголовки и описывать изображения.
Текст в атрибутах alt должен быть лаконичным и информативным. Если вы используете несколько языков, стоит перевести названия файлов соответственно.
Чтобы использовать в поисковой выдаче сразу оптимизированные и сжатые, а не полноразмерные изображения необходимо проставлять корректный URL в заголовке HTTP Referer или отправить код статуса HTTP 204 с No Content. Это позволит Google отсканировать изображение, добавив только миниатюру, что ускорит индексацию.
Важно следить за параметром max-width для картинок и указывать его в %. В противном случае изображение на смартфоне будет большим или растянутым. Кроме того, если пренебречь этим параметром, может поехать страница и весь контент станет меньше картинки.
Оптимизация видео
Для оптимизации видеоконтента стоит придерживаться следующих рекомендаций:
- Желательно использовать только поддерживаемые форматы и одинаковые теги на обеих версиях сайта.
- Стоит создать отдельную страницу для каждого видео. Это позволит обеспечить максимальный охват. Однако важно, чтобы на странице кроме видео присутствовал и другой контент, чтобы она не попала под МПК-фильтр.1
- Лучше отказаться от сложного JavaScript-кода, т. к. он может замедлить работу краулеров.
- Стоит использовать встроенные видео. Типичный пример — опубликованные на RuTube ролики, которые можно просматривать без перехода на хостинг.2 Такие видео индексируются сразу на всех площадках.
- Важно контролировать потоковую передачу файлов, для этого стоит обеспечить высокую пропускную способность серверов. Чтобы подключить структурированные данные, нужно использовать свойство contentURL.
Для получения более подробной информации ознакомьтесь с рекомендациями Google по оптимизации видео.
1 - Фильтр Яндекса «Малополезный контент», который понижает позиции в выдаче.
2 - Информация актуальна на октябрь 2024 года.
Требования Яндекса
Отечественная поисковая система также учитывает адаптивность при ранжировании сайтов. Об этом было объявлено в блоге Яндекса в начале 2016 года при введении алгоритма Владивосток. Однако рекомендации не такие строгие, как у Google. Так, мобильная и десктопная версия не обязательно должны иметь идентичный контент. Важно, чтобы он просто не сильно различался.
Чтобы помочь краулерам Яндекса определить правильную версию страницы, нужно указать на основном сайте УРЛы мобильной версии.3 При этом не нужно настраивать редирект, достаточно использовать соответствующий мета-тег. Дополнительные сведения о внедрении HTML-элементов можно найти в справочных материалах Яндекса.
Индексирующий робот Яндекса поддерживает следующие версии браузера:
- Mozilla/5.0 (iPhone; ЦП iPhone OS 8_1, как и Mac OS X).
- AppleWebKit/600.1.4 (KHTML, например, Gecko) версия/8.0 Mobile/12B411.
- Safari/600.1.4 (совместимо; YandexMobileBot/3.0; + http://yandex.com /bots).
Чтобы страницы корректно отображались, необходимо разрешить в файле robots.txt сканирование CSS и JavaScript. Также при оптимизации контента стоит учитывать, что элементы Flash, Silverlight и Applet больше не отображаются на всех устройствах.
Мобильная версия доступна в Вебмастере. Для проверки адаптивности страницы краулер сканирует основной домен и мобильный поддомен.
Более подробную информацию о требованиях к настройке мобильных страниц можно найти в справке Яндекса.
3 - При наличии отдельного поддомена для мобильной версии.
*Когда не соблюдал требования поисковых систем, но в итоге понял на сколько это серьезно
Способы оптимизации сайта для мобильных устройств
Выше мы уже рассказали, что сделать площадку mobile-friendly можно одним из двух способов — с помощью адаптивной верстки или создания мобильной версии. Рассмотрим каждый вариант более подробно.
Адаптивная верстка
Этот метод оптимизации предполагает, что на всех устройствах отображается один и тот же контент и URL. При наличии адаптивной верстки интерфейс сайта подстраивается под размер экрана гаджета. Для этого дизайнер создает минимум два макета — для компьютера и смартфона. Однако их может быть и больше. Так, иногда требуется создание дополнительного макета для планшета.
Существует несколько разрешений адаптивной верстки, иначе их называют брейкпоинты:
- 1900 пикселей для компьютеров;
- 1024 для ноутбуков;
- 768 пикселей для планшетов;
- 480 и 320 пикселей для телефонов.
Преимущество этого способа оптимизации заключается в том, что владельцу ресурса не нужно администрировать две отдельные площадки. Еще один плюс — создание адаптивной версии значительно дешевле разработки мобильной версии сайта.
Отдельная мобильная версия
Этот способ оптимизации подразумевает создание отдельного сайта на поддомене для мобильных пользователей. Также можно установить отдельный фавикон, чтобы посетителям ресурса было удобно отличать версии сайта друг от друга. Часто в начало URL таких сайтов добавляется «m.», например, m.site.com.
При создании отдельной мобильной версии веб-ресурса можно расширить функционал площадки или отобразить на ней другие акции. Однако стоит понимать, что нужно будет оптимизировать каждую версию сайта отдельно. Это потребует дополнительных временных ресурсов. Кроме того, разработка мобильной версии стоит дороже создания адаптивной верстки, т. к. необходимо создать отдельный сайт.
Инструменты для проверки mobile-friendly
Существуют различные бесплатные инструменты для проверки мобильной оптимизации, к наиболее популярным относятся следующие:
- Chrome Lighthouse. Этот инструмент проверяет, насколько хорошо сайт оптимизирован для мобильных устройств, и позволяет повысить качество его страниц.
- Яндекс Вебмастер. Позволяет проверить адаптивность сайта и предоставляет краткий отчет о необходимых изменениях.
Основные ошибки при оптимизации
- Сжатые изображения. При мобильной оптимизации необходимо использовать картинки, которые хорошо отображаются на маленьких экранах.
- Мелкий шрифт. Стоит избегать использования слишком мелкого текста, который сложно читать на мобильных устройствах. Оптимальный размер шрифта для мобильных — 14 пикселей и выше.
- Длинные строки. Для мобильной версии стоит ограничить длину строк до 40–60 символов, чтобы текст было легче читать.
Чек-лист оптимизации сайта под мобильные устройства
Вот краткий список пунктов, по которым стоит оценить, оптимизирован ли ваш ресурс для смартфонов, планшетов и ПК:
- Убедитесь, что сайт одинаково хорошо отображается на всех устройствах.
- Проверьте доступность ресурса для поисковых роботов. Сделать это можно через файл robots.txt.
- Убедитесь, что сервер отправляет ответ 200 ОК для всех страниц.
- Удостоверьтесь, что на сайте нет Flash-элементов и других технологий, которые тормозят загрузку мобильной версии.
- Оцените скорость загрузки страниц на мобильных устройствах.
- Проверьте, чтобы текст на сайте был легко читаемым.
- Избегайте всплывающих окон, которые могут закрывать контент.
- Убедитесь, что процесс регистрации и связи с компанией максимально упрощен.
*Оптимизировал сайт под все адаптивы и требования ПС
Заключение
Оптимизация сайта для мобильных устройств — это не просто дань моде, а необходимое условие для его успешного продвижения. Если вы хотите, чтобы ваш веб-ресурс регулярно приводил клиентов, вы обратились по адресу. Специалисты Rubix создадут мобильную версию сайта в сжатые сроки. Клиенты со всей России доверяют нам развитие своего бизнеса!
