В статье «Почему не стоит увлекаться меню на основе скриптов» мы говорили о том, что использование выпадающих-выезжающих-скользящих и прочих функционально-визуализированых меню, разработанных на основе скриптов, может отрицательно сказаться на индексации вашего сайта поисковыми машинами.
Однако возможны ситуации в которых или заказчик настаивает на реализации именно выпадающего меню, или же структура сайта предполагает большое количество главных разделов при компактном дизайне, или же необходимо вынести несколько разделов и подразделов в качестве основных, выделив их в отдельное меню.
Что же делать в этом случае и каким образом с одной стороны реализовать требуемое условие, а с другой — не повредить будущей индексации сайта?
Напомним, что главной задачей навигационных элементов сайта является их удобство как для пользователя, так и для поисковой машины. Основной проблемой индексации большинства скриптовых меню является не столько то, что они расположены между тегами <script>, а тот факт, что ссылка в них собирается из нескольких частей, или же они вообще расположены в отдельных массивах данных. И то, что с недавнего времени Google «научился» ограничено воспринимать ссылки в JavaScript так же как и HTML ссылки, не означает, что он стал вычленять их из массивов или запрашивать из базы данных. Кроме того, как говорится — «не Google единым» — существуют также и другие поисковые машины, чьи алгоритмы в данный момент не способны воспринимать ссылки в Javascript.
Для того, чтобы наглядно продемонстрировать отличие между Javascript и HTML ссылками, давайте рассмотрим два простых примера:
Вот так выглядит код обычной (HTML) ссылки:
Вот так выглядит один из вариантов кода ссылки, формируемой с помощью Javascript:
if(lnk==»#») str+=’return false’
str+='» class=»clSlideLinks»> ‘+text+'</a>
Риторический вопрос — во втором случае ссылку вы где-нибудь видите ссылку? Вот точно так же и робот поисковой машины ее не видит. Однако за счет того, что сам URL хранится в отдельном массиве, при загрузке страницы и поддержке Javascript в браузере, для обычного посетителя такая ссылка будет работать.
Теперь перейдем непосредственно к вопросу, озвученному в названии статьи — как сделать выпадающее меню, чтобы было удобно и поисковому роботу и посетителю?
Вторым набором инструментария, с помощью которого можно создать выпадающее меню, является использование для этих целей Каскадных листов стилей (CSS).
Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
По материалам Википедии
Главным преимуществом меню, созданном с помощью CSS, является обратный от Javacript принцип его разработки: если в Javascript используется методика «собери/создай меню из элементов», то в случае использования CSS, методика звучит «загрузи меню и управляй его элементами». То есть, при использовании CSS мы, по-сути дела, изначально загружаем полностью весь код меню, а дальше, в зависимости от действий мыши пользователя, или показываем или скрываем его части.
Итак, как же выглядит код выпадающего меню, визуализированного с помощью CSS? Я не буду приводить весь код, а также стили CSS, которые применяются для управления (с ними можно ознакомиться, например, в одном из популярных меню Suckerfish Dropdowns) — в данный момент нас интересует исключительно та часть, которая отвечает за вывод непосредственно ссылок.
Для этого откроем работающий пример меню, созданного с помощью CSS и посмотрим непосредственно на ту часть кода, где выводятся навигационные ссылки.
- Classification
- Physcial Characteristics
- Habitat
- Lifestyle
- Evolution
- Distribution
На выходе получился навигационный элемент, состоящий исключительно из обычных гиперсссылок, что позволит поисковому роботу без труда проиндексировать все внутренние страницы вашего сайта. Кроме того, как можно увидеть на примере, никаких ограничений в функциональных возможностях нет — в качестве якорей ссылок можно использовать как текст, так и изображения.
Однако необходимо понимать, что не все типы меню могут быть сделаны с помощью исключительно CSS. Например, большинство меню «аккордеонного» типа (разворачивающиеся вниз при наведении мыши или клику) или же так называемые «док-меню» (выезжает и прячется за край экрана) сделаны все же на основе Javascript.
Как решить проблему индексации сайта, в том случае, если уже используется Javascript-навигация или же использование скриптовых меню обязательно — мы рассмотрим в следующей статье.