Проверка viewport онлайн

Результаты проверки

Это проверка только viewport. Чтобы проверить страницу по всем параметрам — воспользуйтесь полной проверкой страницы.

Вы также можете проверить весь сайт. Дубли title и description, orphan-страницы, битые ссылки между разделами и другие системные проблемы можно найти только при проверке всего сайта.

Если у вас нет SEO-специалиста — мы поможем исправить найденные ошибки.

Полная проверка страницы Проверить весь сайт Исправить ошибки

Что такое viewport и зачем он нужен

Мета-тег <meta name="viewport"> управляет тем, как страница отображается на мобильных устройствах. Без него браузер на смартфоне покажет десктопную версию сайта в уменьшенном виде, и пользователю придётся масштабировать и прокручивать страницу вручную.

Что проверяет этот инструмент

Наличие тега viewport — есть ли он на странице
Значение width — установлено ли width=device-width
Значение initial-scale — задан ли начальный масштаб
Корректность параметров — нет ли конфликтующих или устаревших значений

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

С 2019 года Google использует mobile-first индексацию — поисковый робот в первую очередь оценивает мобильную версию сайта. Яндекс также учитывает адаптивность при ранжировании. Без правильно настроенного viewport сайт не пройдёт проверку на мобилопригодность и потеряет позиции в мобильной выдаче.

Влияет на оценку мобилопригодности в Google и Яндекс
Определяет корректное отображение на всех размерах экранов
Необходим для работы адаптивной вёрстки и медиазапросов
Влияет на поведенческие факторы — удобство использования на мобильных

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

Viewport отсутствует — сайт отображается как десктопная версия на телефоне
Фиксированная ширина вместо device-width — страница не адаптируется
Запрет масштабирования (user-scalable=no) — снижает доступность
Несколько тегов viewport — браузер может использовать любой из них
Значение maximum-scale=1 — мешает пользователям увеличивать текст

Частые вопросы

Какое значение viewport считается правильным? ▶

Рекомендуемое значение: <meta name="viewport" content="width=device-width, initial-scale=1">. Оно устанавливает ширину области просмотра равной ширине устройства и задаёт начальный масштаб 1:1.

Нужен ли viewport, если сайт не адаптивный? ▶

Если сайт не адаптивный, viewport с width=device-width может сделать его нечитаемым на мобильных. Однако лучшее решение — сделать сайт адаптивным. Без адаптивности и без viewport сайт будет терять позиции в мобильном поиске.

Влияет ли viewport на скорость загрузки? ▶