Раздвижное меню само по себе не мешает индексации. Поисковики индексируют контент, скрытый через CSS, и переходят по ссылкам, которые находят в HTML или в DOM после рендеринга JavaScript. Проблема возникает тогда, когда ссылок нет в исходном ответе сервера, а скрипт, который их добавляет, недоступен роботу или отдаёт их слишком поздно.
Порядок проверки простой. Сначала смотрите исходный HTML без выполнения скриптов. Если ссылок меню там нет, запускаете проверку рендеринга в Яндекс Вебмастере и в Google Search Console и сравниваете полученный DOM с тем, что видит пользователь. Параллельно убеждаетесь, что файлы стилей и скриптов не закрыты в robots.txt, иначе рендеринг пройдёт без навигации. Эти шаги прямо описаны в документации Яндекса о рендеринге страниц и в руководстве Google по основам JavaScript SEO.
Как поисковые боты работают со скрытым контентом
Яндекс и Google обрабатывают страницу в два этапа. Первый этап это обход: робот запрашивает URL, получает HTML и извлекает ссылки, которые уже есть в разметке. Второй этап это рендеринг: страница открывается во встроенном браузере, выполняются скрипты, формируется итоговый DOM, и уже из него собираются дополнительные ссылки и текст. Яндекс описывает такую схему в разделе справки о рендеринге, Google повторяет её в документации по JavaScript SEO.
Скрытый контент при этом не понижается автоматически. И в раздвижных меню, и в табах, и в аккордеонах ссылки воспринимаются как обычные, если они физически присутствуют в коде страницы. Отдельная история только с текстом, который скрыт от пользователя насовсем и предназначен роботу: его поисковики могут игнорировать или трактовать как попытку манипуляции. Навигация под кнопкой бургер под это определение не попадает, потому что пользователь открывает её одним кликом.
Важный нюанс: рендеринг не гарантирован на каждом обходе. Робот может сначала проиндексировать голый HTML, а полную версию со скриптами получить позже. Если критичные для сайта ссылки существуют только в отрендеренной версии, часть переходов робот будет находить с задержкой. Для крупных каталогов это может заметно отложить обнаружение новых страниц.
CSS-скрытие против JS-скрытия
Раздвижные меню делают двумя способами. Первый: HTML со всеми ссылками рендерится сервером, а состояние открыто или закрыто переключается классами и свойствами display, visibility, transform, max-height. Второй: разметка меню собирается на клиенте через JavaScript, часто внутри компонента фреймворка, и до выполнения скрипта ссылок в DOM нет вообще.
Первый вариант безопасен для индексации. Робот получает ссылки сразу, никакого рендеринга для их обнаружения не требуется. Пользователь видит анимацию и переключение состояний, краулер видит обычный список. Второй вариант работает только при условии, что рендеринг пройдёт успешно: скрипты не заблокированы, выполняются без ошибок, не требуют авторизации, не ждут действий пользователя.
Отдельный случай это события типа onclick на элементах, которые не являются ссылками. Если в разметке стоит span или div с обработчиком, который меняет URL через history.pushState, краулер такую конструкцию ссылкой не считает. Google в руководстве по JavaScript SEO прямо требует использовать теги a с атрибутом href для всех переходов, которые должны участвовать в индексации.
Проверка первая: исходный HTML без рендеринга
Первый шаг это посмотреть, что отдаёт сервер до выполнения скриптов. В браузере откройте страницу, вызовите контекстное меню и выберите пункт просмотра исходного кода страницы. Это именно исходник, а не инспектор элементов. Инспектор показывает уже изменённый скриптами DOM, а для этой проверки он не подходит.
В открывшемся коде ищите по тексту пунктов меню или по характерным классам обёртки. Если ссылки есть и их атрибуты href заполнены реальными URL, робот получит навигацию при обходе. Доступность целевых страниц и их индексацию проверяйте отдельно. Если ссылок нет или вместо href стоит решётка, переходы строятся на клиенте и нужна вторая проверка.
Параллельно запросите страницу через curl или через любой HTTP-клиент без выполнения JavaScript. Команда curl с флагом вывода заголовков покажет, что получает робот в первом ответе. Сравнение с содержимым инспектора в браузере наглядно покажет, какая часть разметки приходит с сервера, а какая дорисовывается скриптами.
Проверка вторая: инструменты рендеринга в вебмастерах
В Яндекс Вебмастере откройте проект, перейдите в раздел «Индексирование» → «Рендеринг страниц JavaScript» и укажите адрес страницы. Инструмент покажет, как робот Яндекса видит страницу после рендеринга, и выведет содержимое отрендеренного HTML. Проверьте, присутствуют ли там ссылки меню и их атрибуты href. Параллельно в Вебмастере есть отчёт о страницах, которые были исключены из поиска, и там указывается причина, включая проблемы загрузки ресурсов.
В Google Search Console аналогичную задачу решает инструмент проверки URL. После ввода адреса сервис показывает статус индексирования, а по кнопке просмотра отсканированной страницы доступны три вкладки: HTML, скриншот и подробности о загруженных ресурсах. Во вкладке HTML выводится код после рендеринга роботом Google. Во вкладке со скриншотом видно, как страница отрисовалась. В подробностях о ресурсах перечислены файлы, которые робот не смог загрузить, с указанием причины: блокировка в robots.txt, сетевая ошибка, таймаут.
Если ссылки меню видны в отрендеренном HTML обоих инструментов, робот может их обнаружить. Саму индексацию страниц проверяйте отдельно. Если ссылки есть только у Google, но нет у Яндекса, или наоборот, проверяйте конкретный скрипт или ресурс, который один из роботов не загрузил, включая правила robots.txt.
Проверка третья: краулер Screaming Frog или аналог
Screaming Frog SEO Spider и подобные инструменты обходят сайт так же, как поисковый робот, и показывают, какие ссылки они нашли на каждой странице. По умолчанию краулер работает в режиме без выполнения JavaScript и видит только исходный HTML. В настройках есть отдельный режим рендеринга, где используется встроенный движок Chromium.
Запустите обход дважды: сначала без рендеринга, потом с ним. В отчёте по внутренним ссылкам сравните количество найденных URL и состав ссылок на страницах с раздвижным меню. Если без рендеринга список короче, значит часть навигации доступна только после выполнения скриптов. Это не катастрофа, но повод убедиться, что рендеринг на стороне поисковиков проходит успешно по второй проверке.
Отдельно смотрите отчёт по заблокированным ресурсам. Краулер отметит файлы, которые закрыты в robots.txt, и выделит те из них, которые относятся к стилям и скриптам. Если среди них есть файлы меню, снимайте блокировку: без них робот не сможет собрать навигацию при рендеринге.
Типичные ошибки реализации
Чаще всего встречается четыре сценария, из-за которых ссылки меню выпадают из индексации.
Первый: ссылки отсутствуют в HTML и появляются только после выполнения тяжёлого клиентского скрипта. Робот при первом обходе получает пустую навигацию, а повторный обход с рендерингом может произойти с задержкой. Для нового сайта это означает медленный выход страниц в выдачу.
Второй: переходы оформлены через обработчики кликов на обычных div или button, без тегов a с href. Для пользователя это работает, для краулера такие элементы не являются ссылками, и граф переходов обрывается.
Третий: в robots.txt закрыта папка с CSS или JavaScript, которая нужна для сборки меню. Робот загружает страницу, но при рендеринге не может подтянуть стили или скрипты, и в итоговом DOM навигации нет. В отчёте Search Console такие ресурсы попадают в список недоступных, в Яндекс Вебмастере проблема видна по пустому отрендеренному HTML.
Четвёртый: меню строится через фреймворк с рендерингом только на клиенте, а сервер отдаёт пустой каркас с одним div под приложение. Google в документации по JavaScript SEO отдельно описывает такой случай и рекомендует использовать серверный рендеринг, статическую генерацию или гибридные схемы, чтобы базовая навигация приходила роботу сразу в HTML.
Как реализовать раздвижное меню корректно
Базовое правило: ссылки меню должны присутствовать в HTML, который возвращает сервер, с заполненными атрибутами href. Состояние открыто или закрыто переключайте через CSS-классы и свойства типа max-height, transform, opacity. Такое меню корректно индексируется Яндексом и Google и не требует отдельных проверок рендеринга.
Если сайт работает на React, Vue, Angular или Svelte, включайте серверный рендеринг или предварительную генерацию страниц. Next.js, Nuxt, Astro, SvelteKit и аналогичные инструменты отдают HTML с готовой навигацией, а скрипт догружается для интерактивности. Робот получает ссылки сразу, пользователь получает плавные переходы.
Для кнопки открытия используйте тег button с атрибутом aria-expanded, а не div с обработчиком. Это даёт корректную семантику для скринридеров и не путает краулер. Сами пункты меню оформляйте как теги a с href, даже если переход в SPA перехватывается маршрутизатором: атрибут href остаётся основным сигналом для поискового робота.
Проверьте, что файлы стилей и скриптов, которые отвечают за меню, доступны роботу. В robots.txt не должно быть правил, закрывающих папки с ассетами. Google в руководстве по JavaScript SEO настаивает на этом как на обязательном условии корректного рендеринга.
Чек-лист для проверки перед публикацией
Пройдите по списку перед выкаткой нового шаблона или после аудита существующего.
- Открыть исходный код страницы через браузер, найти ссылки меню, убедиться в наличии реальных URL в атрибутах href.
- Запросить страницу через curl без выполнения скриптов, сравнить вывод с тем, что показывает инспектор элементов.
- Проверить URL в Яндекс Вебмастере через инструмент проверки URL, посмотреть отрендеренный HTML, найти ссылки меню.
- Проверить URL в Google Search Console через инструмент проверки URL, открыть просмотр отсканированной страницы, во вкладке HTML найти ссылки меню, во вкладке с ресурсами проверить отсутствие заблокированных файлов.
- Запустить обход через Screaming Frog или аналог в двух режимах, без рендеринга и с ним, сравнить списки найденных ссылок.
- Открыть robots.txt, убедиться, что папки с CSS и JavaScript не закрыты от роботов.
- Проверить, что кнопка открытия меню это тег button с aria-expanded, а пункты это теги a с href.
- Если сайт на фреймворке, подтвердить, что включён серверный рендеринг или статическая генерация для страниц с навигацией.
Время проверки зависит от числа шаблонов и сложности скриптов. Сначала проверьте один шаблон каждого типа, затем повторите проблемные сценарии на остальных страницах.
Источники с актуальными формулировками: справка Яндекса о рендеринге страниц роботом по адресу yandex.ru/support/webmaster, справка Яндекса об индексировании AJAX-страниц по адресу yandex.ru/support/webmaster и руководство Google по основам JavaScript SEO по адресу developers.google.com/search. Названия отчётов и кнопок в вебмастерах периодически меняются, актуальные формулировки смотрите в этих источниках перед публикацией аудита.
Частые вопросы
Влияет ли раздвижное меню на передачу ссылочного веса между страницами?
Само скрытие меню через CSS не является нарушением, если ссылки доступны роботу в HTML или в DOM после рендеринга и оформлены тегами a с реальными href. Проблема возникает тогда, когда переход сделан через обработчик клика на элементе без href: такую конструкцию краулер ссылкой не считает.
Как проверить, видит ли Яндекс ссылки внутри скрытого меню?
Откройте Яндекс Вебмастер, перейдите к инструменту проверки URL и укажите адрес страницы. Сервис покажет отрендеренный HTML, который получил робот. Найдите в нём разметку меню и проверьте наличие ссылок с заполненными href. Если ссылок нет, смотрите список ресурсов и причины ошибок загрузки, они указаны в справке о рендеринге.
Опасно ли использовать display:none для скрытия меню на мобильных устройствах?
Display:none само по себе не запрещает индексацию навигации. Важно, чтобы ссылки были доступны роботу и пользователь мог открыть меню обычным действием. Не используйте скрытие для массового показа текста только поисковому роботу.
Что делать, если меню строится полностью через JavaScript-фреймворк?
Включить серверный рендеринг или статическую генерацию страниц, чтобы HTML с навигацией приходил роботу в первом ответе. Инструменты вроде Next.js, Nuxt, Astro решают задачу штатно. Google в руководстве по JavaScript SEO описывает такие подходы как рекомендованные для контента, который должен быстро попадать в индекс.
Как Google Search Console показывает проблемы с рендерингом навигации?
В инструменте проверки URL откройте просмотр отсканированной страницы. Во вкладке с HTML виден код после рендеринга роботом Google, во вкладке со скриншотом видно отрисованное состояние, в разделе с ресурсами перечислены файлы, которые робот не смог загрузить, с причинами. Если среди недоступных ресурсов есть скрипты или стили меню, проблема в robots.txt или в сетевой доступности.