Робот открыл ваш сайт на телефоне и ужаснулся: почему десктопная версия больше ничего не решает

У меня был клиент — оптовик, продаёт садовый инструмент. Сайт на большом мониторе выглядел солидно: крупные фото, аккуратные таблицы, подробные описания. Владелец им гордился. А позиции в Яндексе полгода стояли на месте, потом медленно поползли вниз. Мы открыли тот же сайт на обычном смартфоне — и всё встало на свои места. Половина текста была спрятана под кнопкой «Подробнее», которая на телефоне не нажималась. Шрифт — мелкий, приходилось щуриться. Кнопка «Оставить заявку» налезала на соседнюю ссылку, и попасть по ней пальцем можно было с третьего раза. Клиент этого не видел — он всегда заходил с ноутбука. А робот Яндекса видел только это. Не хотите вникать сами — я много лет занимаюсь раскруткой сайта в поиске и подскажу точки роста вашего сайта.

Вот про это и статья. Про то, что поисковый робот давно судит ваш сайт не по красивой десктопной версии, а по тому, как он выглядит и работает на телефоне. Называется этот подход mobile-first. Разберу простым языком: что это, почему так вышло, какие ошибки убивают мобильную версию, как всё проверить за 15 минут и что чинить в первую очередь, чтобы вернуть позиции и заявки.

Что такое mobile-first индексация простыми словами

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

Потом мир перевернулся. Люди пересели с компьютеров на смартфоны, и сегодня по большинству коммерческих тематик 60–75% посетителей заходят с телефона. В нишах вроде доставки еды, услуг «рядом со мной», бьюти или мелкого ремонта — все 80%. Поисковики посмотрели на эти цифры и сделали логичный вывод: если почти все пользователи сидят в мобильном, то и оценивать сайт надо по мобильной версии. Так родилась mobile-first индексация.

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

Почему и Яндекс, и Google оценивают именно мобильную версию

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

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

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

Скрытый контент: главная ошибка, о которой никто не думает

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

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

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

Мелкие шрифты и текст, который невозможно прочитать

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

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

Тыкабельность: когда пальцем не попасть по кнопке

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

Что чаще всего ломается на мобильных:

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

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

Скорость: телефон — это не быстрый интернет и не мощный процессор

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

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

Вьюпорт: одна строчка кода, без которой сайт «не мобильный»

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

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

Как проверить свою мобильную версию за 15 минут

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

• Откройте сайт на своём телефоне. Не на компьютере, а именно на смартфоне, как это делает клиент. Пройдите путь покупателя: главная, страница услуги, форма заявки. Читается ли текст без увеличения? Попадаете ли пальцем по кнопкам? Виден ли весь контент, что и на десктопе?
• Сравните объём текста. Откройте важную страницу на компьютере и на телефоне. Если на мобильном текста заметно меньше — часть контента прячется от робота.
• Проверьте скорость в PageSpeed Insights. Вставьте адрес страницы, смотрите вкладку «Мобильные». Красная или оранжевая зона — есть над чем работать.
• Загляните в Яндекс.Вебмастер. Там есть данные по мобилопригодности и по проблемам, которые нашёл робот. Если вы не знаете, что это за инструмент, у меня есть отдельный разбор про то, что такое Вебмастер и чем он занимается.
• Проверьте, как страница попала в индекс. Иногда проблема глубже — страница вообще плохо индексируется. Как это проверить, я подробно разобрал в материале про проверку индексации сайта в Яндексе.

Если после этой проверки вы нашли три-четыре проблемы — это нормально, они есть почти у всех. Плохо, когда их не ищут вовсе.

Как mobile-first влияет на позиции и заявки

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

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

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

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

Что чинить в первую очередь: порядок действий

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

• 1. Вернуть в мобильную версию весь важный контент. Это фундамент. Если робот видит огрызок вместо полной страницы, никакие остальные правки не помогут. Проверяем, что весь текст, характеристики, блоки преимуществ и вопросов-ответов присутствуют в коде мобильной версии.
• 2. Настроить вьюпорт и адаптив. Убедиться, что сайт корректно подстраивается под ширину экрана и нет горизонтальной прокрутки. Без этого поисковик считает сайт немобильным в принципе.
• 3. Разогнать мобильную скорость. Сжать и отдать картинки в нужном размере, включить ленивую загрузку, убрать лишние скрипты. Целимся хотя бы в зелёно-оранжевую зону на мобильных.
• 4. Поправить шрифты и читаемость. Основной текст от 16 пикселей, просторный межстрочный интервал, короткие абзацы.
• 5. Разобраться с тыкабельностью. Увеличить кнопки, развести ссылки, сделать телефон кликабельным, привести в порядок формы и всплывающие окна.

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

Коротко: главное про mobile-first

• Поисковый робот оценивает ваш сайт по мобильной версии, а не по десктопной. Что не попало в мобильную версию — для поиска не существует.
• И Яндекс, и Google приоритетно смотрят на мобильную адаптацию, потому что большинство пользователей заходят с телефонов.
• Самая частая и опасная ошибка — скрытый или удалённый на телефоне контент. Робот видит урезанную страницу и понижает её.
• Мелкий шрифт, промахи мимо кнопок, медленная загрузка и отсутствие вьюпорта — четыре типовые проблемы мобильной версии.
• Проверить всё можно за 15 минут: открыть сайт на своём телефоне, сравнить объём текста, прогнать через PageSpeed, заглянуть в Вебмастер.
• Плохая мобильная версия бьёт дважды: роняет позиции и режет конверсию. Хорошая — быстро поднимает заявки.
• Чинить по порядку: сначала контент и адаптив, потом скорость, шрифты и тыкабельность.

Что делать дальше

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

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