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

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

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

Что же делать в этом случае и каким образом с одной стороны реализовать требуемое условие, а с другой — не повредить будущей индексации сайта?

Напомним, что главной задачей навигационных элементов сайта является их удобство как для пользователя, так и для поисковой машины. Основной проблемой индексации большинства скриптовых меню является не столько то, что они расположены между тегами <script>, а тот факт, что ссылка в них собирается из нескольких частей, или же они вообще расположены в отдельных массивах данных. И то, что с недавнего времени Google «научился» ограничено воспринимать ссылки в JavaScript так же как и HTML ссылки, не означает, что он стал вычленять их из массивов или запрашивать из базы данных. Кроме того, как говорится — «не Google единым» — существуют также и другие поисковые машины, чьи алгоритмы в данный момент не способны воспринимать ссылки в Javascript.

Для того, чтобы наглядно продемонстрировать отличие между Javascript и HTML ссылками, давайте рассмотрим два простых примера:

Вот так выглядит код обычной (HTML) ссылки:

<a href=»//www.proofsite.com.ua»>Proofsite.com.ua — Ваш сайт должен продавать!</a>

Вот так выглядит один из вариантов кода ссылки, формируемой с помощью Javascript:

<a href=»‘+lnk+'» ‘+tg+’ onclick=»swmenu(‘+a+’,-1,-1); if(bw.ie || bw.ns6) this.blur(); ‘

if(lnk==»#») str+=’return false’

str+='» class=»clSlideLinks»> ‘+text+'</a>

Риторический вопрос — во втором случае ссылку вы где-нибудь видите ссылку? Вот точно так же и робот поисковой машины ее не видит. Однако за счет того, что сам URL хранится в отдельном массиве, при загрузке страницы и поддержке Javascript в браузере, для обычного посетителя такая ссылка будет работать.

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

Теперь перейдем непосредственно к вопросу, озвученному в названии статьи — как сделать выпадающее меню, чтобы было удобно и поисковому роботу и посетителю?

Вторым набором инструментария, с помощью которого можно создать выпадающее меню, является использование для этих целей Каскадных листов стилей (CSS).

CSS (англ. Cascading Style Sheets — каскадные листы стилей) — технология описания внешнего вида документа, написанного языком разметки. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа.

Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

По материалам Википедии

Главным преимуществом меню, созданном с помощью CSS, является обратный от Javacript принцип его разработки: если в Javascript используется методика «собери/создай меню из элементов», то в случае использования CSS, методика звучит «загрузи меню и управляй его элементами». То есть, при использовании CSS мы, по-сути дела, изначально загружаем полностью весь код меню, а дальше, в зависимости от действий мыши пользователя, или показываем или скрываем его части.

Итак, как же выглядит код выпадающего меню, визуализированного с помощью CSS? Я не буду приводить весь код, а также стили CSS, которые применяются для управления (с ними можно ознакомиться, например, в одном из популярных меню Suckerfish Dropdowns) — в данный момент нас интересует исключительно та часть, которая отвечает за вывод непосредственно ссылок.

Для этого откроем работающий пример меню, созданного с помощью CSS и посмотрим непосредственно на ту часть кода, где выводятся навигационные ссылки.


  • Classification
  • Physcial Characteristics
  • Habitat
  • Lifestyle
  • Evolution
  • Distribution

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

Однако необходимо понимать, что не все типы меню могут быть сделаны с помощью исключительно CSS. Например, большинство меню «аккордеонного» типа (разворачивающиеся вниз при наведении мыши или клику) или же так называемые «док-меню» (выезжает и прячется за край экрана) сделаны все же на основе Javascript.

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

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

Часть 1. Почему не стоит увлекаться меню на основе скриптов

3 комментария к “Как сделать выпадающее меню для поискового робота?”

  1. На базе фреймворка jquery есть куча примеров и плагинов, как можно сделать выпадающее меню из простого html-списка.

    ОтветитьОтветить
  2. Дмитрий, спасибо! Да — о jQuery будет отдельная запись, как об инструменте для создания подобного рода функционала. Думаю, она будет следующей в рубрике. Тут по-логике остается только предложить подписаться на RSS :)

    А в этой статье я писал не столько об инструментах сколько в большей степени хотел показать — почему не стоит использовать Javascript для создания навигации и чем его можно заменить.
    Впрочем, jQuery тоже использует в себе CSS.

    ОтветитьОтветить
  3. Большое спасибо, для изучения jQuery самое оно.

    ОтветитьОтветить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.