Настроить viewport meta-тег

Важно 09.04.2026

Зачем настраивать viewport meta-тег

Viewport meta-тег сообщает мобильному браузеру, как масштабировать страницу под экран устройства. Без этого тега смартфон отобразит сайт так, будто экран шириной 980px (значение по умолчанию в большинстве мобильных браузеров), и пользователь увидит крошечную десктопную версию, которую нужно масштабировать пальцами. Для поисковых систем это сигнал: сайт не адаптирован для мобильных.

Google считает корректный viewport meta-тег обязательным условием мобилопригодности. Lighthouse проверяет наличие тега в аудите SEO — если тега нет или он настроен неправильно, страница получает ошибку. При Mobile-First Indexing Google оценивает именно мобильную версию, и отсутствие viewport означает, что мобильная версия фактически сломана.

Яндекс также учитывает мобилопригодность как фактор ранжирования. В Яндекс Вебмастере можно проверить, считает ли Яндекс сайт мобилопригодным. Отсутствие viewport meta-тега — одна из причин, по которой страница может быть помечена как неадаптированная для мобильных.

По моему опыту, с viewport meta-тегом проблемы встречаются реже, чем с другими аспектами мобильной оптимизации — большинство современных CMS и тем добавляют его автоматически. Но ошибки в настройке тега, особенно запрет масштабирования, встречаются регулярно и могут стоить позиций.

Пошаговая инструкция

Шаг 1. Проверьте наличие viewport meta-тега

Откройте исходный код страницы (Ctrl+U в Chrome) и найдите в секции <head> строку с name="viewport". Правильный viewport meta-тег выглядит так:

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

Эта строка говорит браузеру: ширина области просмотра равна ширине устройства, начальный масштаб — 100%. Мобильный браузер отображает страницу в реальном масштабе, без уменьшения.

Если тега нет — его нужно добавить. Если он есть, но содержит другие параметры — проверьте их по шагам ниже.

Быстрая проверка через Chrome DevTools: откройте страницу, нажмите F12, перейдите во вкладку Elements и выполните поиск (Ctrl+F) по «viewport». Тег должен быть в <head>.

Шаг 2. Разберитесь в параметрах тега

Viewport meta-тег принимает несколько параметров в атрибуте content. Разберём каждый:

width=device-width — ширина области просмотра равна ширине экрана устройства. Это основной параметр, без которого адаптивная вёрстка не работает. На iPhone 14 ширина будет 390px, на Samsung Galaxy S23 — 360px, на iPad — 768px или 1024px в зависимости от ориентации.
initial-scale=1 — начальный масштаб страницы 100%. Страница отображается без увеличения или уменьшения. Без этого параметра некоторые браузеры могут произвольно масштабировать страницу.
maximum-scale — максимальный масштаб, до которого пользователь может увеличить страницу. Значение 1 запрещает увеличение. Не рекомендуется ограничивать.
minimum-scale — минимальный масштаб. Обычно не нужен — браузер сам управляет минимальным масштабом.
user-scalable — разрешено ли пользователю масштабировать страницу. Значение no запрещает зум. Категорически не рекомендуется.

Минимально необходимый набор — width=device-width, initial-scale=1. Всё остальное либо не нужно, либо вредно.

Шаг 3. Удалите запрет масштабирования (user-scalable=no)

Это самая распространённая ошибка в настройке viewport. Многие разработчики и темы CMS добавляют user-scalable=no или maximum-scale=1, чтобы «зафиксировать» масштаб страницы. На практике это создаёт серьёзные проблемы:

Нарушение доступности. Люди с ослабленным зрением не могут увеличить текст или изображение. Это прямое нарушение рекомендаций WCAG 2.1 (критерий 1.4.4 — Resize Text). Google учитывает доступность как фактор качества.
Ошибка в Lighthouse. Аудит «[user-scalable=»no»] is used in the viewport meta tag or the [maximum-scale] attribute is less than 5» — выдаётся как ошибка в категории Accessibility. Это снижает оценку доступности сайта.
Плохой пользовательский опыт. Даже на хорошо свёрстанном сайте иногда нужно увеличить мелкий текст на изображении, разглядеть деталь на фото или прочитать таблицу. Запрет зума отнимает у пользователя эту возможность.

Если в вашем viewport есть user-scalable=no или maximum-scale=1 — удалите эти параметры. Итоговый тег должен выглядеть так:

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

Если разработчик настаивает на запрете зума «чтобы вёрстка не ломалась» — проблема в вёрстке, а не в возможности масштабирования. Правильная адаптивная вёрстка работает корректно при любом масштабе.

Шаг 4. Добавьте тег в CMS

В зависимости от CMS viewport meta-тег добавляется по-разному:

WordPress. В большинстве тем viewport уже прописан в файле header.php. Проверьте: если тег отсутствует, добавьте его в <head> через файл header.php дочерней темы или через хук wp_head в functions.php:

add_action('wp_head', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}, 1);

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

Любая CMS или статический сайт. Найдите основной шаблон, содержащий <head>, и добавьте тег внутри. Тег должен быть на каждой странице сайта без исключений.

Шаг 5. Проверьте все страницы, а не только главную

Viewport meta-тег может присутствовать на главной странице, но отсутствовать на других шаблонах — если разные типы страниц используют разные заголовочные файлы. Проверьте:

Главную страницу
Страницы услуг
Статьи блога
Страницы категорий и архивов
Страницу контактов
404-ю страницу
Страницы, созданные плагинами (личный кабинет, корзина, оформление заказа)

Массовую проверку можно провести через Screaming Frog: просканируйте сайт и экспортируйте данные о meta-тегах viewport. Screaming Frog покажет, на каких страницах тег отсутствует или отличается от ожидаемого.

Шаг 6. Проверьте через инструменты

После добавления или исправления тега проверьте результат через несколько инструментов:

Google Lighthouse (Chrome DevTools). Запустите аудит в режиме Mobile. В категории SEO ищите «Viewport meta tag» — должен быть зелёный. В категории Accessibility — не должно быть ошибки про user-scalable=no.

Google PageSpeed Insights (pagespeed.web.dev). Введите URL и проверьте мобильную версию. Тест покажет, если viewport не настроен или содержит проблемные параметры.

Яндекс Вебмастер. Раздел «Диагностика» — «Проверка мобильных страниц». Яндекс покажет, считает ли он страницу мобилопригодной. Отсутствие viewport — одна из причин провала проверки.

Chrome DevTools вручную. Включите режим эмуляции мобильного устройства (Ctrl+Shift+M). Если viewport настроен правильно — страница отображается в реальном масштабе, текст читаемый, элементы не уменьшены. Если viewport отсутствует — вы увидите миниатюрную версию десктопного сайта.

Шаг 7. Убедитесь, что CSS media queries работают корректно

Viewport meta-тег и CSS media queries работают в связке. Media queries типа @media (max-width: 768px) срабатывают на основе значения viewport, а не физической ширины экрана. Без viewport meta-тега браузер считает ширину равной 980px, и media queries для мобильных не срабатывают.

Проверьте:

Адаптивные стили применяются на мобильных устройствах
Брейкпоинты (breakpoints) в CSS соответствуют реальным размерам устройств: 320px, 375px, 414px, 768px, 1024px
При изменении ориентации устройства (портрет/альбом) стили корректно переключаются

Если после добавления viewport meta-тега вёрстка на мобильных «поехала» — это означает, что раньше сайт просто показывался как уменьшенная десктопная версия, а теперь браузер пытается применить реальный масштаб. Нужно дорабатывать CSS для мобильных разрешений.

Типичные ошибки

user-scalable=no или maximum-scale=1. Самая частая ошибка. Запрет масштабирования ломает доступность, вызывает ошибки в Lighthouse и создаёт плохой опыт для пользователей с ослабленным зрением. Удалите эти параметры. Если maximum-scale нужен — ставьте значение не менее 5: maximum-scale=5.
Фиксированная ширина вместо device-width. Конструкция width=1024 вместо width=device-width жёстко задаёт ширину viewport в 1024px на любом устройстве. На смартфоне с шириной 375px это приведёт к уменьшению масштаба — страница будет мелкой и нечитаемой. Всегда используйте device-width.
Два viewport meta-тега на одной странице. Иногда тема добавляет один тег, а плагин — другой. Браузер может использовать любой из них, и результат непредсказуем. Проверьте исходный код: viewport meta-тег должен быть ровно один.
Viewport в body вместо head. Meta-тег viewport должен находиться в секции <head>. Если он оказался в <body> — браузеры могут его проигнорировать. Проверьте расположение в HTML-структуре.
Пропуск initial-scale=1. Тег <meta name="viewport" content="width=device-width"> без initial-scale=1 может работать в большинстве браузеров, но некоторые старые версии могут неправильно определить начальный масштаб. Добавляйте оба параметра для максимальной совместимости.
Забытые отдельные шаблоны. Viewport есть на главной и в статьях, но отсутствует на 404-й странице, странице поиска или страницах, генерируемых плагинами. Каждая страница сайта должна содержать viewport meta-тег.
Надежда на плагин, который «сам добавит». Плагины мобильной оптимизации могут добавлять viewport, но если тема уже добавляет свой — получите конфликт. Проверяйте результат в исходном коде, а не доверяйте описанию плагина.

Что проверить в итоге

На каждой странице сайта в секции head присутствует ровно один viewport meta-тег
Тег содержит width=device-width, initial-scale=1 — без дополнительных ограничивающих параметров
Нет параметров user-scalable=no и maximum-scale=1 — масштабирование разрешено
Lighthouse (Mobile) в категории SEO не показывает ошибку «Viewport meta tag»
Lighthouse (Mobile) в категории Accessibility не показывает ошибку про user-scalable
В Яндекс Вебмастере страницы не помечены как неадаптированные для мобильных
На мобильном устройстве страница отображается в реальном масштабе — текст читается без масштабирования
CSS media queries для мобильных разрешений срабатывают корректно
Проверены все типы страниц: главная, услуги, статьи, категории, 404, страницы плагинов
Пользователь может увеличить масштаб страницы пальцами на мобильном устройстве

Отметить как выполнено

Нужна помощь с внедрением?

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

Обсудить проект

Александр Тригуб — частный SEO-специалист

MAX

+7 (999) 862-36-90

Кто ведёт проект

Александр Тригуб — частный SEO-специалист. В поисковом маркетинге с 2010 года, предприниматель с 2001-го. В SEO пришёл из собственного бизнеса — знаю, как устроены продажи не из учебников, а из собственной выручки и расходов.

Специализация: медицина, B2B, e-commerce и локальные услуги — ниши, где каждый лид стоит дорого.
Подтверждённый опыт: 500+ видео-аудитов в разных тематиках, 1092 заказа (рейтинг 4.9 / 5). Отзывы · Видео-аудиты.
Профили с отзывами: 728 отзывов на Kwork (4.9★) · Profi.ru (5.0★) · ORCID 0009-0009-0106-6136.
Формат: работаю напрямую, один специалист на проект — без менеджеров и субподрядных цепочек.
Отчётность: KPI по лидам и деньгам. Ежемесячный план/факт, а не PDF на 50 страниц.

15+лет в маркетинге

500+видео-аудитов

1092заказов

4.9★728 отзывов

Подробнее об опыте → Отзывы клиентов 500+ видео-аудитов