бесплатный инструмент

Чекер viewport и мобильных мета

Mobile-first индексация делает viewport обязательным, а блокировка зума — провал по доступности. Вставьте URL — прочитаем viewport, theme-color и mobile-web-app мета.

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

Мета-тег viewport указывает мобильным браузерам, как масштабировать страницу: строка <meta name="viewport" content="width=device-width, initial-scale=1"> — стандарт адаптивной вёрстки. Инструмент проверяет у заданного URL тег viewport, theme-color и блокировку зума, потому что Google сначала индексирует мобильную версию сайта: без корректного viewport страница на телефоне рендерится в десктопную ширину, что бьёт и по позициям, и по читабельности.

Что учитывается

Мета-тег viewport: Тег <meta name="viewport"> в <head>, задающий соответствие страницы экрану; без него мобильный браузер берёт десктопный холст ~980px и уменьшает всё содержимое.
width=device-width: Значение, привязывающее ширину макета к реальной ширине экрана устройства — основа адаптивной вёрстки и корректного mobile-first рендеринга.
initial-scale=1: Задаёт начальный зум 1:1, чтобы страница открывалась в натуральную величину, а не приближённой или отдалённой.
Блокировка зума (a11y): user-scalable=no или низкий maximum-scale отключают пинч-зум — нарушение доступности по WCAG 1.4.4, которое отмечают Lighthouse и Google.
Мета theme-color: Задаёт цвет панели и адресной строки мобильного браузера — небольшой, но реальный сигнал брендинга и удобства на мобильных.
Mobile-first индексация: Google преимущественно сканирует и ранжирует мобильный рендеринг страницы, поэтому сломанный viewport напрямую ухудшает именно ту версию, что попадает в индекс.

Как пользоваться

Вставьте URL страницы и запустите проверку — инструмент загрузит живой HTML и считает из <head> теги viewport, theme-color и атрибуты зума.
Разберите найденные проблемы: отсутствующий тег viewport, неадаптивные значения ширины или блокировку зума, нарушающую доступность.
Исправьте тег viewport в шаблоне (укажите width=device-width, initial-scale=1 и уберите user-scalable=no) и перезапустите проверку для подтверждения.

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

Что такое мета-тег viewport и нужен ли он?

Мета-тег viewport указывает мобильным браузерам рендерить страницу по реальной ширине устройства, а не по десктопному холсту ~980px. Он нужен любому адаптивному сайту: без строки <meta name="viewport" content="width=device-width, initial-scale=1"> телефон показывает уменьшенный, плохо читаемый макет.

Вредит ли SEO отсутствие тега viewport?

Да. Google использует mobile-first индексацию и ранжирует мобильный рендеринг страницы; без корректного viewport эта версия выглядит сломанной и непригодной для использования, что снижает позиции и оценку мобильного удобства.

Плохо ли отключать зум через user-scalable=no?

Да — блокировка пинч-зума нарушает доступность по WCAG 1.4.4 и отмечается в Lighthouse. Пользователи, которым нужно увеличить текст, не смогут этого сделать, поэтому оставляйте зум включённым и не ставьте maximum-scale ниже 5.

Зачем нужен мета-тег theme-color?

theme-color задаёт цвет панели и адресной строки в поддерживающих мобильных браузерах, позволяя оформлению совпадать с брендом. На ранжирование он напрямую не влияет, но это простой способ улучшить мобильный UX.

Что почитать дальше

Почему ИИ не видит ваш React/Next-сайт — и как починить

поделиться результатом Полезный результат? Отправьте коллеге: Telegram WhatsApp X

это лишь один инструмент

Этот аудит — 1 из 85 операций seo·matrix

Бесплатные тулзы показывают, ЧТО чинить. Полный аудит и автономная команда из 20 ИИ-агентов чинят это под ключ — стратегия, тексты, GEO, перелинковка, публикация и поддержка на «дне втором».

Заказать полный аудит → Отслеживать еженедельно — вход бесплатный →

Все бесплатные тулзы →