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

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

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

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

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

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

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

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

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

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

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

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

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

<div><a>Overview</a></div>
<ul>
	<li></li>
	<li>Classification</li>
	<li>Physcial Characteristics</li>
	<li>Habitat</li>
	<li>Lifestyle</li>
	<li>Evolution</li>
	<li>Distribution</li>
</ul>

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

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

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

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