Viewport

Как работает

Стандартная строчка, которая должна быть на каждой мобильной странице:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width — ширина viewport равна физической ширине экрана устройства. initial-scale=1 — стартовый масштаб равен 1:1 без искусственного зума.

Без этой строчки браузер по умолчанию отдаёт страницу в 980-пиксельном контейнере (наследие desktop-времён), потом сжимает результат под экран телефона. Итог — мелкий шрифт, кривые тапы по кнопкам, элементы прыгают при повороте экрана. Google в Search Console немедленно помечает такую страницу как «не оптимизирована для мобильных».

Расширенные параметры используются реже:

• maximum-scale=1 и user-scalable=no — запрет пользовательского зума. Плохая практика: нарушает accessibility, Google понижает такие страницы в мобильной выдаче.
• viewport-fit=cover — заполнение экрана до краёв на iPhone с notch. Нужно для полноэкранных PWA.
• interactive-widget=resizes-content — новинка 2023 года, управляет поведением при появлении экранной клавиатуры.

Почему важно для SEO

Viewport — базовый признак mobile-first вёрстки. Без него страница получает пометку «не оптимизирована для мобильных» в Google Search Console, и алгоритм понижает её в мобильной выдаче — прямо, без косвенных сигналов.

Google Search Central в документации Mobile-friendly test отдельно проверяет наличие viewport-меты первым делом. Отсутствие — критическая ошибка, которую тест-инструмент подсвечивает крупным красным блоком.

Яндекс.Вебмастер в разделе «Инструменты → Проверка мобильных страниц» аналогично сигнализирует, если viewport-мета не задана. С учётом того, что Яндекс тоже приоритизирует мобильную индексацию, эффект на позиции виден в первые же недели после появления пометки.

Частые ошибки

• Viewport-мета отсутствует вообще — страница получает 980-px контейнер и сжимается до экрана.
• Задано initial-scale=0.5 или другое дробное значение — стартовый масштаб не 1:1, всё выглядит уменьшенным.
• Установлен user-scalable=no — нарушает accessibility, пользователь не может увеличить мелкий шрифт.
• Прописано width=1024 вместо width=device-width — фиксированная ширина ломает адаптивность.
• Две viewport-меты в <head> — часть браузеров берёт первую, часть последнюю.
• Viewport ставится через JavaScript после загрузки — Googlebot и Яндекс могут не увидеть.

Как проверить

В Chrome DevTools вкладка Elements → поиск по name="viewport" покажет тег. Быстрая проверка визуально — DevTools → Toggle device toolbar → выбрать iPhone или Pixel, посмотреть как страница отрендерится. Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) даёт полную оценку мобильной адаптации, viewport проверяется первым. Яндекс.Вебмастер — «Инструменты → Проверка мобильных страниц».

SEO Crawler при обходе фиксирует наличие viewport-меты, её содержимое и потенциальные проблемы (запрет зума, дробный initial-scale, фиксированная width). В отчёте это часть блока «Mobile-first» — с указанием страниц без правильного viewport и приоритизацией по трафику.

Вывод

Viewport-мета — не рекомендация, а обязательный элемент для любой мобильной страницы. Стандартная строчка width=device-width, initial-scale=1 покрывает 99% случаев — без экспериментов с зумом и фиксированной шириной. Проверяйте её наличие через Mobile-Friendly Test после каждого обновления шаблона: одна забытая строчка в <head> стоит падения мобильных позиций.