Мобильная версия сайта сегодня определяет позиции всего сайта — включая те запросы, по которым к вам приходят с компьютера. Робот обходит страницы под видом телефона, оценивает именно то, что видит на маленьком экране, и на основании этого решает, насколько страница пригодна для показа. Если мобильный вид беднее, медленнее или неудобнее десктопного, проседает весь домен, а не только мобильная выдача.
Владельцу сайта это почти никогда не видно. Он проверяет свой сайт с рабочего компьютера, там всё в порядке, а половина посетителей в это время не может нажать на кнопку заявки, потому что она перекрыта плашкой согласия на обработку данных. Ниже — конкретные технические ошибки, которые понижают сайт в выдаче, способы их найти и порядок, в котором их чинят.
Что означает индексирование по мобильной версии на практике
Поисковый робот приходит на сайт с идентификатором мобильного браузера и получает ту же страницу, что и владелец телефона. Именно этот вариант попадает в индекс, по нему оценивается скорость, по нему анализируется содержание и определяется соответствие запросу. Десктопный вид при этом не игнорируется полностью, но основой служит мобильный.
Из этого следуют три практических вывода, которые меняют порядок работы над сайтом.
- Контент, которого нет на мобильном, для поиска не существует. Свёрнутые блоки, скрытые таблицы, убранные из мобильной вёрстки описания — всё это не работает на релевантность.
- Скорость меряется по мобильной загрузке. Не по вашему оптоволокну и не по десктопному браузеру, а по условиям, близким к обычному телефону в обычной сети.
- Удобство проверяется на маленьком экране. Промахи по кнопкам, горизонтальная прокрутка, мелкий шрифт — всё это фиксируется как проблема, потому что за этим следуют возвраты в выдачу.
- Как найти ошибки на сайте: порядок диагностики от симптома к причине
Проверить, каким робот видит сайт, можно в панели для вебмастеров: там есть просмотр страницы глазами робота и отдельный раздел диагностики мобильных проблем с перечнем конкретных адресов.
Отдельная мобильная версия на поддомене: главный риск
Схема с адресом вида m.site.ru была нормой десять лет назад, а сегодня превратилась в источник постоянных потерь. Причина простая: мобильная версия почти всегда делалась урезанной. Из неё убирали «лишние» блоки — характеристики, отзывы, описания, таблицы совместимости, разделы вопросов. И именно эту укороченную страницу поисковая система берёт за основу.
Дополнительно возникает набор технических проблем: два адреса с одинаковым содержанием, необходимость правильно связать их взаимными указателями, риск, что переадресация с десктопной версии ведёт не на соответствующую страницу, а на главную мобильной. Последнее встречается чаще всего: человек переходит из поиска на карточку товара, а попадает на главную и уходит.
Правильное решение сегодня одно — адаптивная вёрстка: один адрес, одно содержание, разное оформление под разные ширины экрана. Если переезд с поддомена невозможен прямо сейчас, минимальная страховка такая: содержание мобильной версии должно полностью совпадать с десктопной, переадресация должна вести на соответствующую страницу, а взаимные указатели на канонический и альтернативный адрес — стоять на обеих версиях.
Ошибки вёрстки, которые фиксируются как проблема
Четыре дефекта встречаются чаще остального и распознаются автоматически.
Подробнее об этом — в статье «Яндекс Директ понижает позиции сайта когда его отключаешь».
Отсутствие метатега области просмотра. Без строки <meta name="viewport" content="width=device-width, initial-scale=1"> браузер отрисовывает страницу как уменьшенную копию десктопной: текст мельчает до нечитаемости, пользователь вынужден растягивать пальцами. Это самая грубая из ошибок и самая простая в исправлении.
Слишком мелкий текст. Базовый размер основного текста меньше 16 пикселей на мобильном заставляет увеличивать масштаб. Отдельная беда — мелкий шрифт в характеристиках и в подписях: там его часто оставляют на уровне 11–12 пикселей, потому что «так помещается в таблицу».
Помогу с продвижением: SEO-продвижение для бизнеса — вывожу сайты в топ Яндекса белыми методами.
Мелкие или тесно стоящие элементы нажатия. Кнопка и ссылка должны иметь область нажатия не меньше примерно 48 на 48 пикселей и отступ от соседних элементов. Классический случай — список ссылок в подвале с межстрочным интервалом в один пиксель: человек пытается попасть в «Контакты», а открывает «Политику конфиденциальности».
Горизонтальная прокрутка. Один элемент шире экрана — и вся страница ездит вбок. Виноваты обычно таблицы с фиксированной шириной, длинные адреса без переносов, встроенные видео с жёсткими размерами и блоки с отрицательными отступами. Правило * { max-width: 100%; box-sizing: border-box; } закрывает часть случаев, но таблицы нужно оборачивать в контейнер с собственной горизонтальной прокруткой.
Урезанное и скрытое содержание
Отдельная категория, которую почти не проверяют, потому что визуально всё выглядит хорошо. Речь о содержании, которое на мобильном спрятано или отсутствует.
- Блоки, отключённые правилом отображения. Если в мобильных стилях блок полностью скрыт, его содержание для оценки страницы фактически теряется.
- Аккордеоны и вкладки. Свёрнутый по умолчанию текст, который присутствует в коде страницы, обычно учитывается, но его вес ниже, чем у видимого. Прятать под вкладки главное описание страницы не стоит.
- Подгрузка по нажатию. Если текст догружается только после нажатия кнопки «показать полностью» и в исходном коде его нет, для поиска этого текста не существует вообще.
- Разные заголовки на версиях. Встречается, когда мобильный шаблон подставляет короткий вариант заголовка. Тогда страница ранжируется по короткому.
- Как найти ошибки на сайте: порядок диагностики от симптома к причине
Проверка простая: откройте исходный код страницы, запрошенной с мобильным идентификатором браузера, и поищите в нём фрагменты текста, которые есть в десктопной версии. Всё, что не нашлось, для поиска отсутствует.
Всплывающие окна и всё, что перекрывает экран
На телефоне окно, занимающее половину экрана, — это половина всего содержания. Поэтому перекрывающие элементы оцениваются строже, чем на десктопе, и по ним хорошо видно раздражение пользователя: он возвращается в выдачу, не досмотрев страницу.
Типовой набор, который в сумме съедает весь первый экран: плашка согласия на обработку данных внизу, окно с предложением скидки через пять секунд, виджет чата в правом нижнем углу, кнопка обратного звонка в левом нижнем и закреплённая шапка сверху. По отдельности каждый элемент кажется безобидным, вместе они не оставляют места для содержания.
Тему разбирал отдельно: «Мобильное приложение или мобильная версия сайта что лучше».
Что делать: согласие на обработку данных — узкой полосой, а не окном на пол-экрана; предложения скидок — по прокрутке до середины страницы, а не по таймеру; виджеты чата и звонка — в один свёрнутый элемент, а не в два; закреплённую шапку на мобильном делать высотой не больше 56 пикселей или не закреплять вовсе.
Скорость: что действительно тормозит на телефоне
Мобильная загрузка отличается от десктопной не столько каналом, сколько процессором. Телефон медленнее разбирает и исполняет скрипты, и именно на этом теряются секунды. Поэтому «сжали картинки и стало быстро» работает не всегда.
- Изображения без адаптации. Одна и та же картинка шириной 2000 пикселей отдаётся и на десктоп, и на экран шириной 360. Лечится современными форматами, атрибутом с набором размеров и отложенной загрузкой всего, что ниже первого экрана.
- Сторонние скрипты. Чаты, виджеты обратного звонка, карты, счётчики, пиксели рекламных систем. На телефоне их разбор занимает в разы больше времени. Каждый такой скрипт должен отвечать на вопрос, что он приносит; всё остальное убирается.
- Шрифты. Подключение четырёх начертаний с внешнего сервера даёт задержку и мигание текста. Достаточно двух начертаний, размещённых на своём домене, с отображением запасным шрифтом на время загрузки.
- Ответ сервера. Если сервер думает над страницей секунду, никакая оптимизация внешнего вида этого не компенсирует. Проверяется отдельно от общей скорости и лечится кэшированием и настройками хостинга.
- Смещение содержания при загрузке. Баннер догрузился и сдвинул текст вниз ровно в момент нажатия. Лечится заданием размеров для всех медиаэлементов и резервированием места под рекламные блоки.
Ошибки, проверки и исправления в одной таблице
| Ошибка | Как обнаружить | Что делать |
|---|---|---|
| Нет метатега области просмотра | Поиск по исходному коду страницы | Добавить строку в служебную часть шаблона |
| Мелкий текст | Инструменты разработчика, режим устройства | Базовый размер 16 пикселей, подписи не меньше 14 |
| Мелкие кнопки и ссылки | Проверка на реальном телефоне пальцем | Область нажатия от 48 пикселей, отступы между ссылками |
| Горизонтальная прокрутка | Свайп влево на телефоне, отчёт об удобстве | Ограничить ширину элементов, таблицы в прокручиваемый контейнер |
| Содержание скрыто на мобильном | Сравнение исходного кода двух версий | Показывать тот же текст, убрать полное скрытие блоков |
| Перекрывающие окна | Открыть страницу из поиска на телефоне | Согласие узкой полосой, окна по прокрутке, виджеты в один элемент |
| Медленная загрузка | Отчёт о скорости и данные счётчика по устройствам | Адаптивные изображения, отложенные скрипты, кэш на сервере |
| Сдвиг содержания при загрузке | Показатель смещения в отчёте о скорости | Задать размеры медиаблоков, зарезервировать место |
Как проверять мобильную версию
Четыре инструмента, каждый отвечает за своё.
Панель для вебмастеров. Раздел диагностики покажет страницы, признанные неудобными для мобильных, с указанием типа проблемы. Это официальный список, и начинать надо с него: там перечислены именно те адреса, из-за которых сайт теряет позиции.
Инструменты разработчика в браузере. Режим эмуляции устройства позволяет быстро увидеть переполнения, проверить размеры шрифтов и посмотреть, какие правила применяются на узком экране. Он удобен для поиска причины, но не заменяет проверку на живом устройстве.
Отчёты о скорости. Смотреть надо мобильную вкладку и не сам балл, а раздел с конкретными замечаниями. Балл — одно измерение одной страницы, он прыгает от запуска к запуску; список проблем стабилен.
Настоящий телефон в обычной сети. Незаменимая проверка. Отключите домашний вайфай и пройдите весь путь: из выдачи на страницу, из страницы в каталог, в карточку, в корзину, до отправки заявки. Половина находок появляется именно здесь и ни в одном отчёте не отражается — перекрытая кнопка, неработающая маска телефона, клавиатура, закрывающая поле ввода, кнопка отправки, до которой не доскроллить.
Смежный материал по теме — «Микроразметка сайта — влияние на позиции в Яндекс».
Дополнительно посмотрите в счётчике посещаемости отчёт по устройствам: доля мобильных, отказы и время на странице отдельно для телефонов. Если по мобильным отказы заметно выше, а конверсия ниже, причина техническая почти всегда.
Порядок исправления: с чего начинать
| Очередь | Что чинить | Почему сначала |
|---|---|---|
| Первая | Метатег области просмотра, горизонтальная прокрутка, недоступное содержание | Мешают индексированию и оцениванию страницы целиком |
| Вторая | Перекрывающие окна, размеры кнопок, поля форм | Прямо забирают обращения, которые уже пришли на сайт |
| Третья | Ответ сервера, изображения, сторонние скрипты | Влияют постепенно, требуют работы на стороне сервера |
| Четвёртая | Шрифты, смещение содержания, мелкие правки оформления | Улучшения, заметные после того, как убраны грубые дефекты |
Правки первой очереди обычно занимают несколько часов работы верстальщика и дают самый заметный результат. Ошибка большинства — начинать с четвёртой строки, потому что она понятнее и её проще поручить.
Частые вопросы
Сайт адаптивный, но в панели всё равно есть замечания по мобильным. Как так? Адаптивная вёрстка не гарантирует отсутствия дефектов. Чаще всего виноваты таблицы и встроенные блоки с жёсткой шириной, которые ломают сетку на узком экране. Откройте перечисленные адреса на телефоне и проведите пальцем влево — если страница едет, причина найдена.
Насколько быстро возвращаются позиции после исправления? Сначала робот должен переобойти исправленные страницы, затем данные должны попасть в расчёт. На небольшом сайте это обычно две-четыре недели, на крупном каталоге дольше. Ускорить помогает отправка адресов на переобход и корректная карта сайта с обновлёнными датами.
У нас почти весь трафик с компьютеров. Мобильная версия всё равно важна? Да, потому что оценивается мобильный вариант независимо от того, откуда приходят ваши посетители. Кроме того, стоит проверить, не является ли низкая доля мобильных следствием того, что с телефона сайтом пользоваться невозможно.
Можно ли скрывать часть текста под кнопку «показать полностью»? Можно, если текст присутствует в исходном коде страницы. Нельзя, если он подгружается запросом только после нажатия. И в любом случае главный ответ на вопрос пользователя должен быть виден сразу.
Что делать с чатом, который перекрывает кнопку заказа? Уменьшить его свёрнутое состояние до небольшого значка, поднять над нижним краем и обязательно проверить на экране высотой около 640 пикселей — на таких аппаратах перекрытие проявляется чаще всего. Если чат приносит мало обращений, на мобильных его разумнее отключить совсем.
Стоит ли делать отдельную мобильную версию, если сайт старый и переверстать дорого? Нет. Поддомен создаёт больше проблем, чем решает: расхождение содержания, ошибки переадресации, двойная работа при каждом изменении. Дешевле сделать адаптивной хотя бы главную, страницы услуг и карточки — то есть те страницы, которые приносят обращения.
Коротко
- Основой для оценки служит мобильный вариант страницы, поэтому его дефекты понижают сайт целиком, включая десктопные запросы.
- Отдельная версия на поддомене почти всегда урезана по содержанию, и в индекс попадает именно урезанный вариант. Правильное решение — адаптивная вёрстка с одним адресом.
- Четыре автоматически распознаваемых дефекта: отсутствие метатега области просмотра, мелкий текст, тесные элементы нажатия и горизонтальная прокрутка.
- Содержание, скрытое правилом отображения или подгружаемое только по нажатию, для поиска не существует. Проверяется сравнением исходного кода двух версий.
- На телефоне тормозят не столько картинки, сколько сторонние скрипты и время ответа сервера. Разбирать скорость надо по частям, а не по общему баллу.
- Чинят по очереди: сначала то, что мешает индексированию, затем то, что забирает обращения, затем скорость, и только потом оформление.
- Как найти ошибки на сайте: порядок диагностики от симптома к причине
Если нужен разбор конкретного сайта — какие из перечисленных дефектов на нём есть, на каких страницах и что чинить первым, — это SEO-консультация: смотрю проект вместе с отчётами панели и счётчика и выдаю список правок в порядке влияния. Можно начать с общей проверки — аудит сайта на ошибки или короткий бесплатный аудит.
Нужно доработать сайт под требования поисковых систем? Помогу.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →Комментарии
Станислав Жеглов
У нас интернет-магазин с мобильной версией на поддомене, сделан лет семь назад. Переверстать в адаптив — большие деньги. Что можно сделать прямо сейчас, чтобы хотя бы перестать терять?
Анатолий Кузнецов автор
Первым делом сравните содержание. Возьмите десяток карточек товара и сравните исходный код десктопной и мобильной версии: почти наверняка на мобильной не хватает характеристик, описания и отзывов. Всё, чего там нет, для поиска отсутствует, и это ваша главная потеря. Второе — проверьте переадресацию: она должна вести с конкретной страницы на её мобильный аналог, а не на главную. Ошибка встречается в большинстве старых реализаций и убивает трафик на карточки. Третье — убедитесь, что на обеих версиях стоят взаимные указатели на канонический и альтернативный адрес. Эти три правки не требуют переверстки и делаются за пару дней, а адаптив планируйте отдельно, начав со страниц, которые приносят заказы.
Анна Загайнова
Мобильный балл скорости 38, десктопный 92. Хостинг говорит, что сервер быстрый и дело в сайте. Разработчик говорит, что дело в хостинге. Как понять, кто прав?
Анатолий Кузнецов автор
Спор решается одним числом — временем ответа сервера. Это интервал от запроса до прихода первого байта, и он не зависит от вёрстки, картинок и скриптов. Посмотрите его в отчёте о скорости или замерьте консольной утилитой несколько раз подряд. Если оно стабильно превышает половину секунды, вопрос к серверу и настройке кэширования. Если укладывается в две-три десятых, сервер ни при чём, и дальше смотрите раздел отчёта про блокирующие скрипты и время исполнения. Обычно на мобильном балл проседает именно из-за сторонних виджетов: чат, карта, счётчики рекламных систем. Отключите их по одному в режиме разработчика и пересчитайте — виновник найдётся за полчаса.
Руслан Ибрагимов
В панели висит около сотни страниц с пометкой о проблемах на мобильных, но при открытии на телефоне всё выглядит нормально. Ошибка панели?
Анатолий Кузнецов автор
Почти наверняка не ошибка, просто дефект проявляется не там, где вы смотрите. Проверьте три вещи. Первая — ширина экрана: на аппарате с шириной 360 пикселей ломается то, что на 414 держится. Задайте в инструментах разработчика узкий вариант и прокрутите страницу до конца. Вторая — горизонтальное переполнение ниже первого экрана: чаще всего это таблица характеристик или блок с отзывами, а сверху страница выглядит идеально. Третья — размеры ссылок в подвале и в хлебных крошках, там межстрочный интервал обычно минимальный. И откройте не главную, а именно те адреса, которые перечислены в отчёте: панель называет конкретные страницы, а проверяют почему-то всегда главную.
Кристина Железина
Маркетолог требует поставить всплывающее окно со скидкой через 3 секунды после захода. Говорит, что конверсия вырастет. Я против. Кто прав?
Анатолий Кузнецов автор
Спор решается не мнением, а условиями показа. Окно, закрывающее содержание сразу после захода на мобильном, — ровно тот случай, который оценивается как помеха, и одновременно ровно тот случай, когда человек возвращается в выдачу. Компромисс, который обычно устраивает обе стороны: показывать окно не по таймеру, а по прокрутке до середины страницы или при попытке ухода, ограничить его половиной экрана с крупным крестиком и не показывать повторно тому, кто уже закрыл. И договоритесь замерять не только заполнения формы, но и отказы с мобильных за тот же период. В моей практике после такой перенастройки заявок остаётся столько же, а отказы падают.
Владимир Злобин
Обнаружил, что на мобильной версии скрыт весь блок с описанием услуги — дизайнер убрал его правилом отображения, чтобы «не мешал». Три года так работало. Позиции восстановятся?
Анатолий Кузнецов автор
Скорее всего да, но не мгновенно. Верните текст в видимую часть страницы, а не просто снимите скрытие в стилях — он должен быть частью нормального содержания, а не висеть внизу нулевым блоком. После правки отправьте страницы на переобход через панель и обновите даты в карте сайта. Дальше ждите: роботу нужно скачать новую версию, а системе — пересчитать соответствие запросам, это обычно две-четыре недели на небольшом сайте. Параллельно проверьте, не скрыто ли что-то ещё: пройдитесь поиском по мобильным стилям и посмотрите все правила полного скрытия блоков — часто выясняется, что вместе с описанием пропали отзывы и раздел вопросов.
Галина Исайкина
Про клавиатуру, закрывающую поле ввода, — это прямо про нашу форму. Проверяли только в эмуляторе, там такого не видно в принципе.
Матвей Жолудев
Не соглашусь насчёт отключения чата на мобильных. У нас с телефонов идёт больше половины обращений именно через чат, люди не любят звонить. Вопрос в размере значка, а не в самом чате.
Лариса Затонская
Таблица с очередями исправлений очень пригодилась. Показала разработчику — впервые за год у нас получился внятный список задач вместо общего «сделайте адаптив нормально».
Аркадий Ильющенко
Скажите, а насколько критичен сдвиг содержания при загрузке? У нас баннер догружается и всё прыгает, но выглядит это доли секунды.
Виктория Журенкова
Сделали таблицы прокручиваемыми внутри контейнера, как советуете. Горизонтальная прокрутка страницы пропала, но теперь пользователи не понимают, что таблицу надо листать вбок. Добавили тень у края — стало заметно.
Эдуард Зеленцов
Проверил долю мобильных в счётчике: 78% визитов, а конверсия в заявку в четыре раза ниже десктопной. Никогда не смотрел эти цифры отдельно, а надо было начинать с них.
Софья Ищенко
Про шрифты в характеристиках — попадание. У нас 11 пикселей в таблице совместимости, потому что иначе не влезало. Придётся переделывать таблицу, а не шрифт.
Старт 
Стандарт 
Премиум 
Полезно новичкам которые верстают сразу под десктоп и забывают про телефоны.
А я думал адаптив решает всё оказалось есть нюансы с сенсорными элементами.
Толково и по делу. Мобильные давно важнее десктопа а многие всё ещё это игнорируют.
По опыту чаще всего страдают тяжёлые картинки и всплывающие окна на телефонах.
Сохранила буду проверять все проекты по вашему списку.
Добавлю Яндекс Вебмастер отлично показывает мобильные ошибки не забывайте туда заглядывать.
Спасибо за понятный язык обычно про технику пишут так что ничего не разберёшь.
Как проверить мобильную версию сайта на реальных устройствах а не только в эмуляторе браузера
Кирилл, эмулятор не заменит живого теста откройте сайт на паре реальных телефонов с разными экранами. Плюс смотрите отчёты Яндекс Вебмастера по мобильной пригодности там видны ошибки на реальных заходах.
Хорошо но не хватило примеров кода как правильно настраивать адаптив.
У нас после исправления скорости на мобильных позиции подросли за месяц заметно.
Отличный разбор особенно про вьюпорт и мелкие кликабельные элементы. Забрал в работу.
Обязательно ли делать отдельную мобильную версию или достаточно адаптивной вёрстки одной для всех устройств
Наталья, в подавляющем большинстве случаев достаточно качественной адаптивной вёрстки отдельная мобильная версия сегодня скорее лишняя головная боль. Главное чтобы один и тот же адрес одинаково хорошо открывался на любом экране.
Не всё так критично. У меня куча мелких огрехов а позиции на мобильных нормальные.
Мобильный трафик у нас основной так что статья прям в точку. Иду чинить вёрстку.
Какие технические ошибки мобильной версии Яндекс наказывает жёстче всего по вашему личному опыту
Алексей, жёстче всего Яндекс реагирует на нечитаемый текст мелкие кнопки и горизонтальную прокрутку на телефоне. Это прямые сигналы плохого мобильного опыта и они бьют по позициям сильнее всего.
Проверил свой сайт по чеклисту нашёл три ошибки о которых даже не подозревал. Спасибо большое.