Как настроить адаптивное мобильное меню?

Как правильно с технической стороны настроить адаптивное мобильное меню? Что делать, еcли их два в коде сайта (бывает, что нельзя реализовать одно меню и приходится делать два):
— какие заголовки http использовать (читал, что желательно использовать vary);
— как дать понять Google ботам, что одно меню для мобайла, второе для декстопа (при условии, что их два).

Ответ

Классический вариант адаптивного меню предполагает использование CSS медиа-запроса для определенной ширины экрана и нескольких скриптов с использованием jQuery.

Когда из-за технических особенностей шаблона невозможно реализовать одно адаптивное меню, их делают два и чаще всего просто скрывают одно меню под медиа-запрос display: none при определенной ширине экрана.

Само по себе дублирование меню в коде не несет значительных негативных последствий для продвижения, если оно изначально не переспамленное.

HTTP-заголовок vary используется в том случае, если мобильные устройства получают абсолютно другой код HTML и CSS. С учетом всех подводных камней (в основном связанных с корректным определением агента пользователя), такой подход только ради мобильного меню нецелесообразен.

Как правило, сайт сканируют Google боты различных типов и проблем с пониманием дублей меню у них не возникает. Учитывая тенденцию Google ранжировать только мобильную версию, вам стоит обращать внимание на реализацию под мобильные устройства.

Подписаться на рассылку

Еще по теме:

Проблемы категории «Удобство для мобильных» — почему они приходят и как влияют на ранжирование?

Часто приходят оповещения от GSC — Проблемы категории "Удобство для мобильных". Чаще всего фигурируют ошибки шрифта, смешения интерактивных элементов и контент шире экрана. Но, если...

Изменятся ли позиции, если удалить изображения и скрыть текст для мобильной версии?

Для мобильной версии сайта прячем под кнопки "Читать далее" большие портянки текста, чтобы разгрузить страницу. Также для мобилок выводятся не все изображения страницы и формы...

Что делать, если в отчёте GSC мало страниц оптимизированных под мобильные устройства?

Стоит ли паниковать, если в отчёте GSC крайне малое количество страниц, оптимизированных под мобильные устройства. Но все страницы на сайте оптимизированы под мобайлы. Ответ В...

Можно ли скрыть от индексации дублирующийся контент мобильной версии?

Как надежно и безопасно можно закрыть от индексации часть контента от Яндекса и Гугла? Дело в том, что на сайте переработали CMS и в результате,...

Что делать с ошибками по удобству мобильной версии в GSC?

Консоль выдает ошибки по удобству моб версии (около 100 урлов): контент шире экрана, слишком мелкий шрифт, интерактивные элементы расположены слишком близко. Но визуально не могу...

Сергей З.

SEO-аналитик

Работу в сфере IT начинал с должности контент-менеджера. Уже при создании своих личных проектов постепенно узнавал, что такое SEO, увлекло. Вдохновляюсь сложными и интересными задачами.

Мои увлечения: велоспорт и книги.

Девиз: «Другой жизни не будет!»

s.zaec@siteclinic.ru

Оцените мою статью: