В прошлом посте я рассказал, как на одном проекте разработчики решили сэкономить время и отдавали разный HTML-код для мобилки и десктопа по User-Agent. Выглядело это быстро и удобно, пока мы не вспомнили про поисковую оптимизацию.

Давайте снимем маску фронтендера и посмотрим, как на такой подход смотрят поисковые роботы.

Призрак клоакинга Поисковые краулеры (например, Googlebot или роботы Яндекса) постоянно сканируют ваш сайт. Если они обнаружат, что обычный пользователь на десктопе видит одну структуру и контент, а мобильный робот — другую, алгоритмы могут заподозрить клоакинг.

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

Эра Mobile-First Indexing Google и Яндекс уже давно перешли на Mobile-First индексацию. Они оценивают и ранжируют сайт прежде всего по его мобильной версии. • Если сервер не распознает робота как мобильного и отдаст ему десктопный HTML — данные в индексе разойдутся. • Если вы жестко порезали контент или скрыли часть текстов в мобильном HTML, чтобы страница весила меньше — этот скрытый контент просто перестанет ранжироваться. Причем даже для пользователей десктопов.

Как жить и что делать?

1. CSS Media Queries (Наш бро). Да, в DOM-дереве будет чуть больше узлов. Да, display: none сам по себе не отменяет загрузку тяжелых картинок (если не использовать loading="lazy"). Но для SEO это единственный безопасный и простой путь. Поисковик видит весь код, понимает, что скрытые элементы — это обычная адаптивная верстка, и корректно индексирует страницу.

2. Адаптив на уровне компонентов. Современный CSS умеет творить чудеса без изменения HTML-структуры. Flexbox, Grid и особенно Container Queries решают проблему «хитрых карточек» на ура.

3. Заголовок Vary: User-Agent. Если пути назад нет, и вам кровь из носу необходим Dynamic Serving (разный HTML по UA), обязательно настраивайте HTTP-заголовок Vary: User-Agent на сервере. Он сигнализирует поисковикам и системам кэширования, что мобильная и десктопная версии различаются, и их нужно обрабатывать раздельно.

Вывод: Оптимизация производительности и скорость разработки — это круто, но они не должны убивать находимость сайта в сети. В 95% случаев старый добрый адаптив через CSS, написанный прямыми руками, выигрывает у «хитрого» разделения на бэкенде.

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