Многие поисковые системы ранжируют страницы на основе того, насколько они удобны для мобильных устройств. Без метатега области просмотра мобильные устройства отображают страницы с типичной шириной экрана настольного компьютера, а затем уменьшают их, что затрудняет их чтение.
Установка метатега области просмотра позволяет вам контролировать ширину и масштабирование области просмотра, чтобы ее размер был правильным на всех устройствах.
Как происходит сбой аудита метатегов области просмотра Lighthouse
Lighthouse помечает страницы без метатега области просмотра:
Страница не проходит аудит, если не соблюдены все эти условия: - <head> документа содержит тег <meta name="viewport"> . – Метатег области просмотра содержит атрибут content . — Значение атрибута content включает width= .
Как добавить метатег области просмотра
Добавьте тег <meta> области просмотра с соответствующими парами ключ-значение в <head> вашей страницы:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Вот что делает каждая пара ключ-значение: - width=device-width устанавливает ширину области просмотра равной ширине устройства. - initial-scale=1 задает начальный уровень масштабирования, когда пользователь посещает страницу.