Сайт не оптимизирован для мобильных устройств: что делать

Пометка «сайт не оптимизирован для мобильных устройств» ставится, когда страницу на телефоне нельзя нормально читать. Чаще всего причина одна: страница шире экрана. Появляется горизонтальная прокрутка, человек двигает сайт вбок, а блоки съезжают друг относительно друга. Так вёрстка и «плывёт».

Ширина страницы равна самому широкому элементу. Достаточно одного блока, который отобразился со сбоем и вылез за край, — и тянется уже весь документ. Колонки, которые на компьютере стояли ровно, на телефоне уезжают за экран. Сбой бывает не на всех страницах: широкая таблица в одной статье, карта, слайдер или баннер в одном шаблоне. На соседних адресах без этого блока всё может выглядеть нормально.

Какие элементы ломают ширину

• 01Картинка, видео или встроенный ролик с шириной в пикселях и без ограничения по экрану.
• 02Таблица, которая не умещается в экран и тянет за собой страницу.
• 03Строка кнопок, меню или логотипов, которая не переносится на новую строку.
• 04Слайдер, карта, виджет чата или рекламный блок с минимальной шириной больше экрана телефона.
• 05Длинный адрес, артикул или слово без переноса: строка не ломается и раздвигает колонку.
• 06Блок со сдвигом в сторону или с отрицательным отступом. На компьютере он прячется у края, на телефоне торчит и включает прокрутку.

Отдельно проверьте метатег viewport. Если в коде страницы нет width=device-width, телефон рисует сайт как узкое окно компьютера. Текст мелкий, а вёрстка тоже кажется «не мобильной», даже когда отдельные блоки не вылезают.

Как проверить

1. Откройте страницу на телефоне или в режиме устройства в браузере, ширина около 360–390 пикселей. Не сужайте окно «примерно»: ошибка часто видна только на настоящей телефонной ширине.
2. Проведите вбок. Если страница едет, оптимизация уже сломана, даже если текст в целом читается.
3. Найдите блок, который шире окна. Это и есть элемент со сбоем. В инструментах разработчика у него ширина больше, чем у экрана, а у соседей из-за него появляется общая прокрутка.
4. Проверьте шаблон, а не одну страницу. Тот же выступ повторится везде, где стоит этот блок: шапка, подвал, галерея, форма.
5. Откройте исходный код и убедитесь, что в head есть viewport с width=device-width и initial-scale=1.
6. В Вебмастере и в отчёте об удобстве страниц на мобильных посмотрите, какие адреса уже помечены. После правки шаблона на перепроверку отправляют эти адреса, а не весь сайт наугад.

Что сделать

1. Картинкам, видео и встроенным кадрам задайте максимальную ширину 100% и автоматическую высоту. Файл сжимается под экран и не раздвигает страницу.
2. Таблицу оберните так, чтобы вбок ехала только она. Вся страница при этом остаётся по ширине экрана.
3. Фиксированные ширины больше телефона замените на 100% или на ограничение «не шире экрана». Ряд кнопок и меню на узкой ширине переносите или складывайте.
4. Длинным строкам разрешите перенос. Адрес и артикул не должны растягивать колонку.
5. Слайдер, карту и виджет ограничьте шириной контейнера. Если блок сам задаёт себе минимальную ширину в 500–600 пикселей, на телефоне он и есть источник прокрутки.
6. Не закрывайте симптом скрытием прокрутки у всей страницы. Горизонтальный скролл пропадёт, а блок останется обрезанным, и вёрстка по-прежнему будет съезжать. Сначала уберите элемент, который шире экрана.
7. Поправьте общий шаблон и заново пройдите главную, раздел каталога и страницу, где сбой был виден. На каждой не должно быть движения вбок.

Когда вылезающий блок убран и на телефонной ширине страница стоит на месте, пометку снимают после переобхода. Робот должен заново открыть уже исправленные адреса.