Метатег viewport, это строка в коде страницы, которая говорит браузеру телефона, как показывать сайт на маленьком экране: в реальном размере или сжатым до нечитаемого. Без него мобильный посетитель видит крошечный текст и уходит, а поисковик отмечает сайт как неудобный для смартфонов и опускает его в выдаче.
Мы в lucky-seo продвигаем сайты бизнеса и на техническом аудите почти каждый месяц находим либо кривой, либо вовсе отсутствующий метатег viewport. Мелочь в одну строку тихо режет мобильный трафик, а с ним и заявки, потому что больше половины посетителей приходит с телефонов. В этой статье разберём, что это за тег, как он работает и как настроить его так, чтобы сайт нормально открывался на любом экране.
Что такое метатег viewport и зачем это нужно
Метатег viewport (viewport meta tag), это HTML-тег в секции head, который задаёт область видимости страницы на устройстве и её начальный масштаб. Проще говоря, он сообщает браузеру: подгоняй ширину страницы под ширину экрана и не пытайся впихнуть десктопную версию в телефон.
Без этого тега мобильный браузер по умолчанию считает, что экран широкий (обычно от 980 пикселей), и рисует сайт как на компьютере, а потом уменьшает целиком. Человек видит микроскопический текст, тычет пальцем, промахивается и закрывает вкладку. Для бизнеса это прямая потеря: посетитель дошёл до сайта, но не смог им пользоваться и не оставил заявку.
Для поиска метатег viewport, это часть сигнала мобилопригодности (mobile-friendly). Яндекс и Google оценивают, удобно ли открывать сайт с телефона, и неудобные страницы ранжируют ниже. Один правильный тег не выведет в топ, но его отсутствие точно тянет вниз мобильные позиции, где сегодня формируется основной спрос.
Как правильно использовать метатег viewport
Правильный метатег viewport в подавляющем большинстве случаев выглядит одинаково и ставится в секцию head каждой страницы сайта. Канонический вариант, который подходит для адаптивной вёрстки:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Здесь две ключевые директивы. Значение width=device-width говорит браузеру брать ширину области просмотра равной ширине экрана устройства, а initial-scale=1.0 задаёт стартовый масштаб один к одному, без автоматического приближения или отдаления. Этой пары хватает почти для любого современного сайта с адаптивным дизайном.
Мета тег viewport должен стоять на всех страницах, а не только на главной. Частый прокол: разработчик прописал тег в шаблоне главной, а карточки товаров и статьи собираются другим шаблоном, где строки нет. В итоге каталог на телефоне ломается, хотя главная выглядит идеально. Проверять нужно весь сайт, а не первую попавшуюся страницу.
Куда именно вставлять метатег viewport?
Метатег viewport вставляют внутрь секции head, ближе к её началу, до подключения стилей. Это обычный HTML-тег (meta tag), и логика та же, что у остальных метатегов: они собраны в шапке документа и не отображаются пользователю напрямую, а дают инструкции браузеру и поисковым роботам.
Порядок важен: браузер читает страницу сверху вниз, поэтому директиву о масштабе он должен получить как можно раньше, до того как начнёт рисовать содержимое. Если строка стоит в самом конце head или, что хуже, в body, часть браузеров успевает отрисовать страницу в десктопном виде и только потом перестраивает её, вызывая заметный скачок вёрстки.
Ошибка: значение метатега viewport не задано
Ошибка «значение метатега viewport не задано» означает, что аудитор или сервис проверки не нашёл на странице корректной строки с viewport. Формулировка встречается в отчётах Яндекс Вебмастера, PageSpeed Insights, Topvisor и других инструментов, и звучит она пугающе, хотя чинится обычно за пять минут.
Причин у ошибки несколько. Тег могли вовсе не прописать при вёрстке. Его могли поставить с пустым или битым атрибутом content, например content без значения. Наконец, тег есть в шаблоне, но конкретный тип страниц собирается отдельно и строку туда не подставили. По нашему опыту продвижения третий вариант самый коварный, потому что выборочная проверка главной ничего не покажет.
Самая обидная ошибка бизнеса, это чинить viewport на главной и считать задачу закрытой. Мы регулярно видим сайты, где главная адаптивная, а весь коммерческий трафик идёт на карточки товаров или посадочные страницы без тега. Человек кликает по рекламе, попадает на сломанную мобильную страницу и уходит, а владелец винит в этом трафик, а не вёрстку. Проверяйте все типы страниц, особенно те, что приносят заявки.
Атрибуты и значения метатега viewport
Атрибуты метатега viewport перечисляются в атрибуте content через запятую и управляют шириной, масштабом и поведением при изменении размера. На практике почти всегда используют две первые директивы из таблицы ниже, остальные нужны редко и в специфических случаях.
| Директива | Что задаёт | Типичное значение | Когда трогать |
|---|---|---|---|
| width | ширину области просмотра | device-width | всегда, ставим device-width |
| initial-scale | начальный масштаб | 1.0 | всегда, ставим 1.0 |
| minimum-scale | минимальный масштаб уменьшения | 0.5 или ниже | редко, обычно не задают |
| maximum-scale | максимальный масштаб приближения | 2.0 и выше | почти никогда, ломает доступность |
| user-scalable | разрешение масштабировать пальцами | yes | оставляем yes, no вредит доступности |
Особая осторожность нужна с maximum-scale и user-scalable=no. Запрет масштабирования кажется способом «зафиксировать красивую вёрстку», но на деле он мешает людям со слабым зрением приблизить текст. Яндекс и Google относятся к таким запретам плохо, а браузеры на iOS часть из них попросту игнорируют. Для бизнеса запрет зума, это добровольный отказ от части аудитории и лишний риск по доступности.
Как настроить масштаб страницы через метатег viewport
Настройка масштаба через метатег viewport сводится к тому, чтобы страница открывалась в реальном размере и без горизонтальной прокрутки. Ниже короткая инструкция, которую можно пройти сверху вниз без возврата назад, даже если вы не разработчик, а владелец, который проверяет подрядчика.
- Откройте свой сайт на телефоне и посмотрите, приходится ли раздвигать текст пальцами или скроллить вбок.
- Откройте исходный код страницы (в браузере на компьютере через контекстное меню, пункт «Просмотр кода страницы»).
- Найдите в коде поиском строку со словом viewport внутри секции head.
- Убедитесь, что там стоит content с width=device-width и initial-scale=1.0, а не пустое значение.
- Если строки нет или она битая, попросите разработчика добавить канонический тег в общий шаблон сайта.
- Проверьте не только главную, а карточки, статьи и посадочные страницы, они часто на другом шаблоне.
- Прогоните адрес через тест мобилопригодности и через отчёт Яндекс Вебмастера, чтобы убедиться, что ошибка ушла.
- Перепроверьте вёрстку глазами: текст читается без зума, кнопки не наезжают друг на друга, горизонтальной прокрутки нет.
Не гонитесь за экзотическими значениями масштаба. В девяти случаях из десяти работает базовая пара width=device-width и initial-scale=1.0, а проблемы «сайт вылезает за экран» лежат не в теге viewport, а в самой вёрстке: фиксированная ширина блоков, огромные картинки, таблицы без адаптива. Тег включает адаптив, но не чинит кривую разметку.
Почему сайт всё равно вылезает за экран, хотя тег стоит?
Метатег viewport только включает адаптивный режим, но не делает вёрстку адаптивной за вас. Если после правильного тега страница всё равно едет вбок, причина в самом CSS: где-то задана жёсткая ширина в пикселях, стоит широкая картинка без ограничения или таблица не умеет сжиматься.
Проверить виновника проще всего через инструменты разработчика в браузере, режим отображения мобильного устройства. Он покажет, какой именно блок выходит за границу экрана. Дальше это уже работа вёрстки, а не метатегов: сам по себе viewport, это выключатель адаптива, а не автоматический дизайнер.
Нужен ли метатег viewport, если у сайта есть отдельная мобильная версия?
Даже при отдельной мобильной версии метатег viewport нужен на страницах, которые открываются на телефонах, иначе браузер отрисует их в десктопном масштабе. Сегодня отдельные мобильные поддомены встречаются всё реже: и Яндекс, и Google рекомендуют адаптивную вёрстку с одним адресом и одним viewport на всех устройствах.
Адаптивный подход проще в поддержке и надёжнее для поиска, потому что нет разъезжающихся версий и путаницы с зеркалами. Если у вас ещё живёт отдельная мобильная версия, это повод при следующем обновлении сайта перейти на адаптив, а не плодить два кода.
Частые вопросы
Что такое метатег viewport простыми словами?
Метатег viewport, это строка в коде сайта, которая велит браузеру телефона показывать страницу в реальном размере под ширину экрана, а не сжимать десктопную версию. Без него текст выходит мелким, и с сайта неудобно пользоваться на смартфоне.
Как выглядит правильный метатег viewport?
Правильный метатег viewport выглядит так: content с параметрами width=device-width и initial-scale=1.0 внутри тега meta в секции head. Этой пары значений хватает для подавляющего большинства сайтов с адаптивной вёрсткой.
Влияет ли метатег viewport на SEO?
Метатег viewport влияет на SEO через мобилопригодность: без него сайт считается неудобным для телефонов и ранжируется ниже в мобильной выдаче. Сам тег не выводит в топ, но его отсутствие или поломка стабильно тянут мобильные позиции вниз.
Что значит ошибка «значение метатега viewport не задано»?
Ошибка означает, что проверяющий сервис не нашёл на странице корректной строки viewport: тега нет, у него пустой атрибут content или строку не подставили в шаблон конкретного типа страниц. Чинится добавлением канонического тега в общий шаблон сайта.
Можно ли запрещать пользователю масштабировать страницу?
Запрещать масштабирование через user-scalable=no или жёсткий maximum-scale не стоит, это мешает людям со слабым зрением приблизить текст и плохо оценивается поисковиками. Оставляйте зум доступным, а вёрстку делайте так, чтобы приближать ничего и не хотелось.
На каких страницах нужен метатег viewport?
Метатег viewport нужен на всех страницах сайта, которые открываются на мобильных: главной, карточках, статьях, посадочных страницах. Частая ошибка, прописать тег только в шаблоне главной, а коммерческие страницы оставить без него, из-за чего именно продающие разделы ломаются на телефоне.
Выводы
Метатег viewport, это одна строка, которая решает, увидит ли мобильный посетитель нормальный сайт или крошечную десктопную версию, из которой он тут же сбежит. Для бизнеса это не украшение кода, а условие, при котором мобильный трафик вообще способен превратиться в заявки. Базовая настройка проста: width=device-width и initial-scale=1.0 в секции head на каждой странице.
Главное, не проверять одну главную и не запрещать людям масштаб ради красивой картинки. Пройдитесь по всем типам страниц, убедитесь, что тег стоит и что вёрстка под ним действительно адаптивная. Если хотите глубже разобраться в том, как метатеги влияют на позиции и удобство, посмотрите наш разбор про метатег и связку технических факторов сайта. Метатег viewport, это тот случай, когда пять минут работы закрывают дыру, через которую годами утекали клиенты.
Опубликовано в 2026 году. Проверено на актуальность: подход работает на текущих алгоритмах Яндекса и Google.