Что это
<meta name="viewport"> — HTML-тег, который передаёт браузеру инструкции по масштабированию и отображению страницы на экране устройства. Находится внутри <head> документа. Без этого тега мобильный браузер рендерит страницу как десктопную — уменьшает её до размера экрана, делая текст нечитаемым без зума.
---
Почему это важно для SEO
Google с 2019 года использует Mobile-First Indexing по умолчанию: поисковый робот сначала сканирует мобильную версию страницы, и именно она определяет ранжирование. Если viewport не настроен — страница получает низкие оценки по Core Web Vitals (особенно CLS и FID), а Google Search Console фиксирует ошибки в разделе «Удобство для мобильных». По данным Google, сайты с критическими проблемами мобильной адаптации теряют в среднем 20–30% позиций по запросам с мобильных устройств.
Яндекс учитывает поведенческие факторы: если пользователь с телефона открывает сайт без viewport и тут же закрывает его — это фиксируется как отказ. ИКС (Индекс Качества Сайта) напрямую зависит от поведения аудитории. Кроме того, Яндекс.Нейро и AI Overviews от Google при генерации ответов предпочитают источники с корректной мобильной разметкой — страницы без viewport реже попадают в эти блоки.
---
Как проверить вручную
- Исходный код страницы. Откройте любую страницу сайта, нажмите
Ctrl+U(илиCmd+Uна Mac), найдите в<head>строку вида:
``html <meta name="viewport" content="width=device-width, initial-scale=1"> `` Если строки нет — тег отсутствует.
- Google Search Console. Перейдите в раздел «Удобство для мобильных» → «Проблемы». Ошибка «Окно просмотра не настроено» прямо указывает на отсутствие или некорректный viewport.
- Яндекс.Вебмастер. Раздел «Технический аудит» → «Мобильная версия». Яндекс отдельно помечает страницы с проблемами масштабирования.
- Screaming Frog. Запустите краулинг, перейдите в
Custom Search→Search→ задайте поиск по текстуviewportв источнике страниц. Так быстро найдёте URL, где тег отсутствует на больших сайтах.
- PageSpeed Insights. Введите URL, в разделе «Диагностика» будет предупреждение «Has a viewport meta tag with width or initial-scale», если тег настроен некорректно.
---
Как исправить
Стандартный тег для подавляющего большинства сайтов:
<meta name="viewport" content="width=device-width, initial-scale=1">Добавляется один раз в <head> каждой страницы сайта.
WordPress. Обычно уже добавлен темой. Если нет — в файл header.php активной темы перед </head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Или через functions.php:
add_action('wp_head', function() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
});Tilda. Настройки сайта → SEO → поле «Код для вставки в HEAD». Вставьте тег туда. Tilda добавляет его автоматически на большинстве шаблонов, но при кастомном HTML-блоке стоит проверить.
1C-Bitrix. Шаблон сайта → файл header.php раздела /bitrix/templates/ВАШ_ШАБЛОН/. Найдите <head> и добавьте тег следующей строкой.
Webflow. Project Settings → Custom Code → Head Code. Вставьте тег — Webflow добавляет его автоматически для адаптивных проектов, но при экспорте кода проверьте вручную.
---
Типичные ошибки
- `user-scalable=no` и `maximum-scale=1`. Запрет масштабирования ломает доступность для людей с нарушениями зрения. Google с 2023 года учитывает это в оценке удобства страниц.
``html <!-- Плохо --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> ``
- Фиксированная ширина вместо `device-width`. Конструкция
content="width=1024"заставит мобильный браузер показывать десктопную версию.
- Дублирование тега. Два тега
<meta name="viewport">на одной странице приводят к непредсказуемому поведению браузера. Screaming Frog найдёт такие дубли за несколько минут.
- Тег есть, но CSS не адаптивный. Viewport — это условие, не решение. Без медиазапросов в CSS страница всё равно будет отображаться некорректно.
- Отсутствие тега на отдельных страницах. Шаблонные CMS иногда «забывают» viewport на страницах с кастомной разметкой — страницах акций, лендингах внутри сайта, AMP-страницах.
---
Влияние на разные типы сайтов
Интернет-магазины особенно уязвимы: более 60% покупок в российском e-commerce совершается с мобильных устройств. Страницы товаров, корзина и оформление заказа без viewport — прямые потери конверсии и позиций. В Яндекс.Маркете и Google Shopping карточки товаров с низкими показателями мобильной адаптации получают меньше трафика из-за снижения ставок в аукционе.
Контентные сайты и блоги теряют время на сайте и глубину просмотра — пользователь не будет читать текст, если его нужно двигать пальцем по горизонтали. Для SaaS и лендингов отсутствие viewport критично с точки зрения конверсии: формы, кнопки CTA и попапы без адаптивности делают воронку нерабочей на мобильных устройствах, что напрямую бьёт по поведенческим факторам ранжирования.