Viewport meta tag — это HTML-метатег, который задаёт правила отображения страницы на мобильных устройствах и помогает браузеру правильно масштабировать контент. Он сообщает, какой должна быть ширина области просмотра и как страница должна подстраиваться под экран.
Как работает
Viewport meta tag размещают в разделе <head> страницы. Чаще всего в нём указывают параметры вроде width=device-width и initial-scale=1, чтобы браузер использовал ширину устройства как ширину вьюпорта и не показывал страницу уменьшенной версией десктопного макета. Без этого тега мобильный браузер может рендерить сайт так, как будто экран намного шире, а затем сжимать его целиком, из-за чего текст становится мелким, а элементы — неудобными для нажатия. Правильно настроенный viewport помогает адаптивной вёрстке работать предсказуемо: блоки перестраиваются под экран, шрифты читаются лучше, а пользователь не вынужден постоянно масштабировать страницу вручную.
Почему важно для SEO
Для SEO viewport meta tag важен, потому что влияет на мобильную пригодность страницы, а мобильная версия учитывается поисковыми системами в ранжировании. Если сайт неудобен на смартфоне, это ухудшает поведенческие сигналы, повышает отказ и может снизить видимость в поиске.
Частые ошибки
- Не добавляют тег вообще, из-за чего мобильная версия отображается некорректно.
- Указывают слишком сложные или конфликтующие параметры, которые ломают адаптивность.
- Ставят фиксированную ширину вместо device-width, из-за чего сайт плохо подстраивается под разные экраны.
Вывод
Viewport meta tag — базовый элемент мобильной вёрстки, без которого адаптивный сайт может выглядеть и работать хуже. Для SEO это один из обязательных технических настроек, если вы хотите удобную и корректную мобильную версию.
