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

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

В SEO с 2005 года, и за это время соотношение перевернулось: раньше мобильную версию делали «чтобы было», теперь на неё приходится большая часть трафика почти в любой тематике, кроме узкого B2B с рабочими компьютерами. При этом на аудитах я регулярно вижу сайты, где мобильная версия отдаёт урезанный текст, теряет часть заголовков и грузится втрое дольше десктопной. Владелец смотрит на сайт с ноутбука и не понимает, почему позиции стоят.

Почему мобильная версия определяет позиции всего сайта

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

Отсюда следствие, которое переворачивает привычный порядок работ: сначала правится мобильная версия, потом десктопная. И описания товаров, и текстовые блоки, и разметку, и перелинковку проверяют именно в мобильном виде.

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

Три способа сделать сайт мобильным

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

Подход	Как устроено	Плюсы	Риски для SEO
Адаптивная вёрстка	Один адрес, одна разметка, оформление меняется под ширину экрана	Один набор страниц, нет расхождений, проще поддерживать	Тяжёлый десктопный код тянется на телефон, если не оптимизировать
Динамическая отдача	Тот же адрес, но сервер отдаёт разный код в зависимости от устройства	Можно отдавать телефону облегчённую версию	Расхождение контента, обязательный заголовок Vary, риск отдать роботу не то
Отдельная мобильная версия	Поддомен вида m.site.ru со своим набором страниц	Полный контроль над мобильным интерфейсом	Дубли, рассинхрон контента, необходимость связывать страницы попарно

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

Что поисковик проверяет в мобильной версии

Набор требований устоялся и почти не меняется годами. Их удобно держать как чеклист и прогонять после каждого крупного обновления сайта.

Требование	Как проверить	Частая поломка
Настроен viewport	Мета-тег viewport с width=device-width в коде страницы	Фиксированная ширина в пикселях — сайт открывается «уменьшенным»
Нет горизонтальной прокрутки	Открыть страницу на телефоне и провести пальцем вбок	Широкая таблица или картинка без max-width
Читаемый шрифт	Основной текст от 16 пикселей, межстрочный интервал от 1,5	Мелкий текст в карточках и подписях
Достаточные зоны нажатия	Кнопки и ссылки не меньше 44 пикселей по высоте, с отступами	Ссылки в меню и фильтрах вплотную друг к другу
Ресурсы доступны роботу	Стили, скрипты и картинки не закрыты в robots	Закрытая папка со стилями — робот видит «сломанную» вёрстку
Контент совпадает с десктопом	Сравнить текст обеих версий	Урезанные описания, скрытые блоки, отсутствующие заголовки
Нет перекрывающих баннеров	Первый экран на телефоне после загрузки	Всплывающее окно поверх контента сразу после входа
Работает без наведения курсора	Все меню и подсказки открываются касанием	Выпадающие меню, рассчитанные на hover

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

Скорость на мобильном: где теряются секунды

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

Подробнее об этом — в статье «Внутренняя SEO оптимизация сайта».

Показатель	Что измеряет	Ориентир	Типичная причина провала
Отрисовка основного содержимого	Момент появления самого крупного элемента первого экрана	До 2,5 секунды	Тяжёлая картинка баннера, шрифты, блокирующие стили
Сдвиг макета	Насколько содержимое прыгает при догрузке	Меньше 0,1	Картинки без указанных размеров, поздно подгружаемые баннеры
Отклик на действие	Задержка между касанием и реакцией интерфейса	До 200 миллисекунд	Тяжёлые скрипты, счётчики, чаты, виджеты
Ответ сервера	Время до первого байта	До 0,6 секунды	Отсутствие кэша, медленная база, слабый хостинг

Порядок работ по скорости почти всегда один и тот же, и он не начинается со сжатия картинок, хотя именно с этого начинают чаще всего.

1. Ответ сервера. Если сервер отдаёт первый байт через полторы секунды, дальше оптимизировать нечего. Кэширование страниц решает это дешевле любых переделок.
2. Блокирующие ресурсы. Стили и скрипты, загружаемые до отрисовки, задерживают появление контента. Критические стили первого экрана выносят отдельно, остальное грузят отложенно.
3. Сторонние виджеты. Онлайн-чат, карта, виджет отзывов, пиксели рекламных систем — каждый добавляет запросы и работу процессору. Их подключают по действию пользователя или с задержкой.
4. Изображения. Современные форматы, правильные размеры под экран телефона, отложенная загрузка всего, что ниже первого экрана.
5. Шрифты. Один-два начертания вместо шести, локальное размещение, отображение системного шрифта на время загрузки вместо пустого места.

Вёрстка и удобство касания

Помогу с продвижением: комплексное продвижение сайта — вывожу сайты в топ Яндекса белыми методами.

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

• Одна колонка. Многоколоночные блоки на телефоне превращаются в кашу. Всё выстраивается вертикально в порядке важности.
• Главное действие в зоне большого пальца. Нижняя треть экрана, а не верхний правый угол.
• Таблицы прокручиваются внутри себя. Широкая таблица должна иметь собственную горизонтальную прокрутку, иначе она растягивает страницу.
• Фильтры и сортировка вынесены в отдельный слой. Длинная колонка фильтров сверху отодвигает товары за пределы двух экранов, и до них не доходят.
• Меню не длиннее экрана. Многоуровневое меню на телефоне складывают в группы, иначе пользователь листает список пунктов вместо перехода в раздел.
• Отступы между кликабельными элементами. Между соседними ссылками нужен зазор, иначе человек попадает не туда и возвращается назад.
• Сайт недостаточно оптимизирован под мобильные устройства

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

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

Самая дорогая по последствиям ошибка. На мобильной версии часто прячут «лишнее»: длинное описание категории, характеристики, отзывы, хлебные крошки, часть перелинковки. Логика понятна — экономят место. Результат — страница теряет релевантность, потому что робот видит именно мобильную версию.

Скрыть текст под кнопку «показать полностью» можно: если содержимое присутствует в коде и просто свёрнуто стилями, оно индексируется. Нельзя другое — подгружать его отдельным запросом только после нажатия. В этом случае в исходном коде текста нет, и в индекс он не попадёт.

Проверка делается за минуту: откройте сохранённую копию страницы в поиске или посмотрите исходный код страницы с мобильным агентом и поищите там кусок описания. Нет текста в коде — нет текста в индексе.

Изображения, шрифты и скрипты

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

Тему разбирал отдельно: «Техническая SEO оптимизация сайта».

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

Шрифты. Каждое начертание — отдельный файл. Шесть начертаний одного семейства легко дают несколько сотен килобайт и задержку показа текста. Оставляют два-три, подключают локально и настраивают показ запасного шрифта на время загрузки.

Скрипты. Здесь чаще всего скрыт самый большой резерв. Наборы аналитики, чат, виджет обратного звонка, карта, слайдер, сторонние формы — на телефоне каждый из них борется за один и тот же слабый процессор. Разумный порядок: оставить обязательное, остальное подключать по действию пользователя. Карта, которая грузится только после нажатия «показать на карте», не стоит ничего до этого нажатия.

Формы, звонки и конверсия с телефона

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

• Телефон кликабелен. Номер должен быть ссылкой, по нажатию открывающей звонилку. Номер картинкой или просто текстом на телефоне бесполезен.
• Клавиатура соответствует полю. Для телефона — цифровая, для почты — с собакой. Это мелочь, которая сокращает заполнение на треть.
• Минимум полей. На телефоне каждое лишнее поле стоит дороже, чем на компьютере. Имя и телефон закрывают большинство сценариев.
• Автозаполнение включено. Правильные атрибуты полей позволяют браузеру подставить данные автоматически.
• Мессенджеры как альтернатива форме. Часть аудитории не любит формы и не любит звонить; кнопка перехода в мессенджер снимает этот барьер.
• Сообщение об ошибке рядом с полем. Ошибка вверху длинной формы на телефоне не видна, и человек не понимает, почему кнопка не работает.
• Сайт недостаточно оптимизирован под мобильные устройства

Чем проверять и что смотреть регулярно

Если нужна помощь по теме — мой курс по SEO.

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

Инструмент	Что показывает	Как использовать
Яндекс Вебмастер	Мобильную пригодность страниц, ошибки обхода, скорость по данным браузеров	Основной источник: показывает то, что видит именно Яндекс
Инструменты разработчика в браузере	Эмуляция телефона, замедление сети, список запросов и их вес	Поиск конкретных тяжёлых файлов и блокирующих скриптов
Метрика: вебвизор и отчёт по устройствам	Реальные записи сессий с телефонов, конверсия по типам устройств	Понять, где физически застревают люди
Живой телефон	Настоящий опыт: скорость на мобильной сети, промахи пальцем	Обязательная финальная проверка перед выкладкой

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

Смежный материал по теме — «Оптимизация навигации сайта».

Частые вопросы

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

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

Можно ли прятать текст под спойлер на мобильном? Можно, если текст присутствует в коде страницы и просто свёрнут оформлением. Нельзя, если он подгружается запросом только после нажатия.

Что делать со старым поддоменом m.site.ru? Перевести сайт на адаптивную вёрстку и настроить постраничную переадресацию с мобильного поддомена на основные адреса. Просто удалять нельзя — потеряете накопленные ссылки и трафик.

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

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

Разбираю продвижение по шагам — в своём курсе:

8:14

Коротко

• Робот обходит сайт как смартфон, и в индекс попадает мобильная версия — всё, чего в ней нет, не участвует в ранжировании даже по десктопным запросам.
• Для большинства проектов правильный путь — адаптивная вёрстка; отдельный мобильный поддомен создаёт дубли и постоянный рассинхрон контента.
• Скорость чинят по порядку: сначала ответ сервера и блокирующие ресурсы, потом сторонние виджеты, и только затем картинки и шрифты.
• Контент мобильной и десктопной версии должен совпадать; свернуть текст стилями можно, подгружать его запросом после нажатия — нельзя.
• Разрыв конверсии между телефоном и компьютером больше трети — признак проблем интерфейса: некликабельный номер, лишние поля, ошибки вне зоны видимости.
• Проверять нужно и инструментами, и на живом телефоне, регулярно, а не один раз перед запуском.
• Сайт недостаточно оптимизирован под мобильные устройства

Если мобильный трафик есть, а заявок с телефонов почти нет, приходите на SEO-консультацию — пройдём путь клиента с телефона вместе и найдём места, где он обрывается: обычно их два-три, и все чинятся без переделки сайта.