+7 499 753-40-53
+7 499 753-40-53
zapros@web-dius.ru

Мобильная оптимизация сайта - зачем нужна и что учесть для SEO

Мобильная оптимизация сайта - картинка

В 2021 году адаптация сайта под мобильные устройства является не просто одним из пунктов улучшения юзабилити, но важнейшим фактором ранжирования. Ресурс, не приспособленный для просмотра на смартфонах и планшетах, будет терять от 60% потенциальных клиентов ежегодно, а в Google вообще не станет отображаться.

Содержание

Зачем нужна мобильная оптимизация

Обычный сайт одинаково отображается на устройствах с разным расширением экрана, но стильным может выглядеть лишь на компьютере. При попытке открыть ресурс на мобильном, отображение станет некорректным. В лучшем случае, это проявляется в мелком шрифте и необходимости скроллинга страницы (перемещения ее влево-вправо кнопками или пальцем на экране). В худшем — отдельные элементы перестанут функционировать. Большинство пользователей покидает такие страницы в течение 5 секунд. Такое поведение отрицательно влияет на ранжирование в выдаче Яндекс и Google.

В 2015 году российский поисковик Яндекс запустил алгоритм «Владивосток». При формировании выдачи он учитывает, пригоден ли сайт для отображения на портативных устройствах. В Google пошли еще дальше: создали исключительно мобильную выдачу, которая отображается даже на десктопе. С конца 2020 года американский поисковик выдает по запросу только ресурсы с мобильной адаптацией. Интернет-магазины, блоги, форумы теперь рискуют остаться совсем без трафика, если не примут меры.

Рост пользователей, посещающих интернет-страницы со смартфонов ежегодно составляет 60%. Более 70% россиян совершают покупки в интернет-магазинах со смартфонов и планшетов. Этих цифр и данных достаточно, чтобы убедить даже закоренелого скептика в необходимости мобильной оптимизации.

Что дает адаптивная версия сайта

Адаптивность сайта важна для поисковых систем и пользователей. Ресурс, адаптированный для просмотра на мобильных устройствах, решает сразу несколько задач:

  • Улучшает ранжирование за счет снижения числа отказов при посещении.
  • Привлекает пользователей, пользующихся исключительно смартфоном или планшетом и не имеющих дома персонального компьютера.
  • Повышает конверсию.
  • Сохраняет репутацию сайта.
  • Гарантирует попадание в выдачу Google.

Адаптивный сайт отображается на небольших дисплеях более привлекательно с сохранением необходимых функций. Формы обратной связи упрощаются, Flash-элементы скрываются, меню становится удобнее. Сайт загружается быстрее, что в век нетерпеливых пользователей крайне важно.

Мобильная оптимизация сайта - картинка

Методы мобильной оптимизации

Существуют разные методы адаптации, но лишь три из них полностью решают задачу:

  1. Создание мобильных сайтов.
  2. Разработка адаптивной версии.
  3. Создание и настройка динамического показа.

Методы отличаются друг от друга по реализации, имеют достоинства и недостатки.

Мобильная версия сайта

Суть заключается в создании копии сайта на поддомене или индивидуальном шаблоне. При реализации метода важно правильно отладить связь между одинаковыми страницами в мобильной и десктопной версиях. В противном случае поисковые системы будут считать их дублями и исключат из выдачи. Задача решается связыванием адреса в панели вебмастеров Yandex и Google, либо указанием атрибутов rel="alternate" и rel="canonical".

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

Способ создания на отдельном шаблоне удачнее в плане SEO. При реализации такого метода URL остаются неизменным, но HTML код будет другим. Применение отдельного шаблона требует разработки и внедрения скрипта для распознавания типа устройства пользователя.

После основных работ потребуется дополнительная настройка:

  1. Отключение всех Silverlight-плагинов.
  2. Отключение Flash-элементов.
  3. Отключение Java-апплетов.
  4. Поиск и отключение всех неактивных скриптов и плагинов, установленных в CMS.
  5. Адаптация типографики под маленькие экраны. Шрифты должны автоматически меняться в зависимости от диагонали экрана.
  6. Отладка форм обратной связи и функций заказа.
  7. Проверка кликабельности ссылок.
  8. Отключение всплывающих окон.
  9. Уменьшение размеров рекламных баннеров.

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

Создаем мобильную версию
сайта под ключ

Адаптивная версия сайта

Адаптивная версия характеризуется упрощенной реализацией. При запросе одной и той же страницы с разных гаджетов URL адрес и HTML код остаются такими же. Размеры блоков и элементов сайта, их расположение определяются изменением свойств CSS.

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

Мобильная оптимизация сайта - картинка

Кроме единого URL-адреса и HTML кода плюсами адаптивной верстки являются:

  • упрощенная в сравнении с мобильной версией оптимизация;
  • автоматическое скрытие ненужных элементов;
  • правильное отображение на смартфоне и планшете.

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

Адаптивная версия требует дополнительных настроек и работ по улучшению внешнего вида:

  • изменение размера видео с помощью свойств CSS;
  • уменьшение числа задействованных скриптов;
  • создание более простого функционала;
  • изменение меню для нормального отображения;
  • отладка шрифтов;
  • настройка рекламных блоков.

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

Создаем адаптивную версию
сайта под ключ

Динамический показ

Последний метод оптимизации сайта под все устройства, по сути объединяющий предыдущие два способа. Реализация динамического показа позволяет держать URL-адрес неизменным, вне зависимости от устройства входа. Меняется лишь HTML код, который можно максимально упростить.

Имеется ряд плюсов:

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

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

Дополнительные методы подготовки сайта

Дополнительно к созданию адаптивной или мобильной версии желательно использовать вспомогательные технологии: AMP (Accelerated Mobile Pages) от Google и Яндекс.Турбо.

AMP больше подходит для внедрения в новостные порталы и блоги. Технология позволяет отказаться от части пользовательского JS, дает возможность убрать некоторые виджеты, часть HTML-тегов. В угоду более высокой скорости загрузки придется отказаться от блоков перелинковки, виджетов социальных сетей, форм обратной связи. Именно поэтому технология AMP не подходит для внедрения в интернет-магазины и сайты коммерческой направленности. Яндекс технологию AMP не поддерживает. Страницы, ускоренные этим способом, можно закрывать от индексации ботов Яндекса с помощью robots.txt.

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

Подключается технология в панели Яндекс.Вебмастер, в случае успеха в сниппете появится соответствующая иконка. Яндекс.Турбо дает возможность использовать покупку в один клик, минимальную перелинковку, внутренний поиск и корзину.

Способы проверки сайта

Если страница хорошо открывается на вашем компьютере и смартфоне — это еще не означает, что сайт настроен правильно. Поэтапная оптимизация сайта под мобильные устройства включает и проверку разных параметров. Узнать удобство расположения кнопок, качество типографики и другие нюансы можно лишь специальными инструментами: 

  1. Google PageSpeed Insights. Показывает скорость загрузки и возможные пути улучшения. Например, сервис подскажет, какие JS могут замедлять скорость загрузки и есть ли неоптимизированные изображения. По результатам проверки можно выявить нужду в оптимизации JS кода под мобильные устройства.
  2. Google Mobile Friendly Test — сервис для проверки удобства сайта. Нужно ввести адрес страницы, после чего будет проведена оценка ее состояния и даны рекомендации по улучшению.
  3. Инструмент «Мобильные страницы» в Яндекс.Вебмастер. Позволяет оценить качество оптимизации, проверить наличие скроллинга, Flash-элементов, наличие viewport и другие моменты.

Можно проверять результаты работы с помощью инструмента в Google Search Console. Сервис позволяет оценить типографику, расстояние между элементами навигации, наличие горизонтальной прокрутки.

Мобильная оптимизация сайта - картинка

Полезное видео

Для SEO-марафона студии DIUS мы подготовили видеоролик. В нём рассказываем важность адаптивной вёрстки и принципы мобильного SEO.

Подведем итоги

Сделать выбор между основными способами оптимизации сайта под мобильные устройства просто:

  • Адаптивный дизайн проще настраивать, при его реализации не нужно менять код. Считается лучшим вариантом для сайтов разной направленности.
  • Мобильная версия ввиду особенностей больше подходит для крупных порталов, соцсетей и интернет-магазинов с многочисленной аудиторией.
  • Использование отдельного шаблона (динамический показ) позволит сохранить URL-адреса. Этот способ хорош для больших веб-ресурсов с множеством страниц, например, для информационных порталов.

Вне зависимости от выбранного способа, избежать настройки и доводки не удастся. Если нет профильного образования, эту работу лучше доверить SEO-оптимизаторам и программистам. Они смогут адаптировать сайт без повреждения его содержимого и функционала.

Комментарии

Добавить комментарий

* Поля, обязательные для заполнения
Бесплатный
аудит сайта
Сделаем анализ
сайта, напишем
как сделать
его продающим и
популярным в
поиске
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.
Контакты
Офис продаж:
г. Москва, ул. 4-я Кабельная, 2 строение 1А, 5-й этаж, офис №2
Пн - Пт: 9.00-18.00

SEO-Продвижение:
узнайте стоимость для вашего сайта!

Студия DIUS работает с продвижением сайтов:

Бесплатное составление
бюджета
5
шагов для рассчета стоимости
продвижения онлайн!
 
  • По трафику
  • По позициям
  • Продвижение молодых сайтов
  • Продвижение интернет-магазинов

Ваш расчет готов. Пожалуйста, заполните форму ниже для связи с вами по данному вопросу:

Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
X
Хочу быть автором