В статье «Почему не стоит увлекаться меню на основе скриптов» мы говорили о том, что использование выпадающих-выезжающих-скользящих и прочих функционально-визуализированых меню, разработанных на основе скриптов, может отрицательно сказаться на индексации вашего сайта поисковыми машинами.
Однако возможны ситуации в которых или заказчик настаивает на реализации именно выпадающего меню, или же структура сайта предполагает большое количество главных разделов при компактном дизайне, или же необходимо вынести несколько разделов и подразделов в качестве основных, выделив их в отдельное меню.
Что же делать в этом случае и каким образом с одной стороны реализовать требуемое условие, а с другой — не повредить будущей индексации сайта?
Напомним, что главной задачей навигационных элементов сайта является их удобство как для пользователя, так и для поисковой машины. Основной проблемой индексации большинства скриптовых меню является не столько то, что они расположены между тегами <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 и посмотрим непосредственно на ту часть кода, где выводятся навигационные ссылки.
<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-навигация или же использование скриптовых меню обязательно — мы рассмотрим в следующей статье.