Мобильная версия сайта и SEO
Откройте статистику любого сайта. С телефонов заходит больше половины людей, а часто и три четверти. Поисковики это давно поняли. И Яндекс, и Google теперь судят о сайте по его мобильной версии. Так работает принцип mobile-first. Проще говоря: неудобно на телефоне — в топ не пустят. Даже если на компьютере всё идеально.
Адаптивность против отдельного мобильного сайта
Есть два подхода. Первый, устаревший, — делать отдельную мобильную версию на поддомене вроде m.site.ru. Второй, современный, — адаптивность: один сайт сам подстраивается под ширину экрана. Адаптивность почти всегда лучше. Один адрес, один контент, никаких проблем со склейкой версий и дублями. Если делаете сайт сегодня — делайте адаптивным.
Как проверить свой сайт
Самый честный тест — взять телефон и открыть сайт. Пройдите по нему как обычный посетитель. Всё читается без увеличения? Кнопки нажимаются пальцем, не промахиваясь? Ничего не уезжает за край экрана? Если хоть на одном «нет» споткнулись — есть что чинить.
Что ломается чаще всего
Типичные мобильные беды наперечёт. Нет тега viewport — и сайт показывается «как на компьютере», только крошечным. Текст мельче 14 пикселей — приходится увеличивать пальцами. Кнопки и ссылки впритык — попадаешь не туда. Что-то вылезает за край, и появляется горизонтальная прокрутка. Тяжёлые картинки, которые на мобильном интернете грузятся вечность. Почти всё это лечится правкой вёрстки.
Скорость на мобильном — отдельная история
Телефон слабее компьютера, а мобильный интернет — медленнее. Поэтому страница, которая на ПК открывается мгновенно, на телефоне может тормозить. Облегчайте: сжимайте картинки, убирайте лишние скрипты. Для мобильных это вдвойне важно.
Тег viewport: строчка, без которой всё рушится
Если на телефоне сайт показывается крошечной копией десктопа, виновата чаще всего одна забытая строчка — мета-тег viewport. Он говорит браузеру: «подстрой ширину под экран устройства». Без него телефон рисует страницу так, будто экран шириной с монитор, и всё ужимается. Лечится одной строкой в <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Сам по себе viewport сайт адаптивным не делает, но без него адаптив не заработает. Проверьте, что строка есть, — это первое, на что смотрят при мобильных проблемах.
Размеры под палец, а не под курсор
Мышь попадает в пиксель, палец — нет. Поэтому на мобильном свои требования к размерам. Кнопки и ссылки делайте крупными, с запасом для нажатия (ориентир — около 48 пикселей в высоту) и с отступами друг от друга, чтобы не попадать в соседнюю по ошибке. Основной текст — не мельче 16 пикселей, иначе его придётся увеличивать пальцами. Поля форм — крупные, с правильным типом клавиатуры (для телефона цифровая, для почты — с «собакой»). Мелочь, а удобство сыпется именно на ней.
Осторожнее со всплывающими окнами
На десктопе всплывашка раздражает, на мобильном — может стоить позиций. Поисковики не любят навязчивые окна, которые на входе перекрывают весь экран и мешают добраться до контента: за такие «интерстициалы» сайт теряет в ранжировании на мобильных. Это не значит, что поп-апы под запретом — баннер о cookie или согласие на обработку данных допустимы. Под удар попадают именно агрессивные окна на весь экран сразу после захода. Используете поп-апы — делайте их небольшими и с заметным крестиком.
Как поисковики индексируют мобильную версию
Момент, который многие упускают: при mobile-first индексации Яндекс и Google смотрят в первую очередь на мобильную версию — именно по ней оценивают контент и принимают решение о позициях. Отсюда правило: на мобильной версии должно быть всё то же, что и на десктопной. Если ради «чистоты» мобильного экрана вы прячете часть текста или урезаете блоки, поисковик увидит именно урезанную версию — и позиции просядут. Подробно — в статье про mobile-first индексацию.
Коротко: больше половины людей — на телефонах, и поисковики судят по мобильной версии. Сделайте сайт адаптивным, проверьте его на реальном телефоне, почините мелкий текст, тесные кнопки и тяжёлые картинки. Это не косметика, а прямой фактор позиций. Как мобильность вписана в общую проверку — в статье про технический аудит сайта.