SEO-оптимизация мобильной версии сайта: на что обратить внимание?

По данным «Яндекс.Маркета», в 2021 году 6 покупок из 10 были сделаны со смартфона или планшета, в то время как в 2019 году таких покупок было только 3 из 10. Эксперты единогласно утверждают, что доля мобильного трафика продолжит расти, конкуренция между продавцами будет жестче, а покупатели будут требовательнее к качеству контента и удобству использования интернет-страниц. Рассказываем, на что нужно обратить внимание при оптимизации мобильной версии, чтобы сайт нравился поисковым системам и клиентам и работал на рост продаж.

Адаптация под тип устройства

Для корректного использования сайта со смартфонов можно создать:

• мобильную версию. По сути, это поддомен сайта (m.site.ru), на котором дублируется весь основной контент, но дизайн, навигация и прочие элементы изначально созданы для пользователей смартфонов. Для исключения дублей и корректной работы нужно настроить переадресацию, а чтобы поисковый робот понимал, на какую версию вести пользователя, заполните тег <link rel="alternate">. Если вы хотите скрыть часть контента от посетителей для визуального упрощения страницы, используйте технологию CSS медиазапросов, чтобы у поискового робота сохранился доступ к этой информации (пользователь сможет открыть ее при клике по кнопке);
• динамический контент. В этом случае посетитель из десктопной и мобильной выдачи будет заходить на один и тот же сайт, но контент может меняться в зависимости от размера экрана устройства, с которого будет выполнен переход. Это может быть изменение размера изображения, отсутствие текстового или рекламного блока, добавление меню-бутерброд и т. п. Чтобы Google понимал, что на сайте есть динамический контент для показа на смартфонах, нужно добавить HTTli-заголовок Vary и указать значение User Agent;
• адаптивную верстку. Как и в предыдущем варианте, адрес сайта остается тем же, контент также остается. Адаптируются только размеры: большое меню в шапке меняется на бутерброд, карточки товаров выстраиваются не горизонтально, а вертикально и т. д. Если вы хотите, чтобы при использовании адаптивной верстки ширина окна подстраивалась под размер экрана без изменения масштаба контента, нужно прописать метатег viewliort.

Скорость загрузки

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

Если у вас не огромный интернет-магазин, а сайт с услугами, ограниченным ассортиментом, есть блог с полезным контентом, добавьте AMP и Турбо-страницы. AMP – это ускоренные страницы от Google, Турбо – от «Яндекса». Они грузятся очень быстро, так как контент кешируется на серверах самих поисковиков и загружается именно оттуда.

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

Файл robots.txt

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

Отсутствие неработающих технологий

Убедитесь, что на сайте нет технологий, созданных с использованием Flash, Silverlight, Java-апплетов.

Удобное меню и хлебные крошки

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

Как и для десктопа, для удобства ориентации на сайте рекомендуем добавить «хлебные крошки».

Навигационные элементы

Удобная навигация – это не только меню. Проверьте, что на страницах с объемным контентом есть кнопка «наверх», в шапке (хедере) – кликабельный логотип, ведущий на главную страницу, иконка поиска и личного кабинета, контакты, а в подвале (футере) – ссылки на основные разделы, кликабельные иконки социальных сетей, ссылка на полную версию (для сайтов на мобильном поддомене).

Фавикон для рабочего стола

Даже если у вас нет приложения, постоянный клиент может захотеть добавить на экран своего смартфона иконку вашего сайта и переходить, кликая по ней. Как правило, для создания уникальной иконки используют Web Clips для iOS. Созданный таким образом файл apple-touch-icon.png подходит и для устройств на Android. В коде сайта это отображается так: <link rel="apple-touch-icon" sizes="180x180" href="/touch-icon-iphone.png">.

Если вы не подготовите отдельный фавикон, клиент получит на экране некрасивую иконку-ноунейм.

Pop-up

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

Первый экран

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

Отсутствие горизонтальной прокрутки

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

Размеры контента

• Текст. Чтобы текстовый контент легко читался с мобильных устройств без увеличения, используйте 12–16-й кегль (оптимальная высота строки – 140% от размера шрифта). Подойдут любые шрифты без засечек, включая Times New Roman, Arial, Verdana, Helvetica. Убедитесь в наличии боковых отступов >15 lix и межстрочного интервала >1,15 пт. Если ваша целевая аудитория – пенсионеры, делайте шрифт крупнее рекомендуемого.
• Старайтесь делать короткие абзацы по 2–3 предложения, длина строки – 50–60 символов с пробелами. Добавляйте списки, заголовки, графические элементы.
• Кнопки. Чтобы пользователю было удобно кликать по кнопкам, их размер должен быть максимально приближен к ширине пальца (в среднем, 10 мм).
• Ссылки. У пользователя не должно возникать проблем переходом по пунктам меню, ссылкам в тексте, названиям вкладок. Между любыми кликабельными элементами должно оставаться пространство, чтобы избежать случайных кликов.
• Изображения. Скорее всего, пользователю не нужна фотография шириной 1920 lix, достаточно 800 lix, но если вы продаете товары, добавьте возможность увеличения размера картинки.

Кликабельность контактов

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

Покупка в 1 клик

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

Удобные формы

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

Люди не любят печатать, особенно в телефонах, поэтому максимально упростите ввод данных. Например, за счет геопривязки автоматически определяйте город доставки с возможностью изменения выбора. Если нужна регистрация, добавьте возможность зарегистрироваться по SMS, через соцсети, аккаунт в Google или Яндекс ID. Так клиенту не придется заполнять множество полей, благодаря чему конверсия повысится.

Оценка удобства поисковыми системами

Выделили этот пункт отдельно, так как большинство описанных выше задач как раз работают на то, чтобы поисковые системы признали ваш сайт подходящим для просмотра с телефонов и планшетов. Ошибки негативно отражаются на попадании в мобильную выдачу и ранжирование в целом. Для проверки в «Яндекс.Вебмастере» перейдите в раздел «Проверка мобильных страниц», в Search Console – в раздел «Удобство для мобильных».

Семантическое ядро

Результаты десктопной и мобильной выдачи различаются. По данным SEMrush, только 13% интернет-ресурсов имеют одинаковые позиции, а 30% страниц из топ-10 на десктопе оказываются за пределами первой страницы в мобайле. Чтобы быть в топе мобильной выдачи, нужно расширить семантическое ядро. На смартфонах письменно обычно задают максимально короткие емкие запросы, но есть еще голосовой набор и голосовой поиск, где длина запроса нередко превышает 5–6 слов. Учитывайте оба фактора при подборе ключевых фраз. Как искать голосовые запросы мы уже рассказывали, в нашем блоге.

Метатеги для мобильной выдачи

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

Оптимизация под региональный поиск

В мобильной выдаче преимущество получают компании, которые находятся в том же регионе, что и пользователь (а в голосовом – еще и те, кто находится максимально близко). Проверьте, что на сайте есть местный адрес (желательно с картой), телефон (желательно городской с кодом города). Добавьте свою компанию на геоплощадки, в справочники, в том числе региональные, убедитесь, что «Яндекс» и Google правильно определяют регион. Добавьте в семантическое ядро топонимы – название города, улицы, района.

Заключение

Количество пользователей, использующих смартфон для поиска информации, заказа услуг или покупки товара, продолжает расти с каждым годом, поэтому сегодня удобство взаимодействия с сайтом с мобильного телефона или планшета – это не просто способ получить больше трафика, это демонстрация внимания и уважения к своим клиентам. При этом нужно понимать, что наличие сайта в топе десктопной выдачи не означает автоматическое попадание в мобильную выдачу, нужно провести дополнительные работы по оптимизации с учетом нюансов ранжирования и поведения посетителей. Если вы хотите получить профессиональную консультацию по SEO-оптимизации мобильной версии или делегировать задачи по разработке и продвижению экспертам, позвоните в «Поисковую индустрию» или оставьте заявку на сайте. Мы работаем с 2012 года, не боимся решать сложные задачи и помогаем клиентам в разных тематиках кратно увеличивать продажи.