Привлечение и конвертация мобильного трафика: начинаем с азов

С чего начать продвижение?

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

Загрузка вашего сайта не должна быть больше трех секунд. Оптимально — одна секунда. Для этого уменьшайте размеры картинок (не больше 800 пикселей в ширину) и упрощайте верстку. Уберите анимацию и всплывающие окна — они не только тормозят загрузку, но и раздражают пользователей.

Если у вас адаптивный сайт, поработайте с каскадными таблицами стилей, CSS. Используйте атрибут @media, чтобы указать особые стилевые правила, которые будут действовать при отображении сайта на смартфоне (кстати, владельцам планшетов рекомендуется показывать десктопную версию сайта). Если создаете лендинг на базе шаблонов Флексби, то ничего прописывать не нужно — верстка будет оптимизирована под мобильные устройства автоматически.

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

Впишите новые данные в robots.txt

В файле robots.txt должен быть доступ ко всем картинкам, а также файлам -js и -css, иначе поисковый робот не сможет правильно проиндексировать ваш сайт.

Если для мобильных пользователей у вас открывается отдельный сайт (мобильная версия со ссылкой типа m.site.com), то мета-данные основного и мобильного сайтов должны быть одинаковыми.

Если у вас адаптивная верстка, то нужно сообщить поисковому роботу, что ваш сайт подходит для просмотра с мобильных девайсов. Для этого используйте мета-тег viewport. Выглядеть это будет так: <meta name="viewport" content="width=device-width, initial-scale=1">.

Отредактируйте мета-теги страниц

Замените заголовки и мета-описания страниц на более короткие, чтобы они полностью отображались в поисковиках на небольших смартфонах. Рекомендации для названий — 40-60 символов, для описаний — не больше 90 символов.

В тайтле сайта spark.ru — 47 символов без пробелов, а в описании — 82.

Чтобы поисковый робот при индексировании не решил, что вы украли контент с чужого сайта, в хедере десктопной версии поставьте ссылку на мобильную версию с атрибутом alternative, а в мобильной — на десктопную с атрибутом canonical.

Проверьте редиректы

В мобильной версии важно проверить правильность ссылок и редиректов между сайтами. Переадресация с большого количества страниц на одну (например, на главную) будет будет считаться ошибкой. Чтобы не запутаться в собственных страницах, лучше сразу делать зеркальные ссылки: например, m.site.ru/page1 в мобильной версии и site.ru/page1 в десктопной.

Добавьте семантическую разметку

Один из самых полезных SEO-инструментов — семантическая разметка. Она позволяет выделить полезное содержимое на сайте и подсказать поисковику, как его лучше отобразить. Выделяйте с помощью такой разметки заголовки, разделы, авторов, рейтинг, указывайте тип содержимого (отзыв, рецепт, адрес и т.д.), а поисковик отобразит содержимое лучшим образом. Для микроразметки используется стандарт Schema.org. Такая разметка не очень сложна, и мы настоятельно рекомендуем в ней разобраться, например, с помощью руководства от Яндекса.

Расширенный сниппет в выдаче Яндекса

Уберите неподдерживаемый контент

Замените на сайте контент, который может некорректно отображаться на некоторых девайсах. Типичный случай — Flash, который поддерживается не всеми устройствами. HTML5 — хорошая замена Flash.

Неподдерживаемым может также оказаться контент с ограничивающей лицензией, видео и анимация в экзотических форматах (Silverlight, Applet).

Расскажите поисковикам, где вы находитесь

Зарегистрируйте компанию в Google+ и Яндекс.Справочнике, укажите адреса основного офиса и филиалов. Если сделать это, ваш сайт будет приоритетно показываться пользователям, которые находятся поблизости.

Как повысить конверсию?

Скройте ненужный контент

Хотите привлекать мобильную аудиторию — уменьшайте объем контента. Так проще сфокусировать внимание клиента на важном и сделать удобную верстку.

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

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

Сделайте понятный интерфейс

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

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

Шаблон с адаптивной версткой от Флексби

Увеличьте кнопки и расстояния между ними

В интерактивные объекты бывает сложно попасть, когда тапаешь пальцем по тачкрину. Проверьте все элементы интерфейса, чтобы они были достаточно большого размера: кнопки, например, лучше делать размером 7-10 мм (Apple рекомендует минимум 44 на 44 px). Увеличьте расстояние между ссылками и кнопками, чтобы оно было не меньше 7 мм. Позаботьтесь о том, чтобы шрифт был достаточно крупным, иначе пользователю будет тяжело читать текст со смартфона.

Добавьте ссылки к номерам телефонов

Чтобы клиенту было проще связаться с вами, сделайте все номера телефонов для звонка и связи по мессенджеру кликабельными. Не забудьте, что они должны начинаться с +7.

Оптимизируйте форму регистрации

Идеально, если у вас на сайте вообще нет формы регистрации, а вместо нее — кнопка заказа в один клик. Но если без формы никак не обойтись, то постарайтесь, чтобы полей было как можно меньше. Форма должна помещаться на один экран.

Хороший пример формы

Если вариантов ответа много, предлагайте выбрать из списка. Если их всего два, лучше поставить чекбокс или переключатель. Для чисел используйте степпер (поле, в котором можно выбрать число с помощью кнопок +/-) или ввод на числовой клавиатуре.

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

Настройте геотаргетинг

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

Геотаргетинг позволяет использовать местонахождение клиента, чтобы показать контент, который будет полезен в его локации. Это могут быть контакты ближайшего магазина или офиса (телефон, адрес, расписание работы), условия доставки в этот город, региональные скидки, информация о доступных товарах в ближайших магазинах.

Чтобы настроить геотаргетинг, используйте геолокационные инструменты Google Maps JavaScript API, API Яндекс.Карт, HTML5 Geolocation API и др.

Чек-лист для тех, кто хочет оптимизировать сайт:

• Уменьшайте картинки, названия и мета-описания.
• Убирайте лишние картинки и тексты, анимацию, всплывающие окна, flash, горизонтальную прокрутку, большие формы регистрации и т.д.
• Пропишите в robots.txt, что ваш сайт адаптирован для мобильных девайсов и настройте связь между основным и мобильным сайтами.
• Делайте зеркальные ссылки и проверяйте правильность редиректов.
• Укрупняйте шрифт и кнопки.
• Заменяйте меню, хедер и футер на более компактные.
• Добавьте семантическую разметку и ссылки к номерам телефонов.
• Настройте геотаргетинг.

Напоследок: полезные инструменты для работы

• Сервисы для проверки индексации сайта. Находят технические ошибки на сайте, дают рекомендации по оптимизации, отслеживают сбои в индексации. Google Search Console — инструмент Сканирование, Яндекс.Вебмастер — инструмент Диагностика сайта.
• Сервисы веб-аналитики. Показывают статистику посещений сайта, источники трафика, характеристики посетителей и т.д. Используйте Google Analytics, Яндекс.Метрику, Piwik, Carrotquest и др.
• Сервисы измерения скорости загрузки сайта. Они не только показывают скорость загрузки, но и выставляет оценку сайту и дают рекомендации по улучшению. К рекомендациям стоит прислушаться, а вот гнаться за максимально высокой оценкой не нужно: это совсем не обязательно скажется на быстродействии сайта или на конверсии. Используйте Google PageSpeed Insights, GTMetrix, Pingdom Tool и др.