Зачем нужна мобильная оптимизация сайта и что учесть для 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-оптимизаторам и программистам. Они смогут адаптировать сайт без повреждения его содержимого и функционала.